1.3 Wo kann ich Ajax in Aktion sehen?

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

google-suggest.jpg

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: 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/

weisshart-chat.jpg

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 (view-source:http://webdesign.weisshart.de/chat/chat_js.php). 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.

Seiten Revision: 5, zuletzt bearbeitet: 03 Jun 2009 18:53