XMLHttpRequestObjekt

Mit dem XMLHttpRequest-Objekt können Sie einen Teil einer Webseite aktualisieren, ohne die gesamte Seite neu zu laden.

XMLHttpRequest-Objekt

Das XMLHttpRequest-Objekt wird verwendet, um im Hintergrund Daten mit einem Server auszutauschen.

Das XMLHttpRequest-Objekt istder Traum eines Entwicklers, denn Sie können:

Eine Webseite aktualisieren, ohne die Seite neu zu laden
Daten von einem Server anfordern, nachdem die Seite geladen wurde
Daten von einem Server empfangen, nachdem die Seite geladen wurde
Daten im Hintergrund an einen Server senden

Erstellen Sie ein XMLHttpRequest-Objekt

Alle modernen Browser (IE7+, Firefox, Chrome, Safari und Opera) verfügen über ein integriertes XMLHttpRequest-Objekt.

Syntax zum Erstellen eines XMLHttpRequest-Objekts

xmlhttp=new XMLHttpRequest();

Alte Versionen von Internet Explorer（IE5 und IE6）verwenden ActiveX-Objekt:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

Um alle modernen Browser einschließlich IE5 und IE6 zu unterstützen, prüfen Sie, ob der Browser das XMLHttpRequest-Objekt unterstützt. Wenn ja, erstellen Sie ein XMLHttpRequest-Objekt; wenn nicht, erstellen Sie ein ActiveX-Objekt:

Beispiel

