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 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:

  1. Erstellen Sie eine neue XMLHttpRequest-Instanz, indem Sie dessen Konstruktor aufrufen.
  2. 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.
  3. 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.
  4. 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>

JavaScript

js
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
XMLHttpRequest
XMLHttpRequest() constructor
abort
abort event
Authorization header removed from cross-origin redirects
error event
getAllResponseHeaders
Header names returned in all lower case
getResponseHeader
load event
loadend event
loadstart event
open
overrideMimeType
progress event
readyState
readystatechange event
response
responseText
responseType
responseType.arraybuffer_value
responseType.blob_value
responseType.document_value
responseType.json_value
responseURL
responseXML
send
ArrayBufferView as parameter to send()
ArrayBuffer as parameter to send()
Blob as parameter to send()
FormData as parameter to send()
URLSearchParams as parameter to send()
setAttributionReporting
Experimental
setPrivateToken
Experimental
setRequestHeader
status
statusText
timeout
timeout event
upload
withCredentials
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

Siehe auch