Das XMLHttpRequest -Objekt
Alle modernen Browser haben ein eingebautes XMLHttpRequest-Objekt, um Daten von einem Server anzufordern.
Alle gängigen Browser verfügen über einen integrierten XML-Parser, um auf XML zuzugreifen und es zu bearbeiten.
Das XMLHttpRequest-Objekt
Das XMLHttpRequest-Objekt kann verwendet werden, um Daten von einem Webserver anzufordern.
Das XMLHttpRequest-Objekt ist der Traum eines Entwicklers , denn Sie können:
- Aktualisieren Sie eine Webseite, ohne die Seite neu zu laden
- Fordern Sie Daten von einem Server an - nachdem die Seite geladen wurde
- Empfangen Sie Daten von einem Server - nachdem die Seite geladen wurde
- Senden Sie Daten an einen Server - im Hintergrund
XMLHttpRequest-Beispiel
Wenn Sie ein Zeichen in das Eingabefeld unten eingeben, wird eine XMLHttpRequest an den Server gesendet, und einige Namensvorschläge werden (vom Server) zurückgegeben:
Beispiel
Start typing a name in the input field below:
Suggestions:
Senden einer XMLHttpRequest
Alle modernen Browser haben ein eingebautes XMLHttpRequest-Objekt.
Eine gängige JavaScript-Syntax für die Verwendung sieht ungefähr so aus:
Beispiel
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Erstellen eines XMLHttpRequest-Objekts
Die erste Zeile im obigen Beispiel erstellt ein XMLHttpRequest-Objekt:
var xhttp = new XMLHttpRequest();
Das onreadystatechange-Ereignis
Die Eigenschaft readyState enthält den Status von XMLHttpRequest.
Das Ereignis onreadystatechange wird jedes Mal ausgelöst, wenn sich der readyState ändert.
Während einer Serveranfrage ändert sich der readyState von 0 auf 4:
0: Anfrage nicht initialisiert
1: Serververbindung aufgebaut
2: Anfrage erhalten
3: Anfrage bearbeiten
4: Anfrage beendet und Antwort bereit
Geben Sie in der Eigenschaft onreadystatechange eine Funktion an, die ausgeführt werden soll, wenn sich der readyState ändert:
xhttp.onreadystatechange = function()
Wenn readyState 4 und Status 200 ist, ist die Antwort bereit:
if (this.readyState == 4 && this.status == 200)
XMLHttpRequest-Eigenschaften und -Methoden
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
Zugriff über Domänen hinweg
Moderne Browser erlauben aus Sicherheitsgründen keinen domänenübergreifenden Zugriff.
Das bedeutet, dass sich sowohl die Webseite als auch die XML-Datei, die sie zu laden versucht, auf demselben Server befinden müssen.
Die Beispiele auf W3Schools öffnen alle XML-Dateien, die sich in der W3Schools-Domäne befinden.
Wenn Sie das obige Beispiel auf einer Ihrer eigenen Webseiten verwenden möchten, müssen sich die von Ihnen geladenen XML-Dateien auf Ihrem eigenen Server befinden.
Die responseText-Eigenschaft
Die Eigenschaft responseText gibt die Antwort als Zeichenfolge zurück.
Wenn Sie die Antwort als Textzeichenfolge verwenden möchten, verwenden Sie die Eigenschaft responseText:
Beispiel
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Die responseXML-Eigenschaft
Die Eigenschaft responseXML gibt die Antwort als XML-DOM-Objekt zurück.
Wenn Sie die Antwort als XML-DOM-Objekt verwenden möchten, verwenden Sie die Eigenschaft responseXML:
Beispiel
Fordern Sie die Datei cd_catalog.xml an und verwenden Sie die Antwort als XML-DOM-Objekt:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
GET oder POST?
GET ist einfacher und schneller als POST und kann in den meisten Fällen verwendet werden.
Verwenden Sie jedoch immer POST-Anforderungen, wenn:
- Eine zwischengespeicherte Datei ist keine Option (aktualisieren Sie eine Datei oder Datenbank auf dem Server)
- Senden einer großen Datenmenge an den Server (POST hat keine Größenbeschränkungen)
- Beim Senden von Benutzereingaben (die unbekannte Zeichen enthalten können) ist POST robuster und sicherer als GET
Die URL - Eine Datei auf einem Server
Der URL-Parameter der Methode open() ist eine Adresse zu einer Datei auf einem Server:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Die Datei kann jede Art von Datei sein, wie .txt und .xml, oder Serverskriptdateien wie .asp und .php (die Aktionen auf dem Server ausführen können, bevor die Antwort zurückgesendet wird).
Asynchron – wahr oder falsch?
Um die Anfrage asynchron zu senden, muss der Parameter async der Methode open() auf true gesetzt werden:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Das asynchrone Senden von Anfragen ist eine enorme Verbesserung für Webentwickler. Viele der auf dem Server ausgeführten Aufgaben sind sehr zeitaufwändig.
Durch das asynchrone Senden muss das JavaScript nicht auf die Serverantwort warten, sondern kann stattdessen:
- Führen Sie andere Skripte aus, während Sie auf die Antwort des Servers warten
- Behandeln Sie die Antwort, wenn die Antwort fertig ist
Asynchron = wahr
Geben Sie bei Verwendung von async = true eine Funktion an, die ausgeführt werden soll, wenn die Antwort im Ereignis onreadystatechange bereit ist:
Beispiel
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
Asynchron = falsch
Um async = false zu verwenden, ändern Sie den dritten Parameter in der Methode open() in false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Die Verwendung von async = false wird nicht empfohlen, aber für ein paar kleine Anfragen kann dies in Ordnung sein.
Denken Sie daran, dass das JavaScript NICHT weiter ausgeführt wird, bis die Serverantwort bereit ist. Wenn der Server ausgelastet oder langsam ist, bleibt die Anwendung hängen oder stoppt.
Hinweis: Wenn Sie async = false verwenden, schreiben Sie KEINE onreadystatechange-Funktion – fügen Sie den Code einfach nach der send()-Anweisung ein:
Beispiel
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
XML-Parser
Alle modernen Browser haben einen eingebauten XML-Parser.
Das XML-Dokumentobjektmodell (das XML-DOM) enthält viele Methoden für den Zugriff auf und die Bearbeitung von XML.
Bevor jedoch auf ein XML-Dokument zugegriffen werden kann, muss es in ein XML-DOM-Objekt geladen werden.
Ein XML-Parser kann Klartext lesen und in ein XML-DOM-Objekt konvertieren.
Analysieren einer Textzeichenfolge
Dieses Beispiel parst eine Textzeichenfolge in ein XML-DOM-Objekt und extrahiert die Informationen daraus mit JavaScript:
Beispiel
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Alte Browser (IE5 und IE6)
Alte Versionen von Internet Explorer (IE5 und IE6) unterstützen das XMLHttpRequest-Objekt nicht.
Um mit IE5 und IE6 umzugehen, überprüfen Sie, ob der Browser das XMLHttpRequest-Objekt unterstützt, oder erstellen Sie andernfalls ein ActiveXObject:
Beispiel
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Alte Versionen von Internet Explorer (IE5 und IE6) unterstützen das DOMParser-Objekt nicht.
Um mit IE5 und IE6 umzugehen, überprüfen Sie, ob der Browser das DOMParser-Objekt unterstützt, oder erstellen Sie ein ActiveXObject:
Beispiel
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Mehr Beispiele
Header-Informationen einer Ressource (Datei) abrufen.
Spezifische Header-Informationen einer Ressource (Datei) abrufen.
Wie eine Webseite mit einem Webserver kommunizieren kann, während ein Benutzer Zeichen in ein Eingabefeld eingibt.
Wie eine Webseite mit dem XMLHttpRequest-Objekt Informationen aus einer Datenbank abrufen kann.
Erstellen Sie eine XMLHttpRequest, um Daten aus einer XML-Datei abzurufen und die Daten in einer HTML-Tabelle anzuzeigen.