if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari Browser führt Code aus xmlhttp=new XMLHttpRequest(); } else { //Code in IE6- und IE5-Browsern ausführen xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

Selbst ausprobieren »

Eine Anfrage an den Server senden

Um eine Anfrage an einen Server zu senden, verwenden wir die Methoden open() und send() des XMLHttpRequest-Objekts:

xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

Methoden	Beschreibung
open(method,url,async)	Gibt den Typ der Anfrage, die URL und an, ob die Anfrage asynchron verarbeitet werden soll. method: Der Typ der Anfrage: GET oder POST url: Der Speicherort der Datei auf dem Server async: true (asynchron) oder false (synchron)
send(string)	Senden Sie die Anfrage an den Server. string: Nur für POST-Anfragen

GET oder POST?

GET ist einfacher und schneller als POST und kann in den meisten Fällen verwendet werden.

Verwenden Sie jedoch in den folgenden Fällen immer POST-Anfragen:

Zwischengespeicherte Dateien sind keine Option (Dateien oder Datenbank auf dem Server aktualisieren)
Eine große Datenmenge wird an den Server gesendet (POST hat keine Größenbeschränkung)
Beim Senden von Benutzereingaben (die unbekannte Zeichen enthalten können) ist POST leistungsfähiger und sicherer als GET

URL - die Datei auf dem Server

Der url-Parameter der open()-Methode ist die Adresse einer Datei auf dem Server:

xmlhttp.open("GET","xmlhttp_info.txt",true);

Die Datei kann ein beliebiger Dateityp sein (wie .txt und .xml) oder eine Server-Skriptdatei (wie .html und .php, die Aktionen auf dem Server ausführen kann, bevor eine Antwort zurückgesendet wird).

Asynchron - Wahr oder Falsch?

Um die Anfrage asynchron zu senden, muss der async-Parameter der open()-Methode auf true gesetzt werden:

xmlhttp.open("GET","xmlhttp_info.txt",true);

Das Senden asynchroner Anfragen ist eine enorme Verbesserung für Webentwickler. Viele Aufgaben, die auf dem Server ausgeführt werden, sind sehr zeitaufwändig.

Durch das asynchrone Senden muss JavaScript nicht auf die Antwort des Servers warten, sondern kann stattdessen:

Andere Skripte ausführen, während auf die Antwort des Servers gewartet wird
Die Antwort verarbeiten, wenn die Antwort bereit ist

Async=true

Wenn async=true verwendet wird, geben Sie im onreadystatechange-Ereignis eine Funktion an, die ausgeführt werden soll, wenn die Antwort bereit ist:

Beispiel

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","xmlhttp_info.txt",true); xmlhttp.send();

Selbst ausprobieren »

Async=false

Um async=false zu verwenden, ändern Sie den dritten Parameter der open()-Methode in false:

xmlhttp.open("GET","xmlhttp_info.txt",false);

Es wird nicht empfohlen, async=false zu verwenden, aber für die Behandlung einiger kleiner Anfragen ist es akzeptabel.

Denken Sie daran, dass JavaScript nicht weiter ausgeführt wird, bis die Antwort des Servers bereit ist. Wenn der Server beschäftigt oder langsam ist, bleibt die Anwendung hängen oder stoppt.

Hinweis:Wenn Sie async=false verwenden, schreiben Sie keine onreadystatechange-Funktion – platzieren Sie den Code einfach nach der send()-Anweisung:

Beispiel

xmlhttp.open("GET","xmlhttp_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Selbst ausprobieren »

Serverantwort

Um eine Antwort vom Server abzurufen, verwenden Sie die responseText- oder responseXML-Eigenschaft des XMLHttpRequest-Objekts.

Eigenschaft	Beschreibung
responseText	Rufen Sie die Antwortdaten als Zeichenfolge ab
responseXML	Die Eigenschaft responseXML gibt ein XML-Dokumentobjekt zurück, das mithilfe der Methoden und Eigenschaften des DOM-Knotenbaums untersucht und geparst werden kann.

responseText-Eigenschaft

Wenn die Antwort vom Server nicht XML ist, verwenden Sie die Eigenschaft responseText.

Die Eigenschaft responseText gibt die Antwort als Zeichenfolge zurück, und Sie können sie entsprechend verwenden:

Beispiel

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Selbst ausprobieren »

responseXML-Eigenschaft

Wenn die Antwort vom Server XML ist und Sie sie als XML-Objekt parsen möchten, verwenden Sie die Eigenschaft responseXML:

Beispiel

Datei anfordernund die Antwort parsen:

xmlDoc=xmlhttp.responseXML; var txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + ""; } document.getElementById("myDiv").innerHTML=txt;

Selbst ausprobieren »

onreadystatechange-Ereignis

Wenn eine Anfrage an den Server gesendet wird, möchten wir einige Aktionen basierend auf der Antwort ausführen.

Das onreadystatechange-Ereignis wird ausgelöst, wann immer sich readyState ändert.

Die Eigenschaft readyState enthält den Status des XMLHttpRequest.

Drei wichtige Eigenschaften des XMLHttpRequest-Objekts:

Eigenschaft	Beschreibung
onreadystatechange	Speichert eine Funktion (oder den Namen einer Funktion), die automatisch jedes Mal aufgerufen wird, wenn sich die Eigenschaft readyState ändert
readyState	Enthält den Status des XMLHttpRequest. Ändert sich von 0 bis 4: 0: Anfrage nicht initialisiert 1: Serververbindung hergestellt 2: Anfrage empfangen 3: Anfrage verarbeiten 4: Anfrage abgeschlossen und Antwort bereit
status	200："OK" 404: Seite nicht gefunden

Im onreadystatechange-Ereignis geben wir an, was geschehen soll, wenn die Antwort des Servers verarbeitet werden kann.

Wenn readyState 4 ist oder der Status 200 ist, ist die Antwort bereit:

Beispiel

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

Selbst ausprobieren »

Hinweis:Das onreadystatechange-Ereignis wird jedes Mal ausgelöst, wenn sich readyState ändert, und wird insgesamt viermal ausgelöst.

Weitere Beispiele

Header-Informationen einer Ressource (Datei) abrufen.

Rufen Sie die angegebene Header-Information über getResponseHeader() ab.
Ruft angegebene Header-Informationen aus einer Ressource (Datei) ab.

Wie eine Webseite mit einem Webserver kommuniziert, wenn ein Benutzer Zeichen in ein Eingabefeld eingibt.

Wie eine Webseite mithilfe des XMLHttpRequest-Objekts Informationen aus einer Datenbank extrahiert.

Erstellen Sie ein XMLHttpRequest, um Daten aus einer XML-Datei abzurufen und die Daten in einer HTML-Tabelle anzuzeigen.

Weitere Erweiterungen