XMLHttpRequest

JavaScript est un langage de programmation essentiel pour le développement web, permettant des expériences utilisateur dynamiques et interactives. L'une des fonctionnalités clés de JavaScript est sa capacité à communiquer avec des serveurs, à récupérer des données et à mettre à jour des pages web de manière asynchrone. Cela est principalement réalisé grâce à l'utilisation de XMLHttpRequest (XHR). Cet article propose une plongée approfondie dans XMLHttpRequest, incluant ses méthodes, propriétés et applications pratiques, accompagné de nombreux exemples de code pour faciliter l'apprentissage.

INFO

XMLHttpRequest fonctionne avec des fonctions de rappel. Vous pouvez utiliser l'API Fetch qui utilise les promesses et constitue une solution plus moderne.

Comprendre XMLHttpRequest

XMLHttpRequest est un objet JavaScript qui permet d'envoyer des requêtes HTTP ou HTTPS à un serveur web et de charger les données de réponse du serveur dans le script. Cela permet de mettre à jour des parties d'une page web sans recharger la page entière.

Création d'un objet XMLHttpRequest

Pour initier un XMLHttpRequest, vous devez d'abord créer une instance de l'objet XMLHttpRequest :

---

const xhr = new XMLHttpRequest();

Effectuer une requête HTTP

Une fois l'objet XMLHttpRequest créé, vous pouvez le configurer pour récupérer des données depuis un serveur. La méthode open est utilisée pour préparer la requête.

La méthode open

La méthode open initialise une requête. Elle prend plusieurs paramètres :

---

xhr.open(method, url, async, user, password);

• method : La méthode HTTP à utiliser (par ex. "GET", "POST").
• url : L'URL vers laquelle la requête est envoyée.
• async : Un booléen indiquant si la requête est asynchrone (vrai par défaut).
• user : Facultatif, le nom d'utilisateur pour l'authentification.
• password : Facultatif, le mot de passe pour l'authentification.

Exemple :

---

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

La méthode send

La méthode send envoie la requête au serveur. Pour une requête GET, elle est généralement appelée sans arguments. Pour une requête POST, vous pouvez envoyer des données en argument.

Exemple de requête GET :

---

xhr.send();

Exemple de requête POST :

---

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param1=value1&param2=value2');

Gérer les réponses du serveur

Pour gérer les réponses du serveur, divers écouteurs d'événements peuvent être utilisés.

L'événement onreadystatechange

L'événement onreadystatechange est déclenché chaque fois que la propriété readyState change. La propriété readyState contient l'état de l'XMLHttpRequest.

• 0 : NON ENVOYÉ
• 1 : OUVERT
• 2 : EN-TÊTES REÇUS
• 3 : CHARGEMENT
• 4 : TERMINÉ

Vous pouvez vérifier readyState et status pour déterminer quand la requête s'est terminée avec succès.

Exemple :

---

Output appears here after Run.

note

Bien que onreadystatechange fonctionne, le code moderne préfère généralement onload et onerror pour une gestion de requête plus simple et plus lisible. onreadystatechange est principalement utilisé lorsque vous devez suivre des états intermédiaires (comme la progression ou les en-têtes reçus).

L'événement load

L'événement load est déclenché lorsque la requête se termine avec succès.

Exemple :

---

Output appears here after Run.

Gérer les erreurs

La gestion des erreurs est cruciale pour une application robuste. L'événement onerror est déclenché en cas d'erreur réseau. Vous pouvez également définir un délai d'attente pour empêcher les requêtes de rester bloquées indéfiniment en utilisant xhr.timeout (en millisecondes), et gérer les dépassements de délai avec ontimeout.

Exemple :

---

Output appears here after Run.

Analyser les réponses JSON

Souvent, les réponses du serveur sont au format JSON. Vous pouvez analyser les réponses JSON à l'aide de JSON.parse. Alternativement, vous pouvez définir xhr.responseType = 'json' pour analyser automatiquement la réponse, ce qui prend également en charge d'autres formats comme 'blob', 'arraybuffer' ou 'document'.

Exemple :

---

Output appears here after Run.

Conclusion

Maîtriser XMLHttpRequest est fondamental pour tout développeur web souhaitant créer des applications web dynamiques et réactives. Ce guide a couvert les aspects essentiels de XMLHttpRequest, y compris la création de requêtes, la gestion des réponses, la gestion des erreurs et les scénarios d'utilisation avancés. En intégrant les exemples fournis dans vos projets, vous pouvez exploiter XMLHttpRequest pour améliorer l'expérience utilisateur et construire des applications web sophistiquées.

Pratique

Parmi les affirmations suivantes concernant XMLHttpRequest, lesquelles sont correctes ?

XMLHttpRequest est utilisé pour envoyer des requêtes HTTP ou HTTPS à un serveur web.La méthode 'open' de XMLHttpRequest est utilisée pour envoyer la requête au serveur.L'événement 'onreadystatechange' est déclenché chaque fois que la propriété 'readyState' change.XMLHttpRequest ne peut gérer que des réponses au format JSON.La méthode 'send' envoie la requête au serveur, et elle peut inclure des données lors d'une requête POST.