Interaktive Webseiten
Während Sie den Suchbegriff eintippen, zeigt Google bereits Vorschläge für den kompletten Suchbegriff mit der Anzahl der Fundstellen an.
Immer mehr Websites setzen auf diese Technik namens Ajax, die noch viel mehr leisten kann als bei Google Suggest. Unter www.zimbra.com finden Sie etwa die Demo eines Personal Information Managers, der sich fast wie Outlook bedient. Nach der ersten Anzeige der Webseite ist kein weiterer Ladevorgang erforderlich. Klicken Sie beispielsweise den Kalender an, so ändert sich die Anzeige im Browserfenster und die vorhandenen Einträge werden angezeigt. Diese Daten holt Zimbra per Ajax fast unbemerkt vom Webserver, auf dem sie gespeichert sind. Ähnlich funktionieren auch Google Mail und OutlookWeb Access.
Ajax steht für Asynchronous JavaScript and XML. Schon der Name stellt klar, dass es dabei nicht um eine neue Technologie geht, sondern um eine Kombination bekannter und etablierter Techniken: XML als Datenformat, JavaScript zur Verarbeitung der Daten, aber wie kommunizieren Browser und Webserver? Browser-basierende Anwendungen wie Adressbücher, Webmail oder Webseiten-Baukästen haben nicht ganz zu Unrecht den Ruf, umständlich und langsam zu sein. Denn bei jeder Änderung der Anzeige muss der Webserver eine komplett neue Webseite senden, die der Browser dann berechnen und anzeigen muss. Das ist zum Beispiel der Fall, wenn in einer Adressdatenbank alle Namen mit F zu suchen sind. Selbst bei einer schnellen Internetverbindung dauert der Vorgang deutlich länger als bei einem Programm, das auf dem lokalen PC läuft.
Der Kern: XMLHttpRequest
Für diesen Anwendungszweck hat Microsoft 1999 in den Internet Explorer 5.0 eine besondere Programmierschnittstelle eingebaut, XML HttpRequest. Die erste Anwendung war OutlookWeb Access, die Online- Variante des bekannten Programms. Mittlerweile unterstützen fast alle aktuellen Browser die Schnittstelle: Internet Explorer (seit 5.0), Mozilla Firefox (seit 1.0), Netscape 7.1, Opera 7.6, Apple Safari 1.2 und der Linux Konqueror.
XMLHttpRequest nimmt Aufträge entgegen, leitet diese an den Webserver weiter und holt später die Antwort desWebservers ab. Als Programmierer müssen Sie sich nicht um die Details der Kommunikation kümmern.
Damit XMLHttpRequest mit dem Webserver kommunizieren kann, benutzt es das Standardprotokoll von Webbrowser und Webserver, HTTP. Dabei schickt der Webbrowser eine Anfrage (request) an den Webserver. Dieser reagiert entsprechend der Anfrage und sendet die angeforderten Daten als Antwort (response) zurück. Dabei kann es sich z. B. um die Ergebnisse einer Datenbanksuche oder einer Berechnung handeln. Der Webbrowser zeigt die Antwort nicht im Browserfenster, sondern speichert sie im Objekt XMLHttpRequest. Ein Browser-Skript liest diese Daten und reagiert entsprechend, etwa indem es in einem Formular auf der Webseite den Namen eines Kunden einträgt.
Drei Zeilen JavaScript
Ein kleines Praxisbeispiel zeigt die Zusammenhänge. In einem Webformular soll nach der Eingabe der Stadt eine Auswahlliste die dazu passenden Postleitzahlen anzeigen. Dann muss ein Besucher nur noch die richtige Zahl auswählen, das reduziert Fehleingaben. Auf dem Webserver gibt es dazu eine MySQL-Datenbank mit Ortsnamen und Postleitzahlen sowie ein kleines PHP-Skript, getplz.php, das die Suche in der Datenbank übernimmt. Drei Zeilen JavaScript reichen für eine minimale Ajax-Anwendung aus. Fehlerkontrolle und Komfort gibt es dabei natürlich nicht, außerdem funktioniert das Beispiel in dieser Form nur im Internet Explorer:
AbfrageObjekt = newActiveXObject("Microsoft.XMLHTTP");
AbfrageObjekt.open("GET","getplz.php?frag=Dortmund", false);
AbfrageObjekt.send(null);
Die erste Zeile erzeugt eine neue Objektinstanz vom Typ XMLHttpRequest. Microsoft realisiert das Objekt als ActiveX-Control, weshalb diese spezielle Syntax erforderlich ist. Alle anderen Browser nutzen die bei Java- Script übliche Methode über new XMLHttpRequest().
Nachdem das Objekt erzeugt ist, legen Sie mit der Methode open die Eckdaten für die Anfrage fest. Der erste Parameter beschreibt die Methode, mit der Daten zum Webserver übertragen werden. Kurze Texte übertragen Sie mit der Methode GET. Dabei hängen Sie die Daten einfach an die URL desWebservers an, an den Sie die Anfrage richten. Diese Methode setzen viele Webformulare ein, um eingetippte Suchbegriffe von Google zum Server zu schicken. Hängen Sie nach einem Fragezeichen die Daten alsWertepaar Name=Wert an die URL an. Das Beispiel ruft das PHPScript getplz.php auf dem Webserver auf und übergibt den Parameter frag mit dem Wert Dortmund. Das Script sucht in einer MySQLDatenbank nach der oder den passenden Postleitzahlen zum angegebenen Ort.
Antwort vom Webserver
Bei einer synchronen Anfrage an den Webserver ist der Browser blockiert, bis die Ergebnisse zurückkommen.
Der letzte Parameter kann nur true oder false sein. Lassen Sie ihn weg, so gilt als Standardwert true. Mit dem Wert false wie im Beispiel startet eine synchrone Kommunikation: Der Browser wartet nach dem Absenden der Anfrage auf die Antwort vom Webserver. In dieser Wartezeit ist der Webbrowser blockiert, der Anwender kann weder scrollen noch klicken oder sonst etwas tun.
In der Praxis entspricht die erzwungene Wartezeit nicht dem gewünschten Verhalten. Im nächsten Abschnitt lesen Sie, wie eine asynchrone Anfrage das Warteproblem löst.
Bis jetzt ist noch nichts passiert, das AbfrageObjekt ist lediglich mit den richtigen Werten initialisiert. Das Absenden der Anfrage erledigt die Methode send in der letzten Zeile. Der einzige Parameter ist optional. Sie sollten aber immer null eintragen, sonst meldet zum Beispiel Firefox einen Fehler.
Das Ergebnis der Abfrage beim Webserver speichert das AbfrageObjekt in der Eigenschaft ResponseText. Dabei kann es sich entweder um die gewünschten Ergebnisse oder um eine Fehlermeldung handeln. Die Zeilealert
(AbfrageObjekt.ResponseText);
gibt den Text in einer Dialogbox aus. Ein sinnvolles Skript würde die Daten in die Webseite einfügen oder etwa die Elemente eines Webformulars anpassen. ResponseText enthält lediglich eine Zeichenkette. Im Beispiel besteht der Text aus den ermittelten Postleitzahlen, die jeweils ein Minuszeichen trennt. Auf dem Webserver arbeitet im Beispiel ein PHP-Skript, das den Ortsnamen oder die ersten Buchstaben davon als Parameter entgegennimmt. Es sucht aus einer MySQL-Datenbank die passenden Ortsnamen und die zugehörigen Postleitzahlen heraus. Die Rückmeldung an den Webbrowser erfolgt über das Standardkommando echo. So kann die zentrale PHP-Schleife zur Ausgabe der Postleitzahlen aussehen:
while ($line =mysql_fetch_array($result,MYSQL_ASSOC))
{foreach ($line as $col_value){ echo "$col_value"."-";} }
Das Skript schreibt jeweils eine Postleitzahl, gefolgt von einem Minuszeichen. Das Minuszeichen erleichtert im Browser-Skript die Zerlegung der Postleitzahlen, denn es gibt sowohl fünf- als auch vierstellige Postleitzahlen. Anstatt PHP kann auch jede andere Programmiersprache oder Technologie zum Einsatz kommen, die GET-Anfragen von Webbrowsern empfangen und beantworten kann, etwa Perl, Java oder auch ASP.
Asynchroner Datenverkehr
Anhand der Eingaben im Ortsfeld blendet Java- Script in der Auswahlliste die entsprechenden Postleitzahlen zur Auswahl ein.
Das Beispiel erweitern Sie für die Praxis: In einem Webformular für eine Adresseingabe soll eine Auswahlliste die passenden Postleitzahlen enthalten, sobald der Benutzer das Eingabefeld mit dem Ortsnamen ausgefüllt hat und zum nächsten Feld wechselt. Dabei soll keine lästige Wartezeit stören.
Eine asynchrone XMLHttpRequest-Anfrage an den Webserver zu senden, funktioniert im Prinzip wie bei der beschriebenen synchronen Variante. Weil dasSkript nicht auf die Antwort desWebservers wartet, setzen Sie eine so genannte Callback-Funktion (Rückruf) ein. Das ist eine normale JavaScript-Funktion, die Sie selbst programmieren. Ändert sich der Status der Webserver-Anfrage, ruft das XMLHttpRequest- Objekt diese Funktion auf. Über die Eigenschaft onreadystatechange des Objekts legen Sie die Callback-Funktion fest:
AbfrageObjekt.open("GET",aktion,true);
AbfrageObjekt.onreadystatechange =BearbeiteAntwort;AbfrageObjekt.send(null);
Das Beispiel verwendet bei open als letzten Parameter true, um eine asynchrone Anfrage zu starten. Wichtig ist die Zeile danach, die der Eigenschaft onreadystatechange den Namen der Callback-Funktion, BearbeiteAntwort, zuweist.
