API XMLHttpRequest

Concepts et utilisation

L'interface centrale de l'API XMLHttpRequest est XMLHttpRequest. Pour effectuer une requête HTTP :

1. Créer une nouvelle instance de XMLHttpRequest en appelant son constructeur.
2. L'initialiser en appelant XMLHttpRequest.open(). À ce stade, vous fournissez l'URL pour la requête, la méthode HTTP à utiliser, et éventuellement, un nom d'utilisateur·ice et un mot de passe.
3. Attacher des gestionnaires d'évènements pour obtenir le résultat de la requête. Par exemple, l'évènement load est déclenché lorsque la requête s'est terminée avec succès, et l'évènement error est déclenché dans diverses conditions d'erreur.
4. Envoyer la requête en appelant XMLHttpRequest.send().

Pour un guide détaillé de l'API XMLHttpRequest, voir Utiliser XMLHttpRequest.

Interfaces

FormData

Un objet représentant les champs et les valeurs d'un formulaire (<form>), qui peut être envoyé à un serveur en utilisant XMLHttpRequest ou fetch().

ProgressEvent

Une sous-classe de Event qui est transmise à l'évènement progress, et qui contient des informations sur la progression de la requête.

XMLHttpRequest

Représente une seule requête HTTP.

XMLHttpRequestEventTarget

Une superclasse à la fois de XMLHttpRequest et de XMLHttpRequestUpload, définissant les évènements disponibles dans ces deux interfaces.

XMLHttpRequestUpload

Représente le processus de téléversement pour une requête HTTP. Fournit des évènements permettant au code de suivre la progression d'un téléversement.

Exemples

Récupérer les données JSON depuis le serveur

Dans cet exemple, nous récupérons un fichier JSON depuis https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json, en ajoutant des écouteurs d'évènements pour montrer la progression de la requête.

HTML

<div class="controles">
  <button class="xhr" type="button">Cliquez pour démarrer XHR</button>
</div>

<textarea readonly class="journal-event"></textarea>

.journal-event {
  width: 25rem;
  height: 5rem;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 0.2rem;
}

button {
  width: 12rem;
  margin: 0.5rem;
}

JavaScript

const boutonXHR = document.querySelector(".xhr");
const journal = document.querySelector(".journal-event");
const url =
  "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json";

function gererEvent(e) {
  journal.textContent = `${journal.textContent}${e.type} : ${e.loaded} octets transférés\n`;
}

function ajouterEcouteur(xhr) {
  xhr.addEventListener("loadstart", gererEvent);
  xhr.addEventListener("load", gererEvent);
  xhr.addEventListener("loadend", gererEvent);
  xhr.addEventListener("progress", gererEvent);
  xhr.addEventListener("error", gererEvent);
  xhr.addEventListener("abort", gererEvent);
}

boutonXHR.addEventListener("click", () => {
  journal.textContent = "";

  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  ajouterEcouteur(xhr);
  xhr.send();
});

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'API Fetch