Wie funktioniert AJAX?

Die typischen Bestandteile einer AJAX-Anwendung

Der Ausgangspunkt ist auch bei AJAX-basierten Webauftritten eine HTML-Seite, die der Anwender im Browser angezeigt bekommt. Von ihr aus wird auf eine Javascript-Seite verlinkt, die aufgerufen wird, wenn ein Event-Handler oder ein anderes Javascript-Element in der HTML-Seite aktiviert wird. Ein einfaches Beispiel hierfür wäre ein onMouseOver-Effekt: Wenn man mit dem Mauszeiger beispielsweise über ein Bild fährt, dann wird eine Aktion ausgelöst. So weit unterscheidet sich die Einbindung von normalem Javascript nicht von AJAX.

Die konkrete Aktion, die passieren soll, wird in der aus der HTML-Datei referenzierten Javascript-Datei beschrieben. Dabei handelt es sich um eine Datei, die Javascript-Code enthält. Allerdings nicht nur um konventionellen Javascript-Code, sondern um ein Javascript, das um bestimmte Elemente und Befehle wie XMLHttpRequest erweitert wurde, mit denen ein XMLHttpRequest-Objekt erzeugt wird. Bei AJAX-Anwendungen, die über so ein Request-Objekt Daten vom Server anfordern, schickt der Browser die Antwort durch seine AJAX-Engine (anstatt sie sofort zu verarbeiten). Über dieses XMLHttpRequest-Objekt erfolgt dann die Kommunikation mit dem Server.

Die genaue Art und Weise, wie das XMLHttpRequest-Objekt erzeugt wird, unterscheidet sich von Browser zu Browser. Genauer gesagt: Es gibt Unterschiede zwischen den älteren Versionen des Internet Explorers vor Version 7 und Firefox, Opera, Safari, Chrome und Konsorten. Das muss der Programmierer einer AJAX-Anwendung berücksichtigen indem er eine Browserweiche in seine Anwendung einbaut und für jede wichtige Browserfamilie eine eigene Variante erstellt. So ärgerlich das auch ist, so ist das Alltag für Entwickler, die Webseiten erstellen. Denn auch bei HTML und CSS müssen die Eigenarten der jeweiligen Browser berücksichtigt werden, insbesondere der Internet Explorer bis Version 7 weicht gerne von den Standards ab – beim neuen Internet Explorer 8 hat Microsoft diesbezüglich deutliche Verbesserungen vorgenommen.

Der Anwender sollte bei einer sauber programmierten AJAX-Anwendung dagegen keinen Unterschied bemerken, wenn er eine AJAX-Seite einmal mit Firefox und einmal mit dem Internet Explorer ansurft. Eines ist allerdings zwingend Voraussetzung: Der Anwender muss im Browser Javascript zulassen. Sonst funktioniert AJAX nicht. Webseitenentwickler können darauf reagieren, indem sie eine Alternativseite für Anwender erstellen, die mit deaktivierten Javascript unterwegs sind. Bei großen AJAX-Projekten wie Google Maps macht das allerdings keinen Sinn.

Serverseitig hat sich eine wesentliche Sache zwischen einer traditionellen Website und einer Website mit AJAX allerdings nicht geändert: Für die Weiterverarbeitung der Daten ist eine serverseitige Programmierlogik und in der Regel eine Datenbank erforderlich. Eine typische Kombination, wie man sie bei vielen Website findet, würde also so aussehen: HTML/CSS und Javascript/AJAX kommen im Browser des Anwenders zur Ausführung, die Weiterverarbeitung der Daten auf der Server erfolgt via PHP und MySQL. Selbstverständlich sind aber auch Java-Lösung möglich und ebenso gibt es Server-seitige Lösungen mit Microsoft-Produkten. Damit Entwicklern das Erstellen von AJAX-Anwendung leichter fällt und vor allem schneller von der Hand geht – Zeit ist schließlich Geld – gibt es so genannte Frameworks und Toolkits, die eine Reihe fertiger Funktionen bereit stellen, die die Programmierer direkt in ihre Seiten einbauen können. Diese Frameworks (Google Web Toolkit, ASP.net AJAX um nur zwei Beispiele zu nennen) übernehmen dann unter anderem auch automatisch die Erstellung der Browserweichen und sorgen dafür, dass jeder gängige Browser die AJAX-Anwendung richtig darstellt. Auch bei der Lösung der fehlenden Zurück-Funktion im Browser (siehe vorherige Seite) helfen die Frameworks.

Für bestimmte bekannte Online-Projekte gibt es zudem offene Schnittstellen, mit denen jeder Programmierer eigene ProjekteProjekte umsetzen kann. Ein bekanntes Beispiel hierfür ist die API für Google Maps, mit deren Hilfe Sie eigene interaktive Google Maps-Karten in den Ihren Webauftritt einbauen können. Die dabei genutzte Technologie ist wieder AJAX. Alles zu Projekte auf CIO.de