Les Requêtes en JavaScript

Introduction aux Requêtes

L'objet XMLHttpRequest est une fonctionnalité intégrée des navigateurs qui permet d'effectuer des requêtes HTTP en JavaScript. Cet object est particulièrement utile pour récupérer des données provenant d'API. Cependant, il est important de noter que l'utilisation de XMLHttpRequest de manière synchrone est déconseillée. À la place, il est préférable d'utiliser l'API Fetch, qui simplifie la gestion des requêtes asynchrones.

Comprendre XMLHttpRequest

XMLHttpRequest peut fonctionner en deux modes : synchrone et asynchrone. Voici comment l'utiliser dans le mode asynchrone : 1. Création de l'objet XMLHttpRequest :

let xhr = new XMLHttpRequest();

1. Initialisation de la requête :

xhr.open(method, URL, [async, user, password]);

Les paramètres principaux sont : - method : méthode HTTP (généralement "GET" ou "POST") - URL : l'URL à laquelle la requête sera envoyée, peut être une chaîne ou un objet URL - async : si cette option est définie sur false, la requête devient synchrone - user, password : authentification HTTP basique (si nécessaire)

1. Envoyer la requête :

xhr.send([body]);

La méthode send ouvre la connexion et envoie la requête au serveur. Le paramètre body est optionnel et peut contenir des données à envoyer, notamment avec des requêtes de type POST.

Écoute des Événements de XHR

Pour traiter les réponses, il est crucial d'écouter certains événements sur l'objet xhr. Voici les événements les plus utilisés : - load : lorsque la requête est terminée et la réponse complètement reçue. - error : lorsque la requête échoue, par exemple, en cas de perte de connexion ou d'URL invalide. - progress : déclenché périodiquement pendant le téléchargement de la réponse, indiquant la quantité de données téléchargées.

Exemple d'écouteur d'événements :

xhr.onload = function () { alert(`Progress: ${xhr.status} ${xhr.response}`); };
xhr.onerror = function () { alert(`Une erreur est survenue.`); };
xhr.onprogress = function (event) { /* Rapport des données téléchargées */
    alert(`Reçu ${event.loaded} sur ${event.total}`);
};

Analyse de la Réponse

Une fois la réponse reçue, vous pouvez accéder aux propriétés suivantes de xhr : - status : code de statut HTTP (par exemple, 200, 404, 403). - statusText : message d'état HTTP (en général, "OK" pour 200, "Not Found" pour 404 et ainsi de suite). - response : le corps de la réponse du serveur.

Il est également possible de définir un délai d'expiration :

xhr.timeout = 10000; // Temps d'attente en ms, ici 10 secondes

Requêtes Synchronous

Si le troisième paramètre de .open est défini sur false, alors la requête est effectuée de manière synchrone. Cette approche est rarement utilisée, car elle bloque l'exécution de JavaScript sur la page jusqu'à ce que le chargement soit complet, rendant parfois le défilement impossible. De plus, si la requête prend trop de temps, le navigateur peut suggérer de fermer l'onglet.

Types de Réponse

La propriété xhr.responseType permet de spécifier le format de réponse : - "" : chaîne par défaut - "text" : chaîne - "arraybuffer" : ArrayBuffer - "blob" : Blob - "document" : document XML ou HTML - "json" : réponse JSON (automatiquement analysée)