Der Begriff AJAX wurde in erster Linie durch Jesse James Garrett von Adaptive Path bekannt, der im Februar 2005 einen Essay „Ajax: A New Approach to Web Applications“ [1] schrieb. Inzwischen nutzen neben bereits länger etablierten Lösungen – wie beispielsweise Microsoft Outlook Web Access – viele Applikationen den beschriebenen Mechanismus, die bekanntesten sind sicherlich Google Maps und Google Suggest.

Traditionelle Web-Applikationen übertragen sämtliche Inhalte einer Seite synchron – jede Anfrage führt zur Übertragung der kompletten Inhalte. Ist diese abgeschlossen, werden die Inhalte aufbereitet und dargestellt. Jede Aktion des Benutzers führt dementsprechend zu einer Wartezeit, während die Oberfläche nicht für weitere Eingaben zur Verfügung steht. Unter der Bezeichnung AJAX werden Methoden zusammengefasst, die Inhalte von HTML-Seiten nur partiell zu laden, zu aktualisieren oder auszutauschen. Dazu werden die Aktualisierungen nicht direkt von der HTML-Oberfläche aus vorgenommen, indem eine URL geladen oder ein Formular abgeschickt wird, sondern mittels Javascript durchgeführt. Javascript-Methoden – oft als AJAX-Engine bezeichnet – fordern die Daten vom Webserver an, transformieren diese in HTML und fügen sie in die bestehende HTML-Seite ein. Weil die Kommunikation zwischen Benutzeroberfläche und AJAX-Engine asynchron erfolgt, entsteht keine Wartezeit, bis die Oberfläche wieder für Eingaben zur Verfügung steht.

Betrachtet man die Technologie hinter AJAX, so stellt man fest, dass diese keineswegs neu ist, sondern das Prinzip unter der Bezeichnung XMLHttpRequest bereits seit einigen Jahren eingesetzt wird. Neu ist lediglich die Kapselung der verwendeten Einzeltechnologien in einer separaten Komponente, eben der AJAX-Engine:

• Datenübertragung zwischen der AJAX-Engine und dem Webserver durch das XMLHttpRequest-Objekt
• Verwendung von XML als Format zum Datenaustausch, wobei ebensogut HTML- und Javascript-Inhalte übertragen werden können
• Transformation der XML-Daten in HTML per XSLT
• Manipulation des Document-Object-Model einer HTML-Seite per Javascript

Vor- und Nachteile von AJAX

Für AJAX sprechen im Wesentlichen zwei Stärken: Einerseits wird die zu übertragende Datenmenge reduziert, andererseits werden typische Wartezeiten in Web-Applikationen vermieden, sodass diese sich „interaktiver“ anfühlen. In erster Linie soll also das Erlebnis des Benutzers verbessert werden. An die Stelle träger Web-Applikationen sollen Applikationen treten, die sich wie herkömmliche Desktop-Anwendungen verhalten.

Dem Vorteil der schnelleren Bedienbarkeit stehen jedoch gravierende Nachteile gegenüber: AJAX benötigt zwar keine speziellen Browser-Plugins wie beispielsweise Macromedia Flash, doch ist die Unterstützung von Javascript im Browser notwendig. Speziell in Firmennetzwerken kann dies jedoch ein Problem darstellen.

Mit Hilfe von AJAX lassen sich auch große Datenmengen in einer einzelnen Tabelle übersichtlich darstellen.

Hinzu kommen die bekannten Probleme mit Inkompatibilitäten zwischen den diversen Browser-Versionen. Abhilfe bieten hier AJAX-Frameworks, welche für unterschiedliche Browser-Versionen angepasst und getestet wurden. Die meisten Frameworks unterstützen die folgenden Browser:

• Apple Safari ab Version 1.2
• Konqueror
• Microsoft Internet Explorer ab Version 5.5 (unter Windows)
• Mozilla Firefox
• Netscape ab Version 7.1
• Opera ab Version 7.6

Ein sehr gravierender – wenn auch wenig beachteter – Nachteil sind gerade die neuen Bedienmöglichkeiten von AJAX-Applikationen. In der Regel werden Bereiche der Applikation wie gewohnt bedient. Die per AJAX realisierten Funktionen verhalten sich jedoch davon abweichend. Verstärkt wird dieses Problem durch die mangelnde Transparenz für den Benutzer, der nicht ohne Weiteres feststellen kann, in welchem Zustand sich die Applikation gerade befindet und welche Aktionen in diesem Zustand möglich oder sinnvoll sind. Weil zudem der „Zurück“-Knopf des Browsers nicht wie gewohnt funktioniert, kann sich die Bedienbarkeit der Applikation sogar verschlechtern – von Barrierefreiheit ganz zu schweigen! Der Aufwand zur Umgehung dieser Nachteile ist häufig unerwartet hoch. Die Anzeige des Status (z.B. „Daten werden geladen“) ist noch der einfachere Teil; um die erwartete Funktionalität des „Zurück“-Knopfs wiederherzustellen, muss jedoch der vorherige Zustand der Applikation gesichert werden und jeder Schritt rückgängig gemacht werden können. Falls dies nicht möglich ist, weil beispielsweise eine neue Buchung in einer Warenwirtschaft angelegt wurde, muss eine entsprechende Rückmeldung erfolgen.

