Mehr Ordnung durch AJAX

In diesem Beispiel sollen die Grundlagen clientseitiger Call-Backs mit AJAX zur Lösung des oben genannten einfachen Web-Entwicklungsproblems erläutert werden: das gefürchtete Klicken auf die Zurück-Schaltfläche nach dem Einreichen einer Seite. Das Problem besteht darin, dass der Browser nach dem Klicken auf die Schaltfläche zum Einreichen eine neue Seite lädt, und zwar in Abhängigkeit von den mit dem Formular eingereichten Seitendaten. Um zurück zur Ausgangsseite zu gelangen, müssen die Seitendaten erneut eingereicht werden, was zu einer unbeabsichtigten doppelten Eingabe des Formulars führt.

Wie nun löst AJAX dieses Problem? Es entfernt einfach das Einreichen des Formulars! Mit AJAX kann man problemlos Formulardaten ohne die Eingabe eines Formulars einreichen. Dazu wird einfach ein Javascript-Event-Handler mit einem durch das Klicken auf eine Schaltfläche ausgelösten Ereignis verbunden. Auf diese Weise wird beim Klicken der Schaltfläche das Ereignis ausgelöst und über das XMLHttpRequest-Objekt werden die Formulardaten anstelle des Formulars an den Server gesendet. Dies erfordert kein erneutes Laden der Seite oder Übergänge.

Schritt 1: Die Hauptformularseite in HTML erstellen (siehe Listing A). Dieses Beispiel beschränkt sich auf das nötige Minimum, aber natürlich können zusätzliche Datenelemente, wie Auswahlfelder oder Textbereiche, eingefügt werden. Die Datei wird step1.htm genannt.

Listing A

Schritt 2: Eine Seite auf dem Server schreiben, welche die eingereichten Daten anzeigt. Da AJAX rein clientseitig arbeitet, kann man diesen Code in jeder beliebigen Sprache erstellen. Für dieses Beispiel wurde Java gewählt. Man könnte aber auch ASP.NET, PHP oder jegliche andere serverseitige Sprache benutzen. Die Datei wird saveData.jsp (oder saveData.aspx, saveData.php, und so weiter) genannt. Das müsste dann wie folgt aussehen:

<%=“Data Saved: “ + request.getParameter(“DATA“)%>

Test: step1.htm in den verwendeten Browser laden, einige Daten eingeben und auf Einreichen klicken. Die Daten müssten in dem Browser angezeigt werden, andernfalls ist ein Debugging des serverseitigen Codes durchzuführen. Dann die Seite neu laden. Der Browser zeigt nun eine Warnmeldung an, dass ein erneutes Laden der Seite die Formulardaten ein zweites Mal einreicht. Dies ist für die Benutzer störend und für die Webentwickler ein Problem.