XML-HttpRequest
Alle modernen Browser haben ein eingebautes XMLHttpRequest-Objekt, um Daten von einem Server anzufordern.
Das XMLHttpRequest-Objekt
Das XMLHttpRequest-Objekt kann verwendet werden, um Daten von einem Webserver anzufordern.
Das XMLHttpRequest-Objekt ist ein Entwicklertraum , 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
Das obige Beispiel wird in den AJAX-Kapiteln dieses Tutorials erklärt.
Senden einer XMLHttpRequest
Eine gängige JavaScript-Syntax für die Verwendung des XMLHttpRequest-Objekts sieht ungefähr so aus:
Beispiel
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Beispiel erklärt
Die erste Zeile im obigen Beispiel erstellt ein XMLHttpRequest - Objekt:
var xhttp = new XMLHttpRequest();
Die Eigenschaft onreadystatechange gibt eine Funktion an, die jedes Mal ausgeführt wird, wenn sich der Status des XMLHttpRequest-Objekts ändert:
xhttp.onreadystatechange = function()
Wenn die readyState- Eigenschaft 4 und die status - Eigenschaft 200 ist, ist die Antwort bereit:
if (this.readyState == 4 && this.status == 200)
Die Eigenschaft responseText gibt die Serverantwort als Textzeichenfolge zurück.
Die Textzeichenfolge kann verwendet werden, um eine Webseite zu aktualisieren:
document.getElementById("demo").innerHTML = xhttp.responseText;
In den AJAX-Kapiteln dieses Tutorials erfahren Sie viel mehr über das XMLHttpRequest-Objekt.
Alte Versionen von Internet Explorer (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");
}