In der Konsequenz erscheint AJAX im Wesentlichen für zwei Szenarien sinnvoll. Entweder entwickelt man eine vollständig AJAX-basierte Anwendung à la Google Gmail oder Microsoft Outlook Web Access, oder man setzt es nur für eine bestimmte Aufgabenstellung ein, beispielsweise eine Art Suchvorschau wie bei Google Suggest [2] oder eine dynamische Tabelle, wie weiter unten beschrieben.

Frameworks

Dass AJAX inzwischen heiß diskutiert, ist nicht zuletzt auf die Verfügbarkeit vieler Frameworks zurückzuführen, welche die Entwicklung von AJAX-Applikationen stark vereinfachen. In der Regel verbergen diese Frameworks die Mechanismen zur Datenübertragung und Manipulation im Web-Browser. Der Entwickler hat also einige Methoden – teilweise sogar Event-Handler – zur Verfügung, die er in der eigenen Web-Applikation verwenden kann, ohne dass er sich um die Erzeugung des XMLHttpRequest-Objektes, den Transfer oder die Fehlerbehandlung im Detail kümmern muss. Einige Frameworks wiederum unterstützen spezielle Server-Technologien und erleichtern die Entwicklung, indem sie die notwendigen Javascript-Wrapper auf Client-Seite automatisch erzeugen. Definiert man serverseitig eine Funktion „multiply(x,y)“, so wird eine zugehörige Javascript-Funktion erzeugt, welche die Eingabeparameter „x“ und „y“ erhält, die Funktion „multiply“ auf dem Webserver aufruft und das Ergebnis zurückliefert. Ohne die Server-Unterstützung obliegt es allein dem Entwickler, die Daten auf dem Server korrekt aufzubereiten und den notwendigen Javascript-Code zu erstellen. Dadurch kann auf dem Webserver praktisch jede beliebige Technologie verwendet werden.

Weiterhin kann man zwischen Frameworks unterscheiden, die im Wesentlichen die Transfer-Funktionen kapseln und als Basis für unterschiedlichste Anwendungen dienen können, und solchen, die Module für spezielle Anwendungsfälle zur Verfügung stellen. Zu den bekannteren Frameworks gehören:

AJAX und TYPO3

In der TYPO3-Entwickler-Mailingliste wurde das Thema „AJAX“ in erster Linie im Zusammenhang mit dem Backend diskutiert, beispielsweise um das Laden des Seitenbaumes bei Änderungen zu beschleunigen. In diesem Artikel soll jedoch lediglich die Integration eines speziellen Frameworks im Rahmen eines konkreten Projektes dargestellt werden.

Die Aufgabenstellung

Die A 2000 Industrie-Elektronik GmbH [3] möchte authentifizierten Kunden Zugriff auf Stammdaten aus dem ERP-System geben. Zentrales Element sind ein Suchformular und eine sortierbare Trefferliste mit Artikelnummer und Textfeldern. Zusätzlich sind zu einigen Artikeln ein Beschreibungstext, Bestands- und Preisinformationen sowie eine Teilestückliste hinterlegt. Der Artikelbestand umfasst deutlich über zehntausend Artikel, weshalb Suchanfragen oft sehr viele Treffer liefern. Auf Frames soll verzichtet werden. In einer „klassischen“ TYPO3-Erweiterung würde man die Suche samt Ergebnisliste ähnlich der indizierten Suche gestalten, sodass pro Seite eine einstellbare Anzahl von Treffern angezeigt würde und die Ergebnisliste blätterbar wäre. Ein Klick auf die Artikelzeile führte zur Detailansicht. Dieser Ansatz hat jedoch einige Nachteile:

• Blättern entspricht nicht der gewohnten Bedienung von Warenwirtschaftssystemen
• Benutzer können die Verteilung der Treffer auf die Seiten nicht abschätzen – auf welcher Seite kommen die Artikel mit „F“?
• Blättern ist zeitaufwändig.

Die genannten Nachteile lassen sich durch Verwendung von AJAX wirksam reduzieren. Die Treffer werden in eine dynamische Tabelle geschrieben, in der der Benutzer scrollen kann. Damit die Treffer schnell geladen werden, wird nicht die komplette Tabelle befüllt, sondern immer nur der jeweils sichtbare Ausschnitt mit den relevanten Datensätzen. Zudem werden Treffer auf dem Client in einem Cache gehalten. Nach jeder Spalte kann auf- oder absteigend sortiert werden.

Implementierung

Um das dargestellte Verhalten zu erreichen wurde im konkreten Fall das AJAX-Framework „Rico“ verwendet und angepasst, das ein Modul namens „LiveGrid“ [4] enthält. Damit das LiveGrid in TYPO3 flexibel verwendet werden kann, wurde für dessen Einbindung eine eigene Erweiterung erstellt, während die kundenspezifischen Datenstrukturen, Masken und Templates eine separate Erweiterung bilden. Die LiveGrid-Erweiterung enthält die gesamten Programmlogiken, welche zum Aufbau der Tabelle, zur Navigation, zum Scrollen und Sortieren notwendig sind und ist per TypoScript konfigurierbar. Die Gestaltung der Tabelle erfolgt komplett per CSS. Zusätzlich benötigt wird nur noch eine weitere TYPO3-Seite als Datenlieferant für die Tabelle und das Suchformular zur Filterung der Datensätze.

Mit Erscheinen dieses Magazins wird eine erste Version der LiveGrid- Erweiterung samt einer Beispiel-Anwendung im Extension Repository veröffentlicht. Diese bietet die geschilderte Funktionalität, ein weiterer Ausbau – beispielsweise zur Umgehung der „Zurück“-Problematik – ist geplant.