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 für die Anfrage, die zu verwendende HTTP-Methode und optional einen Benutzernamen und ein Passwort an.
3. Fügen Sie Ereignis-Handler hinzu, um das Ergebnis der Anfrage zu erhalten. Zum Beispiel wird das load Ereignis ausgelöst, wenn die Anfrage erfolgreich abgeschlossen wurde, und das error Ereignis wird in verschiedenen Fehlersituationen ausgelöst.
4. Senden Sie die Anfrage, indem Sie XMLHttpRequest.send() aufrufen.

Für einen detaillierten Leitfaden zur XMLHttpRequest API, siehe Using XMLHttpRequest.

Schnittstellen

FormData

Ein Objekt, das <form>-Felder und deren Werte repräsentiert, 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 darüber enthält, wie viel von der Anfrage abgeschlossen ist.

XMLHttpRequest

Repräsentiert eine einzelne HTTP-Anfrage.

XMLHttpRequestEventTarget

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

XMLHttpRequestUpload

Repräsentiert den Upload-Prozess eines HTTP-Uploads. Bietet Ereignisse, die es dem Code ermöglichen, 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 fügen 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-Kompatibilität

Siehe auch

• Fetch API