Mehr Ordnung durch AJAX

Hier wird die Datei step1.htm so geändert, dass eine asynchrone Formulareingabe über das XMLHttpRequest-Objekt mit AJAX unterstützt wird. Dazu die Datei step1.htm in step3.htm kopieren und die folgenden Änderungen vornehmen: (siehe Listing B).

Listing B

.XMLHTTP“);
http.onreadystatechange = function()
{
if(http.readyState == 4)
alert(“Server Response Was: “ +
http.responseText);
};
http.open(‘POST’, ‘saveData.jsp’, true);
http.setRequestHeader(‘Content-Type’,
‘application/x-www-form-urlencoded’);
http.send(“DATA=“ + document.getElementById(‘DATA’).value);
}

1. Die Schaltfläche zum Einreichen in einen Schaltflächentyp umwandeln.
2. Einen durch Klicken ausgelösten Event-Handler für die Schaltfläche hinzufügen.
3. Die JavaScript-Event-Handler-Funktion hinzufügen.
4. Die XMLHttpRequest-Call-Back-Routine hinzufügen.

Nun soll die Bedeutung des in Listing C enthaltenen Codes näher erläutert werden.

Listing C

Hier ist zunächst einmal die Code-Zeile zu betrachten, welche das XMLHttpRequest-Objekt erzeugt. Dieser Code verwendet je nach Art des Browsers verschiedene Instantiierungstypen. Mozilla, Firefox und Safari implementieren das XMLHttpRequest als ein spezifisches Objekt, wogegen der Internet Explorer es als Active X-Control implementiert. Wohlgemerkt: Dieser Code handhabt keine Fehler. Man müsste das Ganze in einem Try/Catch-Block verpacken um etwaige Fehler elegant handhaben zu können.

Nun folgt der Code, der die Server-Antwort verarbeitet (siehe Listing D).

Listing D

Hierfür wird eine anonyme Funktion verwendet, die dem Ereignis ReadyStateChange des XMLHttpRequest-Objekt zugewiesen ist. Das ReadyStateChange-Ereignis wird ausgelöst, wenn das XMLHttpRequest-Objekt seinen Zustand ändert oder wenn verschiedene Netzwerk-Ereignisse eintreten. Eines davon ist der Eingang von Daten vom entfernten Host beim Client. Bei der Ankunft der Daten vom Server beim Client, zeigt dieser Handler dem Benutzer die Server-Anwort an. Dieser Event-Handler ist jedoch nur für synchrone Anfragen erforderlich.

Damit kommt der geschäftliche Aspekt dieser Vorführung in Sicht (siehe Listing E).

Listing E

Hier findet das eigentliche Versenden von Daten an den Server statt. Die einzelnen Code-Zeilen führen die folgenden Schritte aus:

1. Öffnen einer HTTP-Verbindung zum Server. Die Parameter sind der HTTP-Aufruftyp, die URL sowie wahr für asynchrone und falsch für synchrone Verbindungen.
2. Den Content-Typ für die POSTed-Formulardaten festlegen (auslassen für GET, HEAD und so weiter).
3. Den Datenstream über HTTP an den Host senden.

Damit ist dieses Beispiel zur Anwendungsentwicklung mit AJAX abgeschlossen.