Schneller, höher, weiter

Inkompatibilitäten

Soweit die Theorie. Doch wie so häufig bei der Entwicklung von Webanwendungen sieht die Praxis etwas anders aus. Jeder Browser kocht sein eigenes Süppchen, und so muss der AJAX-Programmierer, versuchen mit diesen Eigenheiten zurecht zu kommen.

Los geht es mit dem Internet-Explorer, dessen aktuelle Versionen das XML-Request-Objekt nicht implementieren – zumindest nicht so, dass der Aufruf von XMLHttpRequest() zum gewünschten Ergebnis führt. Bei Microsoft gilt es dafür ein entsprechendes ActiveX-Objekt zu erzeugen, das sich glücklicherweise sonst so verhält wie die hier beschriebenen Request-Objekte. Tatsächlich ist sogar noch eine weitere Variante nötig, denn verschiedene Versionen des Internet Explorer erfordern unterschiedliche Syntax.

Weitere Problemkinder sind der KDE-Konqueror und der Apple-Browser Safari, denen manche Javascript-Konstrukte zur Manipulation des DOM-Baumes Schwierigkeiten bereitet. So funktioniert bei ihnen nicht die beschriebene Vorgehensweise, über die Dokumentenfunktion getElementById() an das zu verändernde Element zu gelangen. Das hier vorgestellte AJAX-Beispiel finden Sie noch einmal vollständig und mit allen Browser-Workarounds online unter [3].

Die Funktion checkResult() des Listings demonstriert außerdem, wie man die Interaktion noch dynamischer gestalten kann. Wie bereits in der letzten Variante setzt es das Span-Element nur auf das Ergebnis, wenn die Anfrage abgeschlossen ist (Zustand 4). Bei allen anderen Zustandsänderungen, die ja schon beim Aufbau der Verbindung beginnen, ändert es den Text auf Lade.., sodass der Benutzer sofort ein Feedback darüber erhält, dass etwas passiert.

Hilfe im Netz

Wie man sieht, erfordern AJAX-Webanwendungen etwas mehr Programmieraufwand als konventionelle Webseiten. Das beginnt schon beim Design: Nicht jede Website ist auch dafür geeignet, "ajaxifiziert" zu werden. Gute Planung ist deshalb noch wichtiger als bei der klassischen Webentwicklung. Schließlich muss für jeden AJAX-Abschnitt in einer Seite ein entsprechendes Skript auf dem Server bereitstehen. Außerdem benötigt der Javascript-Code jeder AJAX-Anwendung genaue Kenntnis über den Aufbau der Seiten. Cascading Stylesheets (CSS) verhelfen hier zu besserer Struktur, vergrößern aber die Anzahl an Dateien noch einmal.

Hilfreich sind die zahlreichen Javascript- und AJAX-Bibliotheken im Internet. So kapselt etwa Sajax [4] AJAX-Anfragen und die Verarbeitung der Antworten, damit Sie sich nicht mehr um Browser-Inkompatibilitäten und Ähnliches kümmern müssen. Mehr Komfort bieten beispielsweise Rico [5] oder die Yahoo User Interface Library (YUI) [6], die beide über die AJAX-Kommunikation hinaus auch noch eine Menge Funktionen für den Aufbau dynamischer HTML-Oberflächen mitbringen.