Zunächst einmal zum Namen: Bildungsbürger denken bei Ajax an den Trojanischen Krieg und Homers Epen. Im Zeitalter des viel beschworenen Web 2.0 steht AJAX jedoch für "Asynchronous JavaScript and XML". Ajax ist somit eine Weiterentwicklung des klassischen Javascript und XML und keine grundlegend neue Technologie. AJAX bildet zudem die Basis für ein weiteres Schlagwort des Web 2.0, nämlich für Mashups, die technisch in der Regel auf der asynchronen Datenübertragung via AJAX basieren.
Unter einem Mashup versteht man zunächst einmal die Verknüpfung bereits bestehender Inhalte zu einem neuen Angebot, das es sinnvollerweise in dieser Form noch nicht geben sollte. Konkret auf das Internet und das Web 2.0 bezogen bedeutet Mashup, dass man bestehende Webangebote und deren Inhalte nimmt und daraus einen neuen Auftritt zusammenstellt. Bei diesen recycelten und neu zusammengefügten Inhalten kann es sich um alle denkbaren Darstellungs- und Inhalts-Formen handeln, ob Texte, Grafiken, Audio-Dateien oder Videos.
Damit Sie sich sofort ein konkretes Bild von typischen AJAX-basierten Webangeboten machen lassen, haben wir einige bekannte Beispiele in einem Video und in einer Bildergalerie zusammengestellt:
Das unterscheidet AJAX von der typischen Browser-Server-Kommunikation
Bei der klassischen Kommunikation zwischen Client-Rechner und Server lädt der Browser auf dem PC des Anwenders jeweils die gesamte Website neu, wenn Daten übertragen werden. Sie erkennen das Neuladen sofort: Die Seite baut sich neu auf. Anders bei AJAX: Hier kommunizieren Browser und Server fortwährend miteinander und zwar im Hintergrund. Das hat zur Folge, dass Sie den Datenaustausch zwischen Ihrem Rechner und dem Server keineswegs sofort erkennen können. Denn anders als beim klassischen Surfen wird nicht jedes Mal eine neue Website im Browser geladen beziehungsweise die vorhandene Seite erkennbar aktualisiert, sondern eben nur Daten nachgeladen und die Antwort des Servers wird mit Javascript/DHTML-Mitteln (Dynamic HTML) in die Website eingefügt. Damit das funktioniert, ist nur ein Javascript-fähiger Browser erforderlich, ein spezielles Plugin, wie zum Beispiel bei Adobe Flash oder Microsoft Silverlight, muss dagegen nicht installiert werden.
Tipp für Neugierige: Damit Sie vom ständigen Datenstrom doch etwas mitbekommen, benötigen Sie einen Netzwerksniffer. Neben separaten Tools wie Wireshark oder Linux-Befehlen wie tcpdump können Sie hierzu auch ein bequemes Add-on wie Live HTTP Headers in Firefox installieren.
Bei AJAX werden nur exakt die Daten nachgeladen, die tatsächlich für eine bestimmte Aufgabe benötigt werden. Beispielsweise neues Kartenmaterial bei Google Maps. Oder eine automatische Ergänzung für eine Tastatureingabe, die der Anwender in einem Webformular macht.
AJAX wirkt sich enorm auf die Aufgabenverteilung zwischen Client und Server aus. Einige Aufgaben, die bisher auf dem Server erledigt wurden, werden jetzt im Browser auf dem Rechner des Anwenders gemacht. Zwar war das bei Javascript in beschränktem Umfang auch jetzt schon möglich. So konnte man beispielsweise Benutzereingaben clientseitig auf Plausibilität prüfen (wodurch allerdings die zusätzliche serverseitige Validierung der Eingaben aus Sicherheitsgründen keineswegs überflüssig wurde). Doch unter AJAX hat die clientseitige Rechenarbeit ganz andere Ausmaße erreicht. Die Programmiersprache Javascript läuft hier richtig zur Hochform auf und wird nicht, wie so oft in der Vergangenheit, für nervtötende Animationen und Popups missbraucht.
Für den Anwender verschwimmen bei einer AJAX-Anwendung die Grenzen zur Desktop-Anwendung. Während man es sonst gewohnt ist, dass der Browser erst „reagiert“, wenn man die Website abschickt (zum Beispiel, wenn man ein Formular ausgefüllt und auf den Versenden-Button gedrückt hat), reagiert eine AJAX-Anwendung sozusagen in "Echtzeit". Bei Google Suggest beispielsweise gibt man Buchstaben ein und bekommt sofort Vorschläge angezeigt für die Begriffe, die man eigentlich sucht. Die typische Wartezeit entfällt, weil im Hintergrund ständig Daten ausgetauscht und nachgeladen werden.
Nicht nur Vorteile
Allerdings gibt es aus Anwendersicht auch einen Nachteil: Der Zurück-Button im Browser funktioniert bei AJAX-Seiten nicht wie erwartet. Da ja nicht jedes Mal eine neue Seite geladen wird, gibt es innerhalb der AJAX-basierten Kommunikation auch keine Möglichkeit, eine Seite zurück zu gehen. Hier muss der Anwender also umdenken. Allerdings gibt es von Programmiererseite her durchaus Möglichkeiten, eine Zurück-Funktion zu improvisieren. Ähnlich verhält es sich mit der Bookmark-/Lesezeichen-Funktion, die grundsätzlich bei AJAX auch nicht so funktioniert wie bei normalen HTML-Seiten. Abhilfe schaffen hier allerdings fertige Frameworks - dazu später mehr.
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 Projekte 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.
Sicherheitsaspekte
AJAX kann als auf Javascript basierende noch relativ neue Technologie durchaus neue, bisher unbekannte Sicherheitsrisiken enthalten. Unter anderem bewies das im Oktober 2005 eine Sicherheitslücke in dem mit AJAX realisierten MySpace.
Die faszinierenden Möglichkeiten, die AJAX bietet, führten im ersten Rausch dazu, dass Sicherheitsaspekte lange Zeit vernachlässigt wurden. Doch aufgrund der verteilten Struktur von AJAX-Systemen und dem fortlaufenden Datenaustausch zwischen Client und Server biete AJAX Angreifern durchaus Angriffsfläche. Beispielsweise lässt sich mit Cross-Site-Scripting-Techniken das Sicherheits-Konzept von Javascript (auf dem AJAX ja basiert) umgehen. Umso wichtiger ist es deshalb ganz besonders bei AJAX, dass die Eingaben der Benutzer genau validiert werden, um Manipulationsversuche rechtzeitig abzufangen. Allerdings sollte man die potenziellen Gefahren durch AJAX nicht dramatisieren, Entwickler sollten sich ihrer nur bewusst sein und angemessen darauf reagieren.
Quelle: PC-Welt