Blue Flower

Der grundsätzliche Ablauf einer AJAX-Anfrage und das XMLHttpRequest-Objekt (XHR)

Wenn Sie AJAX einsetzen, wollen sie in jedem Fall einen Teil einer bereits geladenen Webseite austauschen oder dort Daten ergänzen, ohne die gesamte Webseite wieder neu zu laden. Dies bedeutet, Sie fordern nicht auf konventionelle Weise über den Browser Daten vom Server neu an, sondern Sie kommunizieren quasi am Browser vorbei mit dem Server. Dies hat die Konsequenz, dass die bereits geladene Webseite im Browser erhalten bleibt und die Antwort des Servers mit DHTML-Mitteln in die Webseite eingefügt wird. Sie werden eine hohe Ähnlichkeit zu den Verfahren erkennen, bei denen wir versteckte IFrames als Datenspeicher verwendet haben.

Der grundsätzliche Ablauf

Der Ablauf einer AJAX-Anfrage folgt dabei in der Regel immer dem gleichen Schema:

·       Zuerst wird ein Objekt erzeugt, über das die Kommunikation am Browser vorbei mit dem Server erfolgen wird. In der Regel asynchron zur eigentlichen bewussten Kommunikation des Anwenders mit dem Server. Dieses neue Kommunikationsobjekt ist eine Erweiterung des Objektmodells von JavaScript.

·       Eine Callback-Funktion wird bei diesem Kommunikationsobjekt über einen Eventhandler als Funktionsreferenz registriert oder eine anonyme Funktion notiert. Diese Funktion wird dann bei jeder Zustandsänderung der Transaktion aufgerufen. Die angegebene Funktion wird nach der Registrierung für jede Statusänderung des Kommunikationsobjekts aufgerufen. Eine Eigenschaft des Kommunikationsobjekts gibt dabei Aufschluss über den aktuellen Status der Transaktion beim Aufruf dieser Callback-Funktion. So lassen sich einzelne Phasen der Datenübertragung unterscheiden.

·       Die Verbindung wird geöffnet. Das ist aber noch nicht die konkrete Anfrage. Deshalb ist es auch unerheblich, ob Schritt 2 und 3 vertauscht werden.

·       Die Anfrage wird abgeschickt und die AJAX-Applikation wartet auf die Antwort vom Webserver.

·       Die Antwort des Webservers wird im Browser verwertet. Um eine vollständige Antwort zu erkennen, kann die Statusänderung des Kommunikationsobjekts explizit genutzt werden.

Bei AJAX steht damit ein Kommunikationsobjekt im Mittelpunkt. Alle modernen Browser bieten mittlerweile zur Unterstützung dieser asynchronen Kommunikation zwischen Client und Webserver mit dem als Erweiterung des JavaScript-Objektmodells aufgenommenen Objekt XMLHttpRequest eine eingebaute Schnittstelle zur Kontrolle von HTTP-Transaktionen aus clientseitigen Programmiersprachen (hauptsächlich JavaScript), die unabhängig von der "normalen" Datenanforderung des Webbrowsers ablaufen. Diese XHR- bzw. XMLHttpRequest-Objekte sind damit unmittelbar an dem internen Aufbau von HTTP orientiert und das Rückgrat jeder AJAX-Anfrage.