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.
Neueste Kommentare
1 Kommentar zu Mehr Ordnung durch AJAX
Kommentar hinzufügenVielen Dank für Ihren Kommentar.
Ihr Kommentar wurde gespeichert und wartet auf Moderation.
Schöner Artikel!
Ich würde mir aber wünschen, dass auch einige Frameworks genannt werden, die AJAX Entwicklung unterstützen und entsprechende Widgets anbieten.
In erster Linie fallen mir an dieser Stelle folgende ein:
(1)
ExtJS Framework, DER Industrie Standard zur Erstellung komplexer Anwendungen.
Webseite: http://sencha.com
Große proprietäre Systeme nutzen ExtJS als Framework:
Beispiele:
* TYPO3 (ExtJS und Extdirect)
* Documentum
* DIVA Tracking
Vor und Nachteile des Systems
Vorteile:
+ Seit Version 4 strikt MVC compliant
+ Bietet seht viele GUI Bestandteile wie z.B. Grids, Charts, Comboboxen etc.
+ Plattformunabhängig – also für PHP, C#, Python, JAVA und mehr geeignet
+ Unterstützt XML und JSON
+ Unterstützt REST Anwendungen
+ Für Opensource Anwendungen kostenlos
+ Gute Integration mit Extdirect einer Serverseitigen Library für Sprachen wie PHP
+ Taskorientierte Entwicklung möglich
+ Kostenpflichtige IDE zusätzlich erhältlich
+ Dynamische Formulare können direkt aus JSON-Definitionen erstellt werden
+ Ist das Konzept einmal verstanden, kann ExtJs durchaus als RAD Framework genutzt werden, da es Entwicklungszyklen spürbar verkürzt.
Nachteile:
– Sehr umfangreiches und u.U. Ladeintensives Framework;
– Lernkurve recht flach. Umfangreiche Kenntnisse in OO JavaScript benötigt. ExtJs richtet sich vornehmlich an Profis
– Die Entwicklung eigener Styles für GUI Elemente ist aufwändig
– Nach einem update der Version müssen teilweise vergleichsweise Komplizierte Anpassungen am Applikationscode vorgenommen werden. Seit Version 3, hat sich dieses aber deutlich verbessert.
(2)
Jquery, die aktuell meistverwendete Library-Sammlung
Webseite: http://jquery.com
Vorteile:
+ Opensource
+ Richtet sich auch (zumindest teilweise) an Einsteiger
+ Umfangreiche Widget-Sammlung
+ Sehr gute Doku und sehr viele Tutorials und daher auch eine steilere Lernkurve als z.B. bei Extjs
+ Große Community
Nachteile
– AJAX Befehle teilweise umständlicher einzusetzen als bei anderen Scriptsammlungen
(3)
Weitere nennenswerte Libraries/Frameworks
* MooTools
* Scriptaculous
* Dojo Toolkit
* JAX
* YUI
* Xajax
Last but not least ist es natürlich jedem Coder selbst überlassen, welches Framework zum Einsatz kommt. Persönliche Geschmäcker sind ganz unterschiedlich, es macht jedoch Sinn Frameworks zu nutzen die sich einer großen Userschar und somit einer guten Marktdurchdringung erfreuen.
LG und einen schönen Sonntag
Micha
http://consultingdienste.de