Open Source im professionellen Einsatz
Linux-Magazin 12/2005

Mehr Dynamik für Webseiten dank Ajax

Browser-Turbo

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.

694

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.

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Rettungsanker

    Die größte Stärke der Ajax-Technologie ist, dass sie das Aktualisieren einer Seite ohne störendes Neuladen erlaubt. Als Kehrseite folgt daraus allerdings, dass sich der Zurück-Button des Browsers und die Bookmark-Funktion nicht mehr wie gewohnt nutzen lassen.

  • PDF statt Flash

    PDFs, die Benutzereingaben überprüfen oder mit der Anzeige neuer Felder oder Dialoge darauf reagieren, sind im Vergleich zu Ajax oder Flash beinahe exotisch. Dabei steht mit Scribus ein gutes Authoring-Werkzeug zum Erstellen geskripteter PDFs bereit.

  • Von Java zu Ajax

    Das Google Web Toolkit ermöglicht die Entwicklung aufwändiger Webanwendungen in Java und generiert daraus automatisch Ajax-Applikationen. Im Hosted-Modus wird die Suche nach Fehlern zum Kinderspiel.

  • Daten am Mann

    Die Datenbank läuft auf dem Server - dieses bisher gültige Dogma durchbricht die Javascript-Datenbank-Engine Public SQL. Für die rein Client-seitige Webseitenprogrammierung eröffnen sich damit interessante Möglichkeiten: Daten lassen sich ohne Nachladen visualisieren.

  • Gut sortiert

    Große Datenmengen auf Webseiten übersichtlich anzuordnen ist eine Kunst. Am schnellsten gelänge es mit Javascript direkt im Client - wäre da nicht das spröde Document Object Model. Die Bibliothek Jquery erleichtert Entwicklern das Leben, indem sie die Skriptsprache aufpeppt und von Browsern abstrahiert.

comments powered by Disqus

Ausgabe 07/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.