Ajax ist meistens dann im Spiel, wenn eine Website sich plötzlich so verhält, wie man es von leistungsstarken Desktop-Anwendungen gewohnt ist.
Beispiel 1: Google-Service Google Suggest
http://www.google.com/webhp?complete=1&hl=en
Tippen Sie in das Suchfeld langsam etwas ein, etwa Ihren Vornamen. Nach jedem eingegebenen Zeichen erscheint eine Dropdown-Liste mit Vorschlägen für mögliche Suchausdrücke. Nach dem ersten Zeichen wird die Auswahl in der Regel noch sehr sinnlos sein, doch zwischen dem vierten bis zehnten Zeichen lässt sich der gewünschte Suchausdruk in aller Regel so weit eingrenzen, dass etwas Gewünschtes in der Liste dabei ist. Interessant bei der Vorschau ist vor allem die Angabe der Suchtrefferanzahl. So lässt sich bereits im Vorfeld einschätzen, ob eine Suche nach dem entsprechenden Ausdruck sinnvoll ist.
In diesem Fall ist jeder Tastendruck, den Sie eingeben, während sich der Cursor im Suchfeld befindet, ein auslösendes Ereignis. Sparen Sie sich jedoch die Mühe, im Quelltext der Suchseite von Google Suggest etwas Verständliches zu finden. Das SELFHTML-Beispiel zum Event-Handler onkeydown verrät Ihnen das Prinzip, wie eine Ereignisbehandlung dieser Art in JavaScript mit einfachen Mitteln zu bewerkstelligen ist.
Der Unterschied besteht darin, dass das JavaScript, das bei Google Suggest auf Tastendruck hin gestartet wird, im Hintergrund eine HTTP-Anforderung an den heimischen Server sendet. Dort erzeugt ein serverseitiges Programm aus dem Datenbankbestand von Google die Daten der kleinen Dropdown-Liste und sendet sie an das aufrufende JavaScript. Aus den erhaltenen Daten wird dann über DOM-Methoden die Dropdown-Liste in den HTML-Code der angezeigten Google-Suggest-Webseite eingefügt.
Übrigens arbeiten fast alle neueren Google-Services intensiv mit Ajax. Das Bewegen etwa im bekannten Service Google Maps basiert ebenso auf Ajax-Kommunikation wie das automatische serverseitige Zwischenspeichern beim Verfassen von E-Mails in Google Mail.
Beispiel 2: TurboDBAdmin
Dieses Beispiel werden Sie am ehesten nachvollziehen können, wenn Sie schon einmal mit einer grafischen Verwaltungsoberfläche für Datenbank-Management-Systeme gearbeitet haben. TurboDBAdmin ist eine web-basierte Verwaltungsoberfläche für MySQL. Eine Live-Demo des Freeware-Produkts ist auf dem Server des Anbieters aufrufbar:
http://www.turboajax.com/turbodbadmin_demo/
Links in der explorer-artigen Auswahl wird als oberster Eintrag der Host angezeigt, dessen Datenbanken verwaltbar sind. In der nächsten Ordnungsebene folgen die verwaltbaren Datenbanken. Im Demo ist dies lediglich eine einzige Datenbank. In der dritten Ordnungsebene werden die Tabellen der Datenbank angezeigt. Klicken Sie auf eine der Tabellen, z.B. PC-Res. Im Hauptbereich der Anwendung werden nun die Inhalte der Tabelle angezeigt. Die angezeigten Daten sind reichlich sinnlos, da es nur eine Testdatenbank ist, in der jeder — auch Sie — Datensätze einfügen, ändern oder löschen kann.
Wenn Sie beispielsweise auf eine der Spaltenüberschriften klicken, ändert sich die Sortierung der Tabelle so, dass nach der angeklickten Spalte sortiert wird. Dabei kommt Ajax zum Einsatz. Beim Anklicken (Event-Handler onclick) der Spaltenüberschrift wird ein JavaScript gestartet, das über HTTP ein serverseitig ausgeführtes Script aufruft. Dieses Script fragt mit einem SQL-Statement die Datenbank so ab, dass die neue Sortierung zustande kommt. Die erhaltenen Daten werden über HTTP an das aufrufende JavaScript übergeben. Das JavaScript sort für die Änderungen im HTML-Code der angezeigten Seite.
Mit der Menüschaltfläche Create Row können Sie der aktuell angezeigten Tabelle einen neuen Datensatz hinzufügen. Schreiben Sie einfach in die Tabellenzellen. Über die Menüschaltfläche Apply Edit können Sie die Eingaben speichern. Auch dabei wird wieder ein JavaScript aufgerufen, das via Ajax-Schnittstelle bzw. HTTP ein serverseitiges Script aufruft, das die Daten übergeben bekommt und in die Datenbank schreibt.
Dies ist nicht der Ort, um die einzelnen Möglichkeiten und Funktionen von TurboDBAdmin zu beschreiben. Wenn Sie selbst einen Webserver verwalten (beispielsweise auch einen lokal installierten Webserver) und PHP und MySQL in dessen Umgebung integriert haben, können Sie TurboDBAdmin downloaden und einfach in der eigenen Umgebung ausprobieren. TurboDBAdmin wird hier deshalb erwähnt, weil es eine typische ajax-basierte Webanwendung ist, von deren Sorte zur Zeit mehr und mehr entstehen.
Beispiel 3: web-basierter Chat von Fritz Weisshart
Ein idealtypisches Beispiel für den Einsatz für Ajax ist ein Chat. Denn ein Chat benötigt eine einen Server, damit die Chat-Teilnehmer interaktiv Text eintippen und die beigetragenen Inhalte anderer anwesender Teilnehmer sehen können. Das IRC-Protokoll, das für Internet-Chats gedacht ist, ist für Chat-Verbindungen optimiert. Dennoch haben viele Webanbieter auch den Wunsch, einen web-basierten Chat auf ihren Seiten anzubieten. Eine mögliche Lösung dafür stellt der Ajax-basierte Chat von Fritz Weisshart dar:
http://webdesign.weisshart.de/chat/
Der Link führt direkt zu einer Live-Demo des Chats. Zum Testbesuch können Sie sich mit den Daten Gast und demo anmelden.
Die Anwendungsoberfläche, die dann erscheint, ist dem Fensterinhalt eines Chat-Clients nachempfunden. Im Hauptbereich stehen zuletzt gepostete Beiträge. Rechts werden anwesende Benutzer angezeigt, und der Wechsel zu weiteren Chat-Räumen ist möglich. In dem Eingabefeld unterhalb des Hauptbreichs können Sie selbst Text eintippen und sofort beitragen.
Damit der Eindruck einer Live-Teilnahme entsteht, muss in regelmäßigen, relativ kurzen Intervallen eine Kommunikation zwischen JavaScript und Server stattfinden. Im Weisshart-Chat ist sie per Default auf 1 Sekunde eingestellt, wobei die Intervalle jedoch dynamisch seltener werden, je inaktiver der Chat ist (dies verrät ein Blick in den Quelltext des Chat-JavaScripts). Solche Konzepte sind auch nötig, um den Webserver nicht zu überlasten. Über die JavaScript-Methoden setTimeout() und setInterval() ist es möglich, JavaScript-Code intervall-gesteuert automatisch auszuführen. Der so ausgeführte Code kann selbstverständlich auch eine HTTP-Kommunikation über die Ajax-Schnittstelle starten. Auf genau diesem Prinzip basiert der Chat. Serverseitig verwaltet ein PHP-Script die aktuellen Logins und die aktuell verfügbaren Beiträge. Neue Beiträge oder Änderungen bei den anwesenden Benutzern werden an das aufrufende JavaScript übergeben. Dessen Aufgabe besteht dann darin, hinzugefügte Beiträge einzufügen und gegebenenfalls die Liste der Benutzer zu aktualisieren.
In Verbindung mit einer Server-Push-Technologie wäre es sogar möglich, einen Ajax-Web-Chat nicht in Form von intervall-gesteuerten Ajax-Aufrufen zu gestalten, sondern ereignisabhängig. Dann würde das verarbeitende Chat-Script auf dem Server nur aufgerufen, wenn ein Teilnehmer etwas beiträgt oder z.B. ein neuer Teilnehmer den Raum betritt. Das Script könnte den Server dann veranlassen, den neuen Chat-Zustand an alle übrigen Teilnehmer zu senden, ohne von ihnen einen HTTP-Request erhalten zu haben (Server-Push). Da heutige Webserver jedoch aus teils guten Gründen keine Server-Pushs unterstützen, bleibt die intervall-gesteuerte Ajax-Kommunikation in einem Chat wie dem von Fritz Weisshart die einzige Wahl.