Maîtriser XMLHttpRequest : un guide des appels AJAX en JavaScript

XMLHttpRequest pour les appels AJAX

L'objet XMLHttpRequest (XHR) est une fonctionnalité essentielle de JavaScript qui vous permet d'envoyer et de recevoir des données de manière asynchrone depuis un serveur sans actualiser la page Web. Il constitue la base d'AJAX (JavaScript asynchrone et XML), permettant des applications Web dynamiques et interactives.

---

1. Qu'est-ce que XMLHttpRequest ?

XMLHttpRequest est une API en JavaScript qui facilite la communication avec les serveurs via des requêtes HTTP. Il prend en charge :

• Récupération de données sans rechargement de page.
• Gestion de divers formats tels que JSON, XML, HTML et texte.
• Opérations synchrones et asynchrones (bien que le mode synchrone soit obsolète pour la plupart des cas d'utilisation).

---

2. Création d'un objet XMLHttpRequest

Pour utiliser XHR, créez une instance de l'objet XMLHttpRequest :

const xhr = new XMLHttpRequest();

---

3. Étapes pour passer un appel XHR

1. Créer l'objet XHR :

   const xhr = new XMLHttpRequest();

1. Initialisez la demande : Utilisez la méthode open() pour définir la méthode HTTP, l'URL et si l'appel est asynchrone.

   xhr.open("GET", "https://api.example.com/data", true);

1. Configurer un rappel pour la réponse : Utilisez l'événement onreadystatechange ou l'événement load.

   xhr.onload = function () {
       if (xhr.status === 200) {
           console.log("Response:", xhr.responseText);
       } else {
           console.error("Error:", xhr.status, xhr.statusText);
       }
   };

1. Envoyer la demande :

   xhr.send();

---

4. Exemple complet : demande GET

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log("Data retrieved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Failed to fetch data. Status:", xhr.status);
    }
};

xhr.onerror = function () {
    console.error("Request failed due to a network error.");
};

xhr.send();

---

5. Envoi de données avec des requêtes POST

XHR permet d'envoyer des données au serveur via POST.

Exemple :

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function () {
    if (xhr.status === 201) {
        console.log("Data saved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Error:", xhr.status);
    }
};

const data = JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1
});

xhr.send(data);

---

6. Propriétés et méthodes de XHR

Propriétés clés :

• readyState : Représente l'état de la requête (0 à 4).

  • 0 : NON ENVOYÉ
  • 1 : OUVERT
  • 2 : HEADERS_RECEIVED
  • 3 : CHARGEMENT
  • 4 : TERMINÉ

• statut : code d'état HTTP (par exemple, 200 pour succès, 404 pour non trouvé).

• responseText : le corps de la réponse sous forme de chaîne de texte.

• responseXML : le corps de la réponse sous forme de données XML (le cas échéant).

Méthodes clés :

• open(method, url, async) : initialise la requête.
• send(data) : envoie la requête au serveur.
• setRequestHeader(header, value) : définit les en-têtes personnalisés.
• abort() : annule la demande.

---

7. Gestion des états de réponse

Vous pouvez utiliser l'événement onreadystatechange pour surveiller la progression d'une requête XHR.

Exemple :

const xhr = new XMLHttpRequest();

---

8. Avantages de l'utilisation de XHR

• Communication asynchrone :Évite de bloquer le thread principal.
• Support multi-navigateurs : Fonctionne sur les navigateurs modernes et plus anciens.
• Formats de données flexibles : Prend en charge JSON, XML, HTML et le texte brut.

---

9. Limites du XHR

• Syntaxe verbeuse : Nécessite plus de code que les API modernes comme fetch.
• Callback Hell : Les requêtes complexes peuvent conduire à des rappels profondément imbriqués.
• Fonctionnalités modernes limitées : Manque de fonctionnalités telles que Promises ou async/await.

---

10. Alternatives modernes : récupérer l'API

Bien que XHR soit toujours largement pris en charge, l'API Fetch offre une approche moderne et basée sur des promesses pour effectuer des requêtes HTTP.

Exemple de récupération :

   const xhr = new XMLHttpRequest();

---

11. Conclusion

XMLHttpRequest est un outil fiable et bien pris en charge pour effectuer des appels AJAX, mais les API modernes comme fetch ou les bibliothèques telles qu'Axios sont généralement préférées pour leur simplicité et leurs fonctionnalités améliorées. Cependant, comprendre XHR est essentiel pour conserver le code existant et acquérir une connaissance plus approfondie du fonctionnement de la communication asynchrone en JavaScript.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!