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.

* Some parts of this feature may have varying levels of support.

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

Die XMLHttpRequest-API ermöglicht es Web-Apps, HTTP-Anfragen an Webserver zu senden und die Antworten programmatisch mit JavaScript zu empfangen. Dies ermöglicht es einer Website, nur einen Teil einer Seite mit Daten vom Server zu aktualisieren, anstatt zu einer ganz neuen Seite zu navigieren. Diese Praxis wird manchmal auch als AJAX bezeichnet.

Die Fetch-API ist der flexiblere und leistungsfähigere Ersatz für die XMLHttpRequest-API. Die Fetch-API verwendet Promises anstelle von Ereignissen zur Behandlung von asynchronen Antworten, integriert sich gut mit Service-Workers und unterstützt fortgeschrittene Aspekte von HTTP wie CORS. Aus diesen Gründen wird die Fetch-API in modernen Web-Apps üblicherweise anstelle von XMLHttpRequest verwendet.

Konzepte und Verwendung

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

Erstellen Sie eine neue XMLHttpRequest-Instanz, indem Sie deren Konstruktor aufrufen.
Initialisieren Sie sie, indem Sie XMLHttpRequest.open() aufrufen. Sie geben dabei die URL für die Anfrage an, die zu verwendende HTTP-Methode und optional einen Benutzernamen und ein Passwort.
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 Fehlerfällen 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 <form>-Felder und ihre Werte darstellt, die an einen Server gesendet werden können, indem XMLHttpRequest oder fetch() verwendet wird.
ProgressEvent: Eine Unterklasse von Event, die in das progress-Ereignis übergeben wird und Informationen darüber enthält, wie viel von der Anfrage abgeschlossen wurde.
XMLHttpRequest: Stellt eine einzelne HTTP-Anfrage dar.
XMLHttpRequestEventTarget: Eine Superklasse von sowohl XMLHttpRequest als auch XMLHttpRequestUpload, die die in beiden dieser Schnittstellen verfügbaren Ereignisse definiert.
XMLHttpRequestUpload: Stellt den Hochladevorgang für einen HTTP-Upload dar. Bietet Ereignisse, die es dem Code 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, indem wir Ereignis-Listener hinzufügen, um den Fortschritt des Ereignisses zu zeigen.

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

Browser-Kompatibilität

Siehe auch

Fetch-API