XMLHttpRequest API

Konzepte und Verwendung

Das zentrale Interface in der XMLHttpRequest API ist XMLHttpRequest. Um eine HTTP-Anfrage zu stellen:

1. Erstellen Sie eine neue Instanz von XMLHttpRequest, indem Sie deren Konstruktor aufrufen.
2. Initialisieren Sie es, indem Sie XMLHttpRequest.open() aufrufen. An diesem Punkt geben Sie die URL fr die Anfrage, die zu verwendende HTTP-Methode und optional einen Benutzernamen und ein Passwort an.
3. Fgen Sie Ereignis-Handler hinzu, um das Ergebnis der Anfrage zu erhalten. Zum Beispiel wird das load Ereignis ausgelst, wenn die Anfrage erfolgreich abgeschlossen wurde, und das error Ereignis wird in verschiedenen Fehlersituationen ausgelst.
4. Senden Sie die Anfrage, indem Sie XMLHttpRequest.send() aufrufen.

Fr einen detaillierten Leitfaden zur XMLHttpRequest API, siehe Using XMLHttpRequest.

Schnittstellen

FormData

Ein Objekt, das <form>-Felder und deren Werte reprsentiert, das an einen Server gesendet werden kann, indem XMLHttpRequest oder fetch() verwendet wird.

ProgressEvent

Eine Unterklasse von Event, die in das progress bergeben wird und Informationen darber enthlt, wie viel von der Anfrage abgeschlossen ist.

XMLHttpRequest

Reprsentiert eine einzelne HTTP-Anfrage.

XMLHttpRequestEventTarget

Eine Superklasse von sowohl XMLHttpRequest als auch XMLHttpRequestUpload, die die Ereignisse definiert, die in beiden dieser Schnittstellen verfgbar sind.

XMLHttpRequestUpload

Reprsentiert den Upload-Prozess eines HTTP-Uploads. Bietet Ereignisse, die es dem Code ermglichen, den Fortschritt eines Uploads zu verfolgen.

Beispiele

JSON-Daten vom Server abrufen

In diesem Beispiel rufen wir eine JSON-Datei von https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json ab und fgen Ereignis-Listener hinzu, um den Fortschritt des Ereignisses anzuzeigen.

HTML

<div class="controls">
  <button class="xhr" type="button">Click to start XHR</button>
</div>

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

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

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

JavaScript

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

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

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

xhrButton.addEventListener("click", () => {
  log.textContent = "";

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

Ergebnis

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Fetch API