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
- Die Schaltfläche zum Einreichen in einen Schaltflächentyp umwandeln.
- Einen durch Klicken ausgelösten Event-Handler für die Schaltfläche hinzufügen.
- Die JavaScript-Event-Handler-Funktion hinzufügen.
- 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:
- Ö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.
- Den Content-Typ für die POSTed-Formulardaten festlegen (auslassen für GET, HEAD und so weiter).
- Den Datenstream über HTTP an den Host senden.
Damit ist dieses Beispiel zur Anwendungsentwicklung mit AJAX abgeschlossen.
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