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 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 daserror
-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 mittelsXMLHttpRequest
oderfetch()
gesendet werden können. ProgressEvent
-
Eine Unterklasse von
Event
, die an dasprogress
-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 vonXMLHttpRequestUpload
, 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
<div class="controls">
<button class="xhr" type="button">Click to start XHR</button>
</div>
<textarea readonly class="event-log"></textarea>
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