Aber wo bleibt XML, schließlich trägt Ajax es doch im Namen? XMLHttpRequest übermittelt einfach nur die Antwort desWebservers. Um welches Datenformat es sich dabei handelt, ist egal. Es kann wie im Beispiel Text sein, eine XML-Datei oder HTML-formatierte Texte. Die Auswahl des Formats ist vor allem davon abhängig, wie sich die Server-Antworten am einfachsten verarbeiten lassen.
XML-Daten speichert XMLHttpRequest nicht nur in ResponseText, sondern zusätzlich in der Eigenschaft ResponseXML. Dabei handelt es sich um einen Objektbaum nach dem Document Object Model (DOM), auf den Sie mit den entsprechenden Methoden von JavaScript zugreifen. Das kann im Detail ziemlich komplexwerden. Weil DOM mit Ajax und XMLHttpRequest eigentlich nichts zu tun hat, verwenden alle Beispiele in diesem Artikel das Textformat für die Antwort des Webservers.
Rückruf vom Browser
Die Callback-Funktion muss einiges prüfen. Der Browser ruft die Funktion nicht nur auf, wenn die Antwort vom Webserver eingetroffen ist. Je nach Browser gibt es mehrere Zwischenstadien, etwa wenn die Anfrage erfolgreich versandt wurde. Das Listing zeigt dies:
function BearbeiteAntwort ()
{
var antwort="";
if (AbfrageObjekt.readyState == 4){
if (AbfrageObjekt.status == 200) {
antwort=AbfrageObjekt.responseText;FuelleListe(antwort);
} } };
Die Eigenschaft readyState des XMLHttpRequest- Objekts signalisiert den Fortschritt der Anfrage. Entscheidend ist dabei der Wert 4, der den Abschluss der Anfrage anzeigt. Das bedeutet noch nicht, dass die Bearbeitung auf dem Webserver erfolgreich verlaufen ist. Wie bei einer normalen Anfrage des Browsers an einen Webserver gibt es Fehlercodes, die in der Eigenschaft status hinterlegt sind. Ein Wert von 200 bedeutet, dass alles erfolgreich verlaufen ist. Der aus dem Browser bekannte Wert 404 signalisiert hingegen, dass die URL nicht gefunden wurde.
responseText enthält das Ergebnis der Suchanfrage für die Postleitzahlen in der Datenbank. Die Funktion FuelleListe() zerlegt im Beispiel die Server-Antwort in die einzelnen Postleitzahlen und trägt diese in die Auswahlliste im Webformular ein.
Das Beispiel erfüllt nur Minimalanforderungen. So wäre etwa eine Timerfunktion sinnvoll, die nach einer Wartezeit auf die fehlgeschlagene Webserver-Anfrage hinweist und diese abbricht. Dann wartet das XMLHttpRequest- Objekt nicht länger auf eine Antwort und ruft auch die Callback-Funktion nicht mehr auf. Sie erreichen das mit der Methode
AbfrageObjekt.abort().
Fertige Frameworks
Auch wenn der JavaScript-Code im Beispiel nicht umfangreich ist, warten bei der Programmierung Fallstricke. Zum einen gibt es zwischen den Browsern Unterschiede. Viel tückischer ist aber, dass mehrere Komponenten beteiligt sind. Eine Anfrage durchläuft die Stationen Browser-Skript, XMLHttpRequest-Objekt, Webserver, XMLHttpRequest-Objekt, Browser-Skript. Es kann sehr mühsam sein, herauszufinden, an welcher Stelle ein Fehler auftritt. Doch es gibt Frameworks (Module) für Ajax. Manche sind als JavaScript-Paket für den Browser konzipiert, die Verarbeitung auf dem Webserver müssen Sie übernehmen.
Typische Vertreter sind Sarissa und Prototype. Andere Frameworks laufen auf dem Webserver mit Programmiersprachen wie PHP, ASP.Net, Java und Python. Bevor Sie sich für ein Framework entscheiden, sollten Sie genau wissen, welche Aufgaben Ajax erledigen soll. Achten Sie darauf, dass das Projekt weiter gepflegt wird – sonst stehen Sie beim Browser-Update vor Skriptfehlern und müssen aufwändig das Framework wechseln.
Das Objekt XMLHttpRequest
| Eigenschaft | Erklärung |
| onreadystatechange | Die Callback-Funktion, die bei einer Änderungen des Anfragestatus aufgerufen wird |
| readyState | Der aktuelle Status der Anfrage |
| responseText | Die Antwort des Webservers als Zeichenkette |
| responseXML | Die Antwort des Webservers als DOM-Objektbaum, falls es sich um gültiges XML handelt |
| status | HTTP-Antwort-Code des Webservers, zum Beispiel 404 für eine nicht erreichbare URL |
| statusText | Kurze Beschreibung des HTTP-Antwort-Codes, zum Beispiel „Nicht gefunden ...“ |
| Methode | Erklärung |
| abort() | Stoppt eine Anfrage und setzt readyState auf 0 zurück. |
| open() | Bereitet eine Anfrage vor. Die Parameter: Anfragemethode, URL, Synchronstatus, Benutzername, Passwort. Nur die beiden ersten Parameter sind Pflicht, ohne Angabe ist der Synchronstatus true (asynchrone Anfrage). Passwort und Benutzername dienen, falls erforderlich, zum Einloggen auf dem Webserver. |
| send() | Schickt die Anfrage an den Webserver ab, als Parameter ist „null“ zu übergeben. |
