Die Entwicklungsabteilungen der Unternehmen sammeln ihre ersten Erfahrungen mit Ajax. Es geht darum, wie sich die neue Technik abseits der großen Ideengeber Google, Yahoo und Delicious beziehungsweise der Referenzen von Bilderverwaltung oder der Darstellung von Weltkarten einsetzen lässt. Wie kann Ajax in bestehende Systeme oder in den Entwicklungsprozess für neue Software integriert werden, um den Weg für Anwendungen mit verbesserter Usability und einem echten Geschwindigkeitsvorteil zu ebnen.

Was Ajax kann

Die Idee, Daten per Javascript vom Server zu holen, ist so einfach wie einleuchtend und wurde auch schon früher von einigen Browsern umgesetzt. Es fehlte jedoch an Dokumentationen und Nachfrage. Erst mit dem Artikel von Jesse James Garrett "A New Approach to Web Applications" im Februar 2005 gab es einen Begriff für diese Möglichkeit der Server-Requests und eine Anleitung zur strukturierten Benutzung: Ajax war geboren.

Ajax bedeutet Asynchronous Javascript and XML und ist das Zusammenspiel mehrerer Techniken, die eine Möglichkeit bieten, Web-Anwendungen mit interaktiver Funktionalität und intuitiver Reaktion herzustellen. Dabei handelt sich um

• XHTML und CSS zur Herstellung standardisierter Frontends,

• Document Object Model (DOM) zur dynamischen Veränderung der Anzeigeobjekte,

• XML und XSLT als Datenaustauschformat,

• XMLHttpRequest zur Realisierung des asynchronen Datenaustauschs und

• Javascript um alles zu verbinden.

Dies sind native Browser-Techniken, die jedem Internet-Nutzer zur Verfügung stehen. Die eigentliche Neuheit ist der Einsatz des XMLHttpRequests - der Funktion, die den Datenaustausch zwischen Web-Client und -Server ermöglicht. Das bedeutet, Inhalte können bei bestehender HTML-Seite nachgeladen und angezeigt werden, und zwar ohne das im Web typische Szenario des Request-Response-Prozessflusses (Formular abschicken, Server-seitige Verarbeitung, Ausliefern und Rendern der neuen Seite).

Microsoft gilt als Vorreiter bei der Umsetzung erster Ansätze des Remote-Scripting. Hier wird jedoch noch mit ASP und ActiveX gearbeitet. Im Firefox-Browser gibt es XMLHttpRequests seit früher Version, das Feature blieb jedoch lange unbekannt. Erst durch Live-Beispiele wie Google Maps und die Schaffung eines eingängigen Begriffs durch Garret kam der Stein ins Rollen, und die anderen Browser (Netscape, Opera etc.) zogen nach. Heute verwenden nahezu alle gängigen Browser in den aktuellen Versionen diese Funktion - seitdem schießen Ajax-Anwendungen wie Pilze aus dem Boden.

Keine weiteren Plug-ins

Die Vorteile von Ajax liegen auf der Hand: verbesserte Usability durch schnelle Nutzerprozesse und Desktop-artige Interaktionsabläufe. Die größte Verbesserung liegt im Verzicht auf zusätzliche Plug-ins und proprietäre Techniken.

Auch Server-seitig wird weder Zusatzwissen noch Spezialtechnik benötigt. Dynamische Schnittstellen werden über CGIs, Servlets, Web-Services oder mit PHP abgebildet. Mit Ajax kann auch direkt auf statische Dokumente wie HTML- oder XML-Dateien zugegriffen werden. Voraussetzung ist lediglich die Einhaltung der Same-Origin-Policy. Diese Richtlinie legt fest, dass ein Ajax-Client nur auf Schnittstellen derselben Domain zugreifen kann, von der er selber geladen wurde. So ist sichergestellt, dass das lokale System des Nutzers von Spionage und Angriffen unberührt bleibt.

Damit stehen Softwareplaner und -entwickler wieder einmal vor einem neuen Ansatz, der Großes verspricht. Es gibt viele interessante Ideen, und man kann davon ausgehen, dass Ajax in den nächsten Jahren zur Selbstverständlichkeit in den Frontends der Web-Anwendungen wird.

