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: Dieses Feature ist verfügbar in Web Workers, außer in Service Workers.

Die XMLHttpRequest API ermöglicht Webanwendungen, HTTP-Anfragen an Webserver zu senden und die Antworten programmatisch über JavaScript zu empfangen. Dadurch kann eine Webseite nur einen Teil der Seite mit Daten vom Server aktualisieren, anstatt zu einer komplett neuen Seite navigieren zu müssen. Diese Praxis wird auch manchmal 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 Handhabung asynchroner Antworten, integriert sich gut mit Service Workers und unterstützt fortschrittliche Aspekte von HTTP wie CORS. Aus diesen Gründen wird die Fetch API in modernen Web-Apps oft anstelle von XMLHttpRequest verwendet.

Konzepte und Verwendung

Das zentrale Interface 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 sie durch den Aufruf von XMLHttpRequest.open(). An diesem Punkt geben Sie die URL für die Anfrage, die zu verwendende HTTP-Methode und optional einen Benutzernamen und ein Passwort an.
Fügen Sie Ereignishandler 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 unter verschiedenen Fehlerbedingungen ausgelöst.
Senden Sie die Anfrage, indem Sie XMLHttpRequest.send() aufrufen.

Für einen ausführlichen Leitfaden zur XMLHttpRequest API siehe Verwendung von XMLHttpRequest.

Schnittstellen

FormData: Ein Objekt, das <form>-Felder und deren Werte darstellt und das mit XMLHttpRequest oder fetch() an einen Server gesendet werden kann.
ProgressEvent: Eine Subklasse von Event, die in das progress übergeben wird und die Informationen darüber enthält, wie viel der Anfrage bereits abgeschlossen wurde.
XMLHttpRequest: Stellt eine einzelne HTTP-Anfrage dar.
XMLHttpRequestEventTarget: Eine Oberklasse sowohl von XMLHttpRequest als auch von XMLHttpRequestUpload, die die Ereignisse definiert, die in beiden Interfaces verfügbar sind.
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 wird eine JSON-Datei von https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json abgerufen, wobei Event-Listener hinzugefügt werden, um den Fortschritt des Events 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