XMLHttpRequest API

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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 senden und die Antworten programmatisch mit JavaScript zu empfangen. Dadurch kann eine Website nur einen Teil einer Seite mit Daten vom Server aktualisieren, anstatt auf eine komplett neue Seite navigieren zu müssen. Diese Praxis wird manchmal auch als AJAX bezeichnet.

Die Fetch API ist der flexiblere und leistungsstärkere Ersatz 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 normalerweise anstelle von XMLHttpRequest in modernen Webanwendungen verwendet.

In diesem Artikel

Konzepte und Verwendung

Das zentrale Interface in der XMLHttpRequest API ist XMLHttpRequest. Um eine HTTP-Anfrage zu stellen:

Erstellen Sie eine neue Instanz von XMLHttpRequest, indem Sie deren Konstruktor aufrufen.
Initialisieren Sie es, 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.
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 Fehlersituationen ausgelöst.
Senden Sie die Anfrage, indem Sie XMLHttpRequest.send() aufrufen.

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

Schnittstellen

FormData

Ein Objekt, das <form>-Felder und deren Werte repräsentiert, das an einen Server gesendet werden kann, indem XMLHttpRequest oder fetch() verwendet wird.

ProgressEvent

Eine Unterklasse von Event, die in das progress übergeben wird und Informationen darüber enthält, wie viel von der Anfrage abgeschlossen ist.

XMLHttpRequest

Repräsentiert eine einzelne HTTP-Anfrage.

XMLHttpRequestEventTarget

Eine Superklasse von sowohl XMLHttpRequest als auch XMLHttpRequestUpload, die die Ereignisse definiert, die in beiden dieser Schnittstellen verfügbar sind.

XMLHttpRequestUpload

Repräsentiert den Upload-Prozess eines HTTP-Uploads. Bietet Ereignisse, die es dem Code ermöglichen, den Fortschritt eines Uploads zu verfolgen.

Beispiele

JSON-Daten vom Server abrufen

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 Ereignis-Listener 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

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();
});

Fetch API

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

XMLHttpRequest API

In diesem Artikel

Konzepte und Verwendung

Schnittstellen

Beispiele

JSON-Daten vom Server abrufen

HTML

JavaScript

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN