XML HttpRequest

Alle modernen Browser haben eingebauten XMLHttpRequest-Objekte, um Daten vom Server abzurufen.

XMLHttpRequest-Objekt

Das XMLHttpRequest-Objekt kann verwendet werden, um Daten von einem Webserver abzurufen.

Das XMLHttpRequest-Objekt istTraum des Entwicklers, weil Sie können:

  • Webseite aktualisieren - ohne Neuladen der Seite
  • Daten vom Server anfordern - nach dem Laden der Seite
  • Daten vom Server empfangen - nach dem Laden der Seite
  • Daten an den Server senden - im Hintergrund

XMLHttpRequest-Beispiel

Wenn Sie im folgenden Eingabefeld Zeichen eingeben, wird ein XMLHttpRequest an den Server gesendet und einige Namensvorschläge zurückgegeben (vom Server):

Beispiel

Bitte geben Sie Ihren Namen in das folgende Eingabefeld ein:

Name: Vorschläge: Das AJAX-Kapitel dieses Tutorials erläutert den obigen Beispiel.

Senden Sie XMLHttpRequest

Hier ist die gängige JavaScript-Syntax für die Verwendung des XMLHttpRequest-Objekts:

Beispiel

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typische Aktion, die bei der Bereitschaft des Dokuments ausgeführt wird:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

Selbst ausprobieren

Beispiel Erklärung

Die erste Zeile im obigen Beispiel erstellt ein XMLHttpRequest-Objekt:

var xhttp = new XMLHttpRequest();

onreadystatechange Die Eigenschaft bestimmt die Funktion, die每次当 XMLHttpRequest-Objektstatus sich ändert, ausgeführt wird:

xhttp.onreadystatechange = function()

wenn readyState wenn der Wert 4 ist und status Wenn der Wert 200 ist, ist die Antwort bereit:

if (this.readyState == 4 && this.status == 200)

responseText Attributes are returned from the server as text strings.

Text strings can be used to update the web page:

document.getElementById("demo").innerHTML = xhttp.responseText;

You will learn more about the XMLHttpRequest object in the AJAX chapter of this tutorial.