Die Ajax-Technologie reichert dröge Webapplikationen mit dynamischen Elementen an. Das gelingt bereits so gut, dass Benutzer sie auf dem Desktop kaum noch von anderen Programmen unterscheiden. Ein kleines Perl-Skript demonstriert die Technik.

Spätestens die Google-Maps-Seite wirkte wie ein Paukenschlag auf alle Webentwickler: Auf einmal war es möglich, den dargestellten Ausschnitt einer Landkarte dynamisch zu verschieben, ganz so, als liefe da im Browser keine Webapplikation, sondern ein lokales GUI. Plötzlich war kein lästiger Client-Server-Roundtrip inklusive Nachladen der gerade dargestellten Seite mehr notwendig, um Zustandsänderungen einer Applikation anzuzeigen.

Nun schießen die Ajax-Applikationen im Web wie Pilze aus dem Boden. Die Beta-Release von Yahoo-Webmail beispielsweise sieht einer Desktop-Applikation schon verblüffend ähnlich, nur wer genau hinsieht, merkt, dass eigentlich der gute alte Webbrowser läuft.

Ajax (Asynchronous Javascript and XML) baut auf Dynamic HTML und Client-seitigem Javascript auf. Das ursprünglich von Microsoft erfundene und lange unter dem Radar geflogene Objekt »XMLHttpRequest« macht es möglich, dass ein von einer Webseite heruntergeladenes Javascript-Skript asynchron mit dem Webserver Daten austauscht. Die schmuggelt es dann dynamisch ins HTML der Seite ein, sodass dort nur kleine Änderungen erfolgen und der Browser die Seite nicht komplett neu aufbauen muss.

Schnipselwerk

Abbildung 1 zeigt eine Beispielapplikation, die oft genutzte Textschnipsel für E-Mails auf dem Webserver verwaltet und zum Cut&Paste in einem Textfeld anbietet. Mit »Add new topic« lässt sich ein neuer Textbaustein eingeben, »Update« spielt dem Server den passenden Text zu und »Remove« löscht den angewählten Eintrag vom Server.

Die Darstellung lädt sich nur ein einziges Mal in den Browser. Die unterstrichenen Links sehen zwar wie Hyperlinks aus und laden zum Klicken ein, holen aber kein neues Dokument in den Browser. Lediglich der jeweils im »OnClick«-Handler angegebene Javascript-Code wird ausgeführt.

Das Perl-Modul CGI::Ajax von Brent Pedersen macht es verhältnismäßig einfach, diesen Mechanismus zu implementieren. Es definiert ein Client-Server-Protokoll (in Javascript und Perl), mit dem der Javascript-Code des Clients auf dem Server Funktionen über deren Namen und Parameterlisten anspricht.

Ein Javascript-Objekt vom Typ »XMLHttpRequest« (»ActiveXObject("Microsoft.XMLHTTP")« im IE) sorgt dafür, dass der Browser dem CGI-Skript auf der Server-Seite einen GET-Request zuspielt. Dieser Request aktiviert eine vorher ausgehandelte Perl-Funktion, die wiederum Werte zurückschickt. Die schnappt sich der Javascript-Code und frischt die Felder des Browser-GUI auf.

Faule Ausrede

Ein mit »CGI::Ajax->new(\'display\' => $amp;display);« im CGI-Skript definiertes Objekt vom Typ »CGI::Ajax« bewirkt, dass sich im später ausgesandten HTML eine Javascript-Sektion findet, die die Funktion »display()« definiert. Auf dem Server ist ebenfalls eine Perl-Funktion »display()« definiert, die der Javascript-Handler später per HTTP-Request ansprechen wird.

Ein in HTML definierter Radiobutton mit dem On-Click-Handler »OnClick="display([\'Faule Ausrede\'],[\'tarea\', \'statusdiv\'])"« ruft die Javascript-Funktion »display()« auf und übergibt ihr die zwei angegebenen Arrays. Das erste enthält das »id«-Attribut des HTML-Elements Schnipselüberschrift, dessen Text die Serverfunktion übergeben bekommt. Das zweite Array speichert die »id«-Attribute der HTML-Tags, die der Handler nach Abschluss des Requests mit den Rückgabewerten der Serverfunktion auffrischen wird.

Abbildung 1: So assistiert der Textschnipselverwalter im Browser dem Benutzer.

Abbildung 2: Dank der Kommunikation zwischen Browser, Javascript-Engine und Webserver wird die Webseite portionsweise dynamisch aktualisiert.

Im vorliegenden Fall führt der Radiobutton mit der »id« »Faule Ausrede« auch das Attribut »VALUE="Faule Ausrede"«, entsprechend erhält die Perl-Funktion »display()« auf dem Server (Zeile 11 in Listing 1) diesen Textstring als ersten Parameter überreicht. »display()« macht nichts weiter, als das zu »Faule Ausrede« passende Textschnipsel aus dem Cache zu holen und zusammen mit einer Statusmeldung zurück an den Browser zu senden. Dort springt der Javascript-Eventhandler wieder ein und frischt das große Textfeld (»id=\'tarea\'«) und das Statusfeld ganz unten (»id=\'statusdiv\'«) mit den von »display()« zurückgegebenen Strings auf. All dies wird sauber von »CGI::Ajax« abstrahiert, das den dazu notwendigen Javascript-Code zum Browser sendet und die Server-seitigen Handler zum Anspringen der Perl-Funktionen bereitstellt.

Allerdings macht »snip« Client-seitig mehr als nur Textfelder auffrischen. Falls der Benutzer eine der Überschriften mit einem Mausklick auf »Remove« löscht, verschwindet nicht nur der Radiobutton mit der Überschrift, sondern das Skript selektiert auch die erste Überschrift in der verbleibenden Liste und lädt deren Textschnipsel vom Server. Solche Aufgaben beherrscht CGI::Ajax noch nicht, aber mit zusätzlichen Javascript-Funktionen lässt sich das bewerkstelligen.

Die Ajax-Technologie reichert dröge Webapplikationen mit dynamischen Elementen an. Das gelingt bereits so gut, dass Benutzer sie auf dem Desktop kaum noch von anderen Programmen unterscheiden. Ein kleines Perl-Skript demonstriert die Technik.