Die Web-Wunderwaffe

Was steckt wirklich hinter Ajax?

Statt dessen steht Ajax mittlerweile vor allem für einen Kunstbegriff, den Jesse James Garrett Anfang 2005 kreiert hat. Gemäß seinem Essay [1] steht das Akronym für „Asynchronous JavaScript + XML“. Nicht nur merkwürdig, dass das Plus-Zeichen (englisch „and“) einen eigenen Buchstaben im Kürzel erhält (das zweite A), sondern auch sonst wirkt der Begriff Ajax eher wie ein Marketinginstrument. Asynchron muss das ganze nämlich, auch wenn es sehr sinnvoll ist, gar nicht sein. Die Verwendung von XML ist ebenfalls keine Pflicht.

Dennoch: Seit dem es den Begriff gibt, kann man sich auch über die Technologie besser unterhalten. Technologischer Vorreiter ist die Firma Google, die mit Diensten wie Google Suggest, Google Mail oder Google Maps schon lange auf Ajax setzte, noch bevor es den Begriff gab. Doch worum geht es überhaupt? Normalerweise gibt es nur eine Möglichkeit, das Aussehen einer Webseite zu verändern: durch Neuladen. Mit ein wenig JavaScript und ein paar Tricks, wie beispielsweise versteckten Frames oder Inlineframes, ließ sich das umgehen, doch im Massenmarkt kamen diese Ansätze nicht an. Unter anderem deswegen, weil die Implementierung relativ mühsam war und das ganze eher als „Hack“ denn als seriöse Entwicklungstechnik galt.

Dann entwickelte Microsoft für den Eigengebrauch eine Möglichkeit, im Hintergrund eine HTTP-Abfrage an einen Server zu schicken und die Rückgabe auszuwerten. Per JavaScript ließ sich diese Rückgabe dann auf der aktuellen Seite anzeigen, ohne dass der gefürchtete „Page Refresh“ (das Neuladen) einsetzte. Andere Browserhersteller zogen nach und bauten diese Funktionalität ebenfalls in ihre Produkte ein. Google war eine der ersten Firmen, die dies aktiv nutzten. Viele weitere folgten, im deutschen Raum beispielsweise die dynamische Landkartensuche von GoYellow.

Mehr steckt hinter Ajax eigentlich auch nicht, wenngleich der momentane Hype das vermuten lässt. Der Rest besteht aus dem Heranziehen von altbekannten Techniken wie CSS und JavaScript. Vieles, was heutzutage als Ajax-Anwendung gilt, ist mehr oder minder simples JavaScript, häufig eben angereichert um die Möglichkeit, Daten im Hintergrund auszutauschen. Auch Flash-Anwendungen könnten als Ajax-Applikationen bezeichnet werden, denn auch hier gibt es keinen Page-Refresh.

Ein Objekt für alle(s)

Von dem optischen Brimborium aktueller Ajax-Anwendungen einmal abgesehen, liegt der Fokus aller Bemühungen schlicht auf dem Datenaustausch im Hintergrund: Wie werden Daten an den Server übertragen? Wie ist es möglich, Daten an den Client zurückzuschicken? Grundpfeiler von Ajax ist das XMLHttpRequest-Objekt, das den Datenaustausch mit einem Webserver ermöglicht, ohne die Seite neu zu laden und neu aufzubauen.

Wie bereits erwähnt, liegt der Technologie eine Erfindung von Microsoft zugrunde. Ende der 90er Jahre sollte eine neue Version von Outlook Web Access erscheinen, dem Browser-Frontend des Microsoft-Mailprogramms. Diese erforderte es, im Hintergrund Daten auszutauschen.

Die Ajax-basierte Landkartensuche von GoYellow hat mehr zu bieten als nur Straßen.

Die Ajax-basierte Landkartensuche von GoYellow hat mehr zu bieten als nur Straßen.

Die Erklärung: Stellen Sie sich Ihren Posteingang in einem Browserfenster vor. Wenn dieser einmal pro Minute abgefragt wird, baut sich die Seite jedesmal neu auf, auch wenn gar keine neuen E-Mails eingetroffen sind und sich an den angezeigten Daten nichts verändert hat. Um diesem Szenario entgegen zu wirken, wurde das Team des Internet Explorers kontaktiert und das XMLHttpRequest-Objekt ersonnen. Gemäß dem Microsoft-Geist dieser Zeit wurde es in den Internet Explorer 5.0 als ActiveX-Objekt integriert. Das hatte den Vorteil, dass nicht nur JavaScript, sondern auch VBScript auf das Objekt zugreifen konnten. Zu diesem Zeitpunkt war der Browserkrieg bekanntlich in vollem Gange und jeder der Hersteller setzte stark auf eigene, proprietäre Technologien.

Outlook Web Access funktionierte also, zumindest unter Windows, im Internet Explorer 5 tadellos. Es sollte aber noch einige Jahre dauern, bis auch andere Browserhersteller Gefallen an der Idee des Datenaustauschs im Hintergrund fanden. Irgendwann machte sich das Mozilla-Projekt an die Arbeit, ein natives XMLHttpRequest-Objekt in seinen Browser zu integrieren – der ActiveX-Ansatz war mit dem betriebssystemunabhängigen Ansatz von Mozilla nicht vereinbar. Seit Mozilla 1.4 war XMLHttpRequest mit an Bord; damit unterstützen auch alle darauf und auf Nachfolgerversionen basierenden Mozilla-Derivate inklusive dem populären Firefox-Browser diesen Grundpfeiler der Ajax-Technologie. Andere Browserhersteller wollten dem nicht nachstehen. Da Microsoft den Internet Explorer unter Mac mittlerweile eingestellt hat, ist Apples Webbrowser Safari sehr populär. Dieser ist keine komplette Eigenentwicklung, sondern basiert auf dem Konqueror-Browser, dem Standardbrowser unter KDE. Apple hat das XMLHttpRequest-Objekt in Safari ab Version 1.2 nachgerüstet und den Quellcode dafür wiederum dem Konqueror-Projekt (ab Version 3.2) zur Verfügung gestellt. Ergebnis: Auch Konqueror ist heute Ajax-fähig.

Google Suggest ist eine der bekanntesten Ajax-Anwendungen.

Google Suggest ist eine der bekanntesten Ajax-Anwendungen.

Der norwegische Browser Opera, mittlerweile komplett kosten- und werbebannerfrei, unterstützt seit Version 8 das XMLHttpRequest-Objekt, sogar in dessen Ableger für mobile Geräte. Selbst der recht exotische Mac-Browser iCab unterstützt seit Version 3 XMLHttpRequest.

Microsoft hat mittlerweile das allgemeine Potenzial seiner einst proprietären Entwicklung erkannt. Die brandneue Version 7 des Internet Explorers unterstützt das XMLHttpRequest-Objekt nativ – ActiveX ist also nicht mehr notwendig.

Nachteile

Obwohl mit Ajax unbestritten beeindruckende und nützliche Effekte möglich sind, gibt es dennoch berechtigte Kritik. Zum einen in Bezug auf Barrierefreiheit: Wenn ein Browser kein JavaScript unterstützt oder es deaktiviert ist (je nach Untersuchung ist das bei fünf bis zehn Prozent der Nutzer der Fall), sind all die schönen Ajax-Effekte nicht mehr sichtbar und die Seite eventuell nicht mehr nutzbar.

Außerdem wird ein Grundpfeiler des Webs durch Ajax außer Kraft gesetzt: Eine Seite ist nicht mehr eine Seite. Das äußert sich vor allem in zwei Dingen. Zum einen beim Setzen von Bookmarks. Wird der Inhalt einer Seite der Ajax-Funktionen dynamisch geändert, ändert sich dadurch nicht gleichzeitig die URL. Damit kann das Lesezeichen nicht korrekt gesetzt werden. Problem Nummer zwei: Die Verwendung der Vor- und Zurück-Knöpfe. Wenn Sie im Webbrowser auf diese Schaltflächen klicken, wird die zuletzt besuchte Seite geöffnet. Doch da bei dynamischer Änderung der Ajax keine neue URL abgelegt wird, gibt es auch keine Möglichkeit, zurück oder vor zu springen.

