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

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.

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.

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:

CPAINT (Cross-Platform Asynchronous Interface Toolkit)

CPAINT ist ein allgemeines Framework, das ASP und PHP auf der Server-Seite unterstützt. http://cpaint.sourceforge.net

dojo

dojo konzentriert sich auf die Entwicklung von Benutzeroberflächen und bietet Lösungen für Bookmarks und die Verwendung des „Zurück“-Knopfs. http://dojotoolkit.org

AjaxAC

AjaxAC ist ein PHP-Framework zur Erzeugung von AJAX-Anwendungen. http://ajax.zervaas.com.au

Rico

Open Rico stellt neben der allgemeinen Transfer-Funktionalität ein spezielles Widget zur Unterstützung dynamisch aktualisierbarer Tabellen zur Verfügung. http://openrico.org

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 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.

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.