XMLHttpRequest

JavaScript ist eine essentielle Programmiersprache für die Webentwicklung, die dynamische und interaktive Benutzererlebnisse ermöglicht. Eine der Schlüsselfunktionen von JavaScript ist die Fähigkeit, mit Servern zu kommunizieren, Daten abzurufen und Webseiten asynchron zu aktualisieren. Dies wird hauptsächlich durch die Verwendung von XMLHttpRequest (XHR) erreicht. Dieser Artikel bietet einen tiefen Einblick in XMLHttpRequest, einschließlich seiner Methoden, Eigenschaften und praktischen Anwendungen, komplett mit mehreren Codebeispielen zum erleichterten Lernen.

INFO

XMLHttpRequest arbeitet mit Callback-Funktionen. Sie können die Fetch API verwenden, die mit Promises arbeitet und eine modernere Lösung darstellt.

XMLHttpRequest verstehen

XMLHttpRequest ist ein JavaScript-Objekt, das die Fähigkeit bietet, HTTP- oder HTTPS-Anfragen an einen Webserver zu senden und die Serverantwortdaten zurück in das Skript zu laden. Dies ermöglicht es, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu laden zu müssen.

Erstellen eines XMLHttpRequest-Objekts

Um eine XMLHttpRequest zu initiieren, müssen Sie zunächst eine Instanz des XMLHttpRequest-Objekts erstellen:

---

const xhr = new XMLHttpRequest();

Eine HTTP-Anfrage senden

Sobald das XMLHttpRequest-Objekt erstellt wurde, können Sie es konfigurieren, um Daten von einem Server abzurufen. Die open-Methode wird verwendet, um die Anfrage einzurichten.

Die open-Methode

Die open-Methode initialisiert eine Anfrage. Sie übernimmt mehrere Parameter:

---

xhr.open(method, url, async, user, password);

• method: Die zu verwendende HTTP-Methode (z. B. "GET", "POST").
• url: Die URL, an die die Anfrage gesendet wird.
• async: Ein boolescher Wert, der angibt, ob die Anfrage asynchron ist (standardmäßig true).
• user: Optional, der Benutzername zur Authentifizierung.
• password: Optional, das Passwort zur Authentifizierung.

Beispiel:

---

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

Die send-Methode

Die send-Methode sendet die Anfrage an den Server. Für eine GET-Anfrage wird sie typischerweise ohne Argumente aufgerufen. Für eine POST-Anfrage können Sie Daten als Argument senden.

Beispiel für eine GET-Anfrage:

---

xhr.send();

Beispiel für eine POST-Anfrage:

---

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param1=value1&param2=value2');

Serverantworten verarbeiten

Um Antworten vom Server zu verarbeiten, können verschiedene Event-Listener verwendet werden.

Das onreadystatechange-Event

Das onreadystatechange-Event wird ausgelöst, immer wenn sich die Eigenschaft readyState ändert. Die Eigenschaft readyState speichert den Status des XMLHttpRequest.

• 0: UNSENT
• 1: OPENED
• 2: HEADERS_RECEIVED
• 3: LOADING
• 4: DONE

Sie können readyState und status überprüfen, um festzustellen, wann die Anfrage erfolgreich abgeschlossen wurde.

Beispiel:

---

Output appears here after Run.

note

Während onreadystatechange funktioniert, bevorzugen moderne Code-Strukturen im Allgemeinen onload und onerror für eine einfachere, besser lesbare Anfrageverarbeitung. onreadystatechange wird hauptsächlich verwendet, wenn Sie Zwischenzustände (wie Fortschritt oder empfangene Header) verfolgen müssen.

Das load-Event

Das load-Event wird ausgelöst, wenn die Anfrage erfolgreich abgeschlossen ist.

Beispiel:

---

Output appears here after Run.

Fehlerbehandlung

Die Fehlerbehandlung ist entscheidend für eine robuste Anwendung. Das onerror-Event wird ausgelöst, wenn ein Netzwerkfehler auftritt. Sie können auch ein Timeout festlegen, um zu verhindern, dass Anfragen endlos hängen bleiben, indem Sie xhr.timeout (in Millisekunden) verwenden und Timeouts mit ontimeout behandeln.

Beispiel:

---

Output appears here after Run.

JSON-Antworten parsen

Oft liegen Serverantworten im JSON-Format vor. Sie können JSON-Antworten mit JSON.parse parsen. Alternativ können Sie xhr.responseType = 'json' festlegen, um die Antwort automatisch zu parsen, was auch andere Formate wie 'blob', 'arraybuffer' oder 'document' unterstützt.

Beispiel:

---

Output appears here after Run.

Fazit

Die Beherrschung von XMLHttpRequest ist grundlegend für jeden Webentwickler, der dynamische und reaktionsschnelle Webanwendungen erstellen möchte. Dieser Leitfaden hat die wesentlichen Aspekte von XMLHttpRequest abgedeckt, einschließlich der Erstellung von Anfragen, der Verarbeitung von Antworten, der Fehlerbehandlung und fortgeschrittener Anwendungsszenarien. Durch die Integration der bereitgestellten Beispiele in Ihre Projekte können Sie XMLHttpRequest nutzen, um Benutzererlebnisse zu verbessern und anspruchsvolle Webanwendungen zu entwickeln.

Praxis

Welche der folgenden Aussagen über XMLHttpRequest sind korrekt?

XMLHttpRequest wird verwendet, um HTTP- oder HTTPS-Anfragen an einen Webserver zu senden.Die 'open'-Methode von XMLHttpRequest wird verwendet, um die Anfrage an den Server zu senden.Das 'onreadystatechange'-Event wird ausgelöst, immer wenn sich die Eigenschaft 'readyState' ändert.XMLHttpRequest kann nur Antworten im JSON-Format verarbeiten.Die 'send'-Methode sendet die Anfrage an den Server und kann beim Erstellen einer POST-Anfrage Daten enthalten.