Die gute Nachricht: Die beiden angesprochenen Probleme lassen sich lösen. Die schlechte Nachricht: Das erfordert entweder erhöhten Code-Aufwand oder die Verwendung eines Frameworks, das sowohl Bookmarks unterstützt als auch die Navigationsschaltflächen aktiv hält. Als die ersten Ajax-Anwendungen entstanden sind, gab es relativ schnell einen „Hack“, um Bookmarks zu ermöglichen: Der aktuelle Seitenzustand wird dabei an die URL angehängt. Sehr populäre Methoden sind die Verwendung des Querystrings der URL (?abc123) oder der Textmarke in der URL (#abc123).

Da es bei Ajax-Anwendungen vor allem darum geht, dass die Seite nicht neu geladen wird, scheidet der Weg über den Querystring aus. Auch wenn bei einer statischen HTML-Seite die URLs „seite.html?123“ und „seite.html?456“ das selbe Ergebnis produzieren, sind es trotzdem unterschiedliche URLs. Bei der Verwendung einer serverseitigen Sprache hat der Querystring meist eine semantische Bedeutung.

Bleibt also die Textmarke, auch Hash-Wert genannt. Mit dieser wird auf Sprungziele innerhalb der Seite verwiesen.

Google Docs & Spreadsheets bietet Ajax-basierte Textverarbeitung und Tabellenkalkulation.

Google Docs & Spreadsheets bietet Ajax-basierte Textverarbeitung und Tabellenkalkulation.

Moderne Browser fordern dazu die Seite nicht neu an, sondern springen einfach zu der Marke, sofern diese existiert. Mit JavaScript lässt sich eine Sprungmarke in der URL bequem auslesen. Entweder wird „location.href“ untersucht und nach dem Doppelkreuz (#) durchforstet, oder auf „location.hash“ zugegriffen. Darin ist, sofern vorhanden, der Hash-Wert inklusive vorangestelltem Doppelkreuz enthalten.

Für das Problem mit den Navigationsschaltflächen ist ein noch größerer Aufwand notwendig. Die eben beschriebene Änderung der URL, die notwendig wurde um die Anwendung Bookmark-fähig zu machen, wird bei Mozilla-Browsern in der Verlaufsliste abgelegt. Mit etwas zusätzlichem JavaScript-Code funktionieren auch die Schaltflächen wieder. Der Internet Explorer bildet hier eine Ausnahme: Dort ist der Aufwand deutlich höher. So muss man beispielsweise mit einem unsichtbaren Inlineframe arbeiten, der für den Internet Explorer die Verlaufsliste füllt. Nur wenige Seiten leisten sich diesen Aufwand, oft zum (Usability-)Nachteil des Besuchers.

Fazit

Ajax ist nichts neues, sondern „lediglich“ ein Technologiemix plus einem mehr oder minder neuem JavaScript-Objekt. Die Möglichkeiten, die sich durch die Technologie ergeben, sind allerdings beeindruckend. Das Praxis-Tutorial im HOWTO-Heft zeigt, wie einfach sich eine erste Beispielanwendung umsetzen lässt.

Dieser Beitrag ist ein aktualisierter und angepasster Auszug aus dem Buch „Ajax“ von Christian Wenz, erschienen bei entwickler.press, 2006.
- Anzeige-

Dieser Artikel stammt aus:

 

Weitere Artikel dieser Ausgabe

10.000 Seiten in 15 Minuten

Dynamische Erstellung eines TYPO3-Seitenbaums aus externen Datenbanken

TYPO3 ist ein flexibles Framework für die Erstellung von Websites, die von einem oder mehreren... »

Aktuelles aus der Redaktion

Ergänzungen und Berichtigungen

„Linklisten im Überblick“... »

Association Activity Report

The summer of 2006 was filled with activities ramping up to the second international TYPO3 conference,... »

Blogging leicht gemacht

Installation, Einrichtung und Erweiterung der populären Blog-Software WordPress

Wenn von Web 2.0 die Rede ist, dann ist auch das Thema Blogging nicht weit. Immer mehr Weblogs... »

Business Intelligence mit Eclipse BIRT

Business Intelligence and Reporting Tools

Fast alle Anwendungen erstellen Berichte über die Daten, die sie verwalten. Sie generieren... »

E-Learning mit TYPO3

CAMPUS T3 ? ein TYPO3-basiertes Learning Management System

Die Menge an Informationen und Wissen, die heutzutage verwaltet werden muss, steigt stetig. Zudem... »

Eins, Zwei, 3.0

Zukunftsszenarien für das Internet nach dem 2.0-Hype

Die Zukunft lässt sich nicht vorhersagen. Sicher ist aber, dass während über... »

Enterprise Content Management mit Open Source

Praktische Ansätze für Alfresco

Die Dokumenten-Management-Lösung Alfresco schickt sich dank offener Architektur und leistungsfähiger... »

Erfolge messen

Teil 1: Mit TYPO3 auf Spurensuche

Der Launch oder Relaunch einer Internet-Präsenz auf TYPO3-Basis ist schnell geschafft, doch... »

Shop  |  T3N Ausgaben  |  Open Source & TYPO3 Marktplatz
Übersicht  |  News  |  hype! Open Source & Web 2.0  |  RSS Feeds