Schneller, höher, weiter

Wer interaktive Webseiten benutzt, braucht oft eine Menge Geduld. Hat man ein Formular mit einer Reihe von Eingabefeldern ausgefüllt und abgeschickt, heißt es erst einmal warten, bis der Server die Daten auswertet und als Antwort eine neue Seite ausliefert (Abbildung 1).

Abbildung 1: Das traditionelle Modell: Bei jeder Änderung lädt der Browser die komplette Seite neu.

Seit einiger Zeit umgehen Websites wie Google Mail dieses Problem, indem sie die so genannte AJAX-Technik anwenden, die unter Webentwicklern als letzter Schrei gilt. Statt mit jeder Anfrage eine Seite komplett neu anzufordern, fragt der Webbrowser nur kleine Fragmente an Information ab, die er anschließend in die bestehende Webseite integriert. Das Ergebnis für den Benutzer: Eine Website fühlt sich damit beinahe so schnell an wie eine Desktop-Anwendung.

Der Name AJAX geht zurück auf den Essay "AJAX: A New Approach to Web Applications" von Jesse James Garrett [1]. Obwohl es sich nach Garretts Worten dabei nicht um ein Akronym handelt, interpretiert man AJAX meist als Kürzel für Asynchronous Javascript und XML. AJAX-Webseiten bestehen nicht nur aus statischen HTML-Dateien (und CSS-Stylesheets), sondern auch aus Javascript-Code, der abläuft, wenn der Benutzer auf einen Link klickt oder ein anderes so genanntes Event auslöst. Die Javascript-Funktionen fragen vom Server neue Daten an, die dieser als XML (deshalb das X), aber auch als HTML und in anderen Formaten zurück liefert.

Asynchron

Weil die Anfrage asynchron abläuft (das A), kann der Benutzer mit anderen Teilen der HTML-Seite weiter interagieren, der Browser ist nicht blockiert. Eine asynchrone Anfrage entkoppelt Anfrage und Antwort: Hat der Javascript-Code im Browser seine Anfrage abgeschickt, läuft er einfach weiter. Erst, wenn die Antwort beim Browser eintrifft, ruft dieser eine vorher festgelegte Javascript-Funktion auf. Die wiederum trägt das Ergebnis in die bestehende HTML-Seite ein. Das kann ein einzelner Zahlenwert in einer HTML-Tabelle sein, strukturierte Daten in XML oder JSON (Javascript Object Notation), Formularwerte und so fort.

Abbildung 2: Das AJAX-Modell: Requests laden nur die veränderten Teile einer Seite neu.

Google Mail zum Beispiel kann so in den Arbeitsbereich in der Mitte des Browserfensters einen Editor zum Mail-Schreiben laden, eine Mail anzeigen oder die Nachrichten auflisten (Abbildung 2). Andere Beispiele für den nützlichen Einsatz von AJAX sind die Web-2.0-Anwendungen Flickr und Del.icio.us.

Schnellstart

Für den Anfang soll ein eine sehr einfache Webanwendung das Funktionsprinzip von AJAX veranschaulichen: Auf den Klick des Benutzers hin lädt der Browser eine Zufallszahl vom Server und zeigt sie an der dafür vorgesehenen Stelle in der Webseite an.

Die Anwendung besteht aus drei Komponenten: der statischen HTML-Startseite, dem Javascript-Code und einem Serverskript, welches das Ergebnis (die Zufallszahl) liefert. Was Sie dazu auf jeden Fall brauchen, ist ein Webserver (meist Apache), der eine Skriptsprache unterstützt, in unserem Beispiel PHP. Allerdings können Server und Browser zum Ausprobieren der AJAX-Technik auch auf dem gleichen Rechner laufen, selbst dem normalen Desktop-Computer.

Sind Ihnen Installation und Konfiguration von Apache und PHP mit den distributionseigenen Paketen und Tools zu kompliziert, können Sie es auch mit einem der beliebten LAMP oder XAMPP-Pakete versuchen. Sie enthalten nicht nur Apache und PHP, sondern auch die MySQL-Datenbank, die zwar nicht obligatorisch, aber für dynamische AJAX-Anwendungen doch nützlich ist.

Die HTML-Datei der AJAX-Beispielanwendung ist recht einfach aufgebaut (Listing 1). Im Header-Abschnitt bindet der Script-Tag eine externe Javascript-Datei namens ajax.js ein, die den gesamten Code der AJAX-Anwendung enthält. Alternativ dazu können Javascript-Funktionen auch direkt in der HTML-Datei stehen, eingeschlossen zwischen einem öffnenden und einem schließenden Script-Tag.

Die Verbindung zwischen Code und HTML stellt Zeile 6 des Listings her. Das Attribut onclick des Links enthält den Namen der Javascript-Funktion, die der Browser aufruft (getRandom), wenn der Benutzer darauf klickt. Schließlich folgt ein HTML-Bereich (span) mit einer ID, über die jener sich später von Javascript aus ansprechen lässt.

<html>
  <head>
    <script language="JavaScript" type="text/javascript" src="ajax.js"/>
  </head>
  <body>
    <a href="#" onclick="javascript:getRandom()">AJAX-Test</a>
     
  </body>
</html>

Wollen Sie einmal testen, ob die Verbindung HTML/Javascript klappt, tragen Sie in die Datei folgenden Code ein:

function getRandom()
{
   alert("Angeklickt");
}

Befinden sich index.html und ajax.js im selben Verzeichnis auf dem Server, zum Beispiel ajaxtest, rufen Sie die HTML-Seite über die Adresse http://Servername/ajaxtest/ auf. Laufen Server und Browser auf dem gleichen Rechner, verwenden Sie als Servernamen localhost. Klicken Sie dann auf den Link, öffnet der Browser einen Dialog, der den Text Angeklickt anzeigt.

Klappt das nicht, können Sie sich schon einmal mit der Fehlersuche vertraut machen. Am besten verwenden Sie für die Entwicklung von AJAX- und anderen Webanwendungen den Browser Firefox, der einige dafür praktische Tools mitbringt. So finden Sie im Menü Tools den Punkt JavaScript Console, der ein kleines Fenster für Javascript-Fehlermeldungen.

Sehr vielfältig sind die Fehlerquellen in diesem einfachen Fall noch nicht. Entweder findet der Server die Javascript-Datei nicht (achten Sie beim Namen auch auf richtige Groß- und Kleinschreibung) oder sie enthält einen Syntaxfehler: Es fehlt also eine Klammer, ein Strichpunkt oder Ähnliches.