Neueste Web-Entwicklung Tutorials
 

AJAX - Die onreadystatechange Ereignis


Die onreadystatechange Veranstaltung

Wenn eine Anforderung an einen Server gesendet wird, möchten wir einige Aktionen auf die Antwort basierend auszuführen.

Die onreadystatechange Ereignis wird jedesmal, wenn der Readystate Veränderungen ausgelöst.

Die Readystate Eigenschaft hält den Status des XMLHttpRequest.

Drei wichtige Eigenschaften des XMLHttpRequest-Objekt:

Eigentum Beschreibung
onreadystatechange Speichert eine Funktion (oder der Name einer Funktion), um automatisch jedes Mal, wenn die Readystate-Eigenschaft ändert aufgerufen werden
readyState Hält den Status des XMLHttpRequest. Änderungen 0-4:
0: Anforderung nicht initialisiert
1: Server-Verbindung hergestellt
2: Anforderung empfangen
3: Verarbeitungsanforderung
4: fordern fertig und Antwort bereit ist,
status 200: "OK"
404 Seite nicht gefunden

Im onreadystatechange Ereignis, geben wir das, was passieren wird, wenn die Antwort des Servers bereit ist, verarbeitet zu werden.

Wenn Readystate 4 und Status ist 200, ist die Antwort bereit:

Beispiel

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
Versuch es selber "

Hinweis: Die onreadystatechange Ereignis fünfmal ausgelöst wurde (0-4), einmal für jede Änderung in der Readystate.


Mit Hilfe einer Callback-Funktion

Eine Rückruffunktion ist eine Funktion als Parameter an eine andere Funktion übergeben.

Wenn Sie mehr als eine AJAX Aufgabe haben, auf Ihrer Website, sollten Sie eine Standardfunktion erstellen Sie das XMLHttpRequest-Objekt für das Erstellen, und rufen Sie dies für jede AJAX Aufgabe.

Der Funktionsaufruf sollte die URL enthalten, und was auf onreadystatechange zu tun (die für jeden Anruf wahrscheinlich anders ist):

Beispiel

function loadDoc(cFunc) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    cFunc(xhttp);
  }
Versuch es selber "