Wie aber gehen wir heute damit um? Junge Ideen müssen sich etablieren und am besten standardisiert werden, bevor sie in Lösungen für Produktivsysteme umgesetzt werden. Zum jetzigen Zeitpunkt gibt noch keine 100-prozentige Erreichbarkeit der Internet-Nutzer. Wo also hat Ajax jetzt Sinn und in welchen Bereichen sollte man noch vorsichtig damit umgehen?

Der Einsatz von Ajax ist derzeit noch verschiedenen Einschränkungen unterworfen. So erfordert die Nutzung des XMLHttp Request-Objekts einen neueren Browser (IE ab 5.5, Firefox ab 1.0, Opera ab 8.0) mit aktiviertem Javascript und im Fall des Internet Explorers auch aktivierter ActiveX-Ausführung. Darüber hinaus lassen sich Ajax-Anwendungen noch nicht wirklich barrierefrei umsetzen. Die Erreichbarkeit aller Nutzer ist begrenzt.

Definierter Benutzerkreis

Internet-Seiten sollten Ajax als Zusatz-Feature anbieten, um das Anwendererlebnis zumindest für einen kleineren Nutzerkreis zu verbessern. Es muss jedoch immer sichergestellt sein, dass die Web-Seite auch ohne die Ajax-Features funktioniert. Unter diesem Gesichtspunkt haben kleine Hilfsmittel Sinn, etwa das Autovervollständigen von Suchbegriffen. Wenn die Eingabehilfe mal nicht anspringt, muss der Nutzer zwar den gesamten Suchbegriff eintippen, kann aber die Suche normal ausführen.

Der Einsatz von 100-prozentigen Ajax-Funktionen bietet sich in spezialisierten Anwendungen an, die auf einen definierten Benutzerkreis zugeschnitten sind. Hier hat man die Möglichkeit, eine bestimmte Ausstattung der Endanwender vorauszusetzen, und kann dadurch voll auf Ajax-Technik bauen.

Prädestinierte Ajax-Anwendungen

Der Spaß von Google Maps resultiert aus der intuitiven, zielorientierten Handhabung und aus den schnellen Reaktionszeiten. Wenn Anwender das Gefühl haben, ein neues System ohne Einarbeitung nutzen zu können, das flüssig und schnell reagiert und sie unmittelbar zum Ziel führt, dann wird die Anwendung in der Regel auch akzeptiert. Ajax bietet Ansätze, um schnelle und intuitive Anwendungen zu erstellen. Besonders für eingeschränkte Nutzergruppen lassen sich in dieser Hinsicht große Verbesserungen erreichen. Prädestinierte Bereiche sind deshalb Intranets, B-to-B-Lösungen oder auch Back-Office-Anwendungen.

Beispiel interaktive Tabellen

Der Vorteil der dynamischen Server-Kommunikation, ohne für jede Antwort eine neue Web-Seite rendern zu müssen, wird besonders bei der Darstellung, Suche und Verarbeitung großer Datenmengen deutlich. Hoch interaktive Tabellen mit Funktionen wie dem dynamischen Erweitern oder Verschieben von Tabellenspalten, einer Sortierung der Daten oder der Veränderung von Werten direkt in einer Tabellenzelle bedeuten einen Zugriff auf die Datenhaltung, der sich mit Ajax umsetzen lässt.

Fügt der Nutzer in seiner Tabellendarstellung eine Spalte hinzu, werden die erforderlichen Daten vom Server abgerufen und unmittelbar angezeigt. Verändert er die Reihenfolge der Spalten (per Drag and Drop), werden die Daten Server-seitig neu sortiert und zum Client ausgeliefert. Gleichzeitig wird die neue Einstellung für den Nutzer persistent vermerkt, so dass er beim nächsten Aufruf die gleiche Ansicht erhält. All dies geschieht in einer einzelnen HTML-Seite ohne Seiten-Reloads oder mühsame Eingabeformulare in Echtzeit.

Portal mit Echtzeit-Suchfilter

Ein Beispiel für eine Ajax-Anwendung hat SinnerSchrader Neue Informatik aktuell für das B-to-B-Download-Portal eines namhaften Musikverlags umgesetzt. Dort sollte ein Echtzeit-Suchfilter zum Auffinden von Klingeltönen eingeführt werden. Der Filter besteht aus einem Suchfeld sowie mehreren Checkboxen und Selektoren, deren Auswahl die sofortige Anpassung der Trefferliste zur Folge hat. Dadurch kann der Kunde spielerisch verschiedene Optionen durchtesten und schnell den gewünschten Content finden. Sucht er beispielsweise über das Textfeld nach Alicia Keys, so kann er durch Anhaken der Checkboxen unmittelbar sehen, welche Lieder von Alicia Keys bereits im Realton-Format angeboten werden und mit welchen Urheber- und Vermarktungsrechten sie verknüpft sind. Zusätzlich hilft eine Autovervollständigung bei der Eingabe des Suchbegriffs durch das Vorschlagen möglicher Titel und Interpreten.

Mit herkömmlichen HTML-Mitteln wäre diese Anwendung mühsam und langsam. Für jede Suchanfrage müsste der Nutzer ein Formular ausfüllen, es abschicken und auf die Ergebnisseite warten. In diesem Anwendungsfall ist der Vorteil der neuen Technik offensichtlich.

Deshalb ist es absehbar, dass sich diese Art von interaktiven Web-Anwendungen weiter verbreitet und in Zukunft an Popularität gewinnen wird - auch im Hinblick auf die vielen frei verfügbaren Beispiele und Libraries, die eine immer größere Zahl von professionellen und privaten Entwicklern zum Ausprobieren reizen.

Risiken

Dabei birgt die Arbeit mit Ajax, wie mit jeder neuen Technik, auch Risiken. Die neue Form des Scriptings muss intensiv getestet werden. Aufgrund der Browser-Differenzen kann es neben den typischen Skriptfehlern auch zu unterschiedlichem Verhalten der Anwendung kommen. Ein solcher Mangel ist zwar nicht so offensichtlich wie ein "normaler Javascript-Bug", kann aber durchaus zur Verwirrung des Nutzers und somit zu Unbehagen führen.

Es gibt Ansätze und Workarounds, um Nachteile wie zum Beispiel das ActiveX-Problem zu umgehen. Der Entwicklungsaufwand hierbei sollte jedoch nicht unterschätzt werden. Browser-Inkompatibilitäten und eine komplexe Syntax in den Ajax-Libraries erfordern ein großes Know-how beim Entwickler. In manchen Fällen ist es deshalb eventuell sinnvoller, eine neue Funktion wegzulassen, wenn der Entwicklungsaufwand den tatsächlichen Nutzungsvorteil weit übersteigt. Bei der Konzeption ist man gut beraten, einen Fachmann zurate zu ziehen.

Außerdem sollten kritische Funktionen in Internet-Anwendungen nicht ausschließlich mit Ajax umgesetzt werden. Beispielsweise produziert eine Eingabevalidierung zum Teil doppelten Aufwand. Via Ajax bietet sie einen verbesserten Komfort für den Anwender, ist aber nicht sicher, weil sie auf Browser-Technik basiert, die der Nutzer eventuell gar nicht hat oder die deaktiviert ist. Deshalb muss die Validierung nochmals Server-seitig implementiert werden.

Entwicklungsprozess

Ajax ist bisher vor allem in Verbindung mit Web-2.0-Websites intensiv eingesetzt worden. Vorreiter beim Einsatz dieser Technik sind (häufig sehr kleine) innovative Internet-Unternehmen und Startups. Die Entwicklung der entsprechenden Anwendungen ist durch Geschwindigkeit und Pragmatismus in einem kleinen Team von Spezialisten geprägt, die sich schnell und informell austauschen können. Häufig sind es sogar dieselben Personen, die die fachlichen Anforderungen definieren und diese auch umsetzen. In der Literatur werden solche Entwicklungsprozesse als "agile Programmierung" bezeichnet: Iterative Entwicklungsmethoden werden verwendet, um schnell prototypische Ergebnisse zu schaffen und diese kontinuierlich zu verbessern. Es ist auffällig, dass viele Web-2.0-Anwendungen das Betastadium bewusst nicht verlassen.

Grobkonzept erforderlich

So wirkungsvoll diese Arbeitsmethoden für den oben beschriebenen Einsatz auch sein mögen, für die Entwicklung von unternehmensinternen Anwendungen oder Internet-Präsenzen großer Unternehmen sind sie nicht ohne weiteres geeignet. Hier gilt es neben der Einführung neuer Funktionen auch Sicherheit in Bezug auf die Erfüllung fachlicher Anforderungen sowie auf die Einhaltung von Kostenrahmen und Zeitplänen zu gewährleisten. Nicht selten müssen Funktionen und Technik auch mit verschiedenen Stakeholdern abgestimmt werden. An der Erstellung eines - zumindest groben - Konzepts führt daher kein Weg vorbei, auch wenn das klassische Wasserfallmodell mit Grobkonzept, Feinspezifikation und Implementierung sicher nicht optimal zur Entwicklung von Ajax-Anwendungen geeignet ist.

Wie kann nun Ajax unter Nutzung eines konventionellen Entwicklungsprozesses, wie er in den meisten Projekten im professionellen Umfeld vorgegeben ist, eingesetzt werden? Bei Ajax handelt es sich um eine Technik, bei der die technischen und fachlichen Aspekte eng und beinahe untrennbar miteinander verbunden werden. Bei der Konzeption wird daher weder ein allein fachlich getriebener Berater noch ein reiner Techniker zu den gewünschten Ergebnissen kommen. Stattdessen ist eine neue Rolle gefordert: der User-Interface-Designer. Dabei handelt es sich um eine Person, die die fachlichen Aspekte der Nutzerführung ebenso versteht wie die Aspekte der technischen Umsetzung.

Der User-Interface-Designer

Idealerweise ist diese Person auch in der Lage, einfache Anwendungen selbst zu entwickeln und somit während der Konzeption kleinere Prototypen zu erstellen. Solche Prototypen haben sich als extrem wichtig und hilfreich erwiesen. Sie schaffen nicht nur Sicherheit in Bezug auf die Erfüllung der fachlichen Anforderungen, sondern gestatten auch erste Tests bezüglich des Verhaltens der Anwendung unter verschiedenen Bedingungen, zum Beispiel bei verschiedenen Bandbreiten oder Bildschirmauflösungen. Diese Prototypen lassen sich dann entweder direkt als Teil der Anforderungsdefinition verwenden (fachlich und technisch), oder die Eigenschaften des Prototyps werden noch einmal, wie gewohnt, schriftlich dokumentiert. Dabei folgt hier die formale Dokumentation dem getesteten und funktionierenden Konzept und nicht umgekehrt - eine Erfahrung aus dem fulminanten Erfolg der Web-2.0-Projekte.

Enge Zusammenarbeit

Die Umsetzung der Software erfordert ebenfalls eine spezielle Rolle. Natürlich können Ajax-Anwendungen in der klassischen Aufgabenverteilung entstehen: der Software-Engineer für die Server-Schnittstellen und der Frontend-Engineer für die Client-Entwicklung. Es wird jedoch schnell deutlich, dass gerade bei dieser Form dynamischer Frontends die Zusammenarbeit von Client und Server besonders eng ist und eine ständige Überarbeitung erfordert. Idealerweise entwickelt eine einzige Person beide Schnittstellen und muss demnach Wissen über die Server-Technik (Java, PHP, .NET) haben wie auch Client-seitig umfangreiches Know-how über HTML, CSS, DOM und vor allem Javascript besitzen.

Bei SinnerSchrader wurde für diese Anforderungen eine neue Rolle geschaffen: den Frontend-Spezialisten. Er hat fundiertes Wissen über die klassische Softwareentwicklung (Informatikstudium), um neben der reinen Umsetzung der Server-Schnittstellen auch die Einhaltung wichtiger Programmierrichtlinien wie das MVC-Pattern und die Trennung der Verantwortlichkeiten zu überwachen. Er ist dafür verantwortlich, dass aus dem Rich Client kein Fat Client wird. Zusätzlich kennt er sich besonders gut aus mit den Tücken der Script-Programmierung, hat Know-how über Tricks und Workarounds für Browser-Spezifika und informiert sich ständig über Weiterentwicklungen, die gerade in dieser frühen Etablierungsphase wichtig sind. (ue)