XMLHttpRequest API

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hinweis: Diese Funktion ist in Web Workers verfügbar, mit Ausnahme von Service Workers.

Die XMLHttpRequest API ermöglicht es Webanwendungen, HTTP-Anfragen an Webserver zu stellen und die Antworten programmatisch mit JavaScript zu verarbeiten. Dies erlaubt einer Website, nur einen Teil einer Seite mit Daten vom Server zu aktualisieren, anstatt eine komplett neue Seite aufzurufen. Diese Praxis ist auch manchmal als AJAX bekannt.

Die Fetch API ist die flexiblere und leistungsfähigere Ablösung für die XMLHttpRequest API. Die Fetch API verwendet Promises anstelle von Ereignissen, um asynchrone Antworten zu verarbeiten, integriert sich gut mit Service Workern und unterstützt fortgeschrittene Aspekte von HTTP wie CORS. Aus diesen Gründen wird die Fetch API in modernen Webanwendungen üblicherweise anstelle von XMLHttpRequest verwendet.

Konzepte und Anwendung

Die zentrale Schnittstelle in der XMLHttpRequest API ist XMLHttpRequest. Um eine HTTP-Anfrage zu stellen:

Erstellen Sie eine neue XMLHttpRequest-Instanz, indem Sie dessen Konstruktor aufrufen.
Initialisieren Sie diese, 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.
Hängen Sie Ereignishandler an, um das Ergebnis der Anfrage zu erhalten. Das load-Ereignis wird beispielsweise ausgelöst, wenn die Anfrage erfolgreich abgeschlossen wurde, und das error-Ereignis wird in verschiedenen Fehlerbedingungen ausgelöst.
Senden Sie die Anfrage, indem Sie XMLHttpRequest.send() aufrufen.

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

Schnittstellen

FormData: Ein Objekt, das die Felder und Werte eines <form> darstellt und die an einen Server mittels XMLHttpRequest oder fetch() gesendet werden können.
ProgressEvent: Eine Unterklasse von Event, die an das progress-Ereignis übergeben wird und Informationen darüber enthält, wie viel von der Anfrage abgeschlossen wurde.
XMLHttpRequest: Repräsentiert eine einzelne HTTP-Anfrage.
XMLHttpRequestEventTarget: Eine Oberklasse sowohl von XMLHttpRequest als auch von XMLHttpRequestUpload, die die in diesen Schnittstellen verfügbaren Ereignisse definiert.
XMLHttpRequestUpload: Repräsentiert den Upload-Prozess für einen HTTP-Upload. Bietet Ereignisse, die es ermöglichen, den Fortschritt eines Uploads zu verfolgen.

Beispiele

Abrufen von JSON-Daten vom Server

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 Ereignislistener hinzu, um den Fortschritt des Ereignisses anzuzeigen.

HTML

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

Specification
XMLHttpRequest Standard

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Fetch API