Ajax Einführung

• Was ist Ajax
• Ein Beispiel für Ajax Annehmlichkeiten
• Das XMLHttpRequest Objekt
• Umsetzung des oben gezeigten Beispiels

Der Begriff Ajax hat mittlerweile grosse Verbreitung gefunden. Fast jeder Webentwickler hat ihn zumindest schon einmal gehört. Doch was dahinter steckt ist oft unklar. Der Begriff Ajax ist ein Apronym für die Wortfolge Asynchronous Javascript And XML und bezeichnet die asynchrone Datenübertragung zwischen Webserver und Client/Browser. Dadurch wird es ermöglicht, innerhalb eines HTML-Dokumentes eine HTTP-Anfrage an den Server zu senden, und die empfangenen Ergebnisse in das Dokument einzufügen, ohne dabei die gesamte Seite neu laden zu müssen. Es können also einzelne Teile der Webseite ausgetauscht oder aktualisiert werden. Der Server überträgt dabei nur die benötigten Teile. Bei Ajax kommen verschiedene Technologien, wie XHTML, JavaScript, DOM, das XMLHttpRequest-Objekt, CSS, und viele andere zum Einsatz, wodurch neue Möglichkeiten gegeben sind, das Problem der statischen Webanwendung zu verdrängen.

Das folgende Beispiel ist natürlich nur ein kleiner Schritt auf dem Weg zum perfekten Ajax gestützten Seitenlayout, jedoch hilft es Ihnen möglicherweise das Porential das in dieser Technologie schlummert zu erkennen.

Geben Sie in das Formular eine beliebige deutsche Postleitzahl ein und verlassen Sie dann das Eingabefeld für die Postleitzahl. Die beiden anderen Felder werden automatisch ergänzt.
(Beispiel f�¼r Berlin: 10101)

Postleitzahl:
Stadt:
Bundesland:

Wie Sie sehen ist es nicht nötig die gesamte Seite neu zu laden, obwohl die Daten, die im Formular erscheinen erst beim Server erfragt werden müssen. Dies ist dank asynchroner Datenübertragung möglich. Die Daten werden mithilfe des XMLHttpRequest Objektes beim Server erfragt und im XML Format geliefert (Hier ein Link zu der Datei, die vom Server geschickt wird; Sie können die Postleitzahl einfach hinten an den Link anhängen). Nachdem die Daten Übertragen wurden können sie einfach in die vorhandene Webseite integriert werden. Eine genaue Beschreibung für dieses Beispiel finden Sie weiter unten.

Bevor wir gleich voll in das oben gezeigt Beispiel einsteigen möchte ich Ihnen zunächst eine sehr simple Anwendung des XMLHttpRequest Objektes nahebringen. XMLHttpRequest ist eine API zum Transfer beliebiger Daten über das HTTP Protokoll. Dabei können verschiedene Anfragemethoden (z.B. GET, POST, PUT) verwendet werden. Da XMLHttpRequest z.B. aus JavaScript, JScript und VBScript heraus verwendet werden kann und eine asynchrone Datenübertragung ermöglicht, bildet es einen Grundbestandteil der Ajax-Technik.
In diesem Beispiel wird durch das Klicken eines Links ein Alarm Fenster (Sie kennen möglicherweise die JavaScript Funktion alert()) geöffnet. Der Inhalt dieses Fensters wird per XMLHttpRequest vom Server erfragt.

Schritt 1: Durchführen eines HTTP Request
Um einen HTTP Request an den Server zu senden benötigen Sie eine Klasseninstanz, die diese Funktionalität bietet. Internet Explorer war der erste Browser, der eine solche Klasse als ActiveX Objekt (genannt XMLHTTP) bereitstellte. Später folgten die anderen Browserhersteller mit der Implementierung der XMLHttpRequest Klasse. Der folgende Code erstellt eine Instanz der benötigten Klasse. Dabei werden sowohl XMLHTTP als auch XMLHttpRequest berücksichtigt.


Die Zeile http_request.overrideMimeType('text/xml'); dient hier zum sicherstellen des richtigen MIME Types (text/xml), um Problemen mit älteren Mozilla Browsern vorzubeugen.

Danach müssen wir entscheiden, was wir tun möchten, nachdem der Server auf unsere Anfrage antwortet. Dies wird folgendermassen erledigt:


Nachdem geklärt ist, was geschehen soll, nachdem der Server geantwortet hat, kann die eigentliche Anfrage durchgeführt werden. Dazu werden die open() und die send() Methoden der Request-Klasse benutzt.


Der erste Parameter der Methode open() legt die Anfrageart fest (z.B. GET, POST, PUT, ...). Der zweite Parameter gibt die URL an, auf die sich die Anfrage bezieht, und der dritte Parameter legt fest, ob eine asynchrone Übertragung (true) stattfinden soll, oder nicht.

Schritt 2: Umgang mit der Serverantwort
Bisher haben wir noch eine etwas unvollständige Anweisung für den Umgang mit der Serverantwort (http_request.onreadystatechange = nameDerAufzurufendenFunktion;). Dies werden wir nun ändern. Zuerst prüfen wir anhand des Wertes von http_request.readyState ob der Verbindungsaufbau erfolgreich abgeschlossen wurde.


Mögliche Statuswerte sind:

• 0 (uninitialized)
• 1 (loading)
• 2 (loaded)
• 3 (interactive)
• 4 (complete)

Danach überprüfen wir noch den Statuscode der Serverantwort. Status 200 bedeutet OK und ist damit was wir suchen.


Schritt 3: Ein Anwendungsbeispiel
Die bisherigen Informationen genügen bereits, um eine XMLHttpRequest Anfrage durchzuführen und zu verarbeiten. Dieses fertige Beispiel soll das ganze verdeutlichen.


Klicken Sie einfach auf diesen Link, um das Beispiel zu testen.
Sie können die fertige HTML Datei hier herunterladen. Zusätzlich benötigen Sie noch die Datei test.html, die einfach den Text Ich bin ein Test enthalten sollte.

Schritt 4: Mit XML Antworten arbeiten
Ein entscheidender Schritt fehlt jetzt noch. Die Daten in der eben benutzten Datei test.html sind in keinster Weise formatiert. Dies war für das Beispiel kein Problem, doch wenn Sie mehr als nur eine einzige Information übertragen wollen bietet es sich an, ein ordentliches XML Format zu verwenden.
Der folgende Code erweitert das Beispiel aus Schritt 3 soweit, dass Sie die gleiche Information (Ich bin ein Test) über eine gültige XHTML senden und verarbeiten. Hierfür wird zuerst eine neue Datei test.xhtml erstellt. Diese ersetzt die bisher verwendete test.html und enthält folgendes:


Wie Sie sehen hat sich lediglich die Formatierung der Datei ein wenig geändert. Der nächste Schritt ist nun, die Zeile zu ändern, in der bisher die Datei test.html an unsere Funktion übergeben wird.


Zum Schluss ändert sich noch die Auswertung der Daten. Bisher haben wir der alert() Funktion die Daten per http_request.responseText übergeben. Dies wird folgendermassen geändert:


Sie sehen, dass es damit sehr einfach wird, eine große Fülle an Daten in einer einzigen XHTML Datei zu liefern und diese in Ihre Webseite einzupassen.

Da Sie nun bereits den Ablauf eines HTTP Requests sowie die Grundlagen im Umgang mit XMLHttpRequest kennen, können wir uns an das oben gezeigte Beispiel machen. Zur Erinnerung, es geht um ein Formular, in das nur eine Postleitzahl eingegeben wird, während die Stadt automatisch ergänzt wird. Sie werden feststellen, dass sich das Beispiel innerhalb kurzer Zeit und ohne große Zauberei umsetzen lässt.

Schritt 1: Erstellen des HTML Formulars

Zuerst benötigen wir die HTML Seite, die das Formular enthält, das weiter oben zu sehen ist. Auf dieser wird dann später die Postleitzahl eingegeben. Die Seite sollte das folgende enthalten.


Wie Sie erkennen können habe ich bereits einen Scriptbereich in den HTML Code eingefügt. Dieser enthält die Funktion waehleStadt(). Ausserdem enthält das Input-Element für die Postleitzahl ein onblur Event ("waehleStadt();"), das aufgerufen wird, wenn das Input-Element den Focus verliert.

Schritt 2: Erstellen und verarbeiten des HTML Request

Das vorherige Beispiel war sehr einfach und der Code hielt sich in Grenzen, weshalb das onClick Event einfach direkt die Funktion abfrageErstellen() aufgerufen hat, und dort alles weitere erledigt wurde. Dies wollen wir nun ein wenig abändern. Dazu erstellen wir zuerst eine Funktion, die einfach nur ein HTTP Objekt erzeugt und zurückgibt. Im folgenden die Funktion erstelleAbfrage(). Dazu kommt die Funktion verarbeiteAbfrage(), die wir benutzen, um die Daten, die vom Server empfangen werden in das Formular einzufügen.


Die Funktionen werden innerhalb des head Bereiches im obigen HTML Dokument eingefügt. Direkt vor oder nach der Funktion waehleStadt() (Innerhalb des Scriptbereichs!). Die Zeile var http_obj = erstelleAnfrage();, durch die das HTTP Objekt erzeugt wird, wird auch innerhalb des Scriptbereiches, jedoch ausserhalb der Funktionen eingefügt. Setzen Sie diese Zeile am besten direkt vor das </script>.

Da die entsprechenden Funktionen für den HTTP Request nun fertiggestellt sind, ist es an der Zeit die Funktion waehleStadt() (oben rot dargestellt) mit einigen Anweisungen zu füllen. Sie werden sich an die folgenden Zeilen Code noch aus dem vorherigen Beispiel erinnern. Lediglich die Gesamtstruktur der Funktionsaufrufe hat sich etwas geändert.


Schritt 3: Die Daten verfügbar machen

Bisher haben wir eine HTML Seite, auf der sich das benötigte Formular befindet. Ausserdem enthält die Seite die Scripte zum durchführen und verarbeiten eines HTTP Request. Beim Laden der Webseite wird aufgrund der Zeile var http_obj = erstelleAnfrage(); ein HTTP Objekt erstellt. Etwas entscheidendes fehlt jedoch noch. Ihnen ist möglicherweise aufgefallen, dass ich in der Zeile http_obj.open("GET", url + escape(eingegebenePLZ), true); die Variable url verwendet habe, ohne weiter darauf einzugehen. Dies möchte ich jetzt nachholen.
Um die Daten, die im Formular erscheinen sollen tatsächlich erreichbar zu machen benötigen wir eine Datenbank in der diese gespeichert sind und ein kleines PHP Script, das genau den gewünschten Datensatz, abhängig von der Postleitzahl, liefert. Das Script sollte über einen Aufruf der Form "findeStadt.php?plz=PLZ" erreichbar sein und eine XML Datei folgenden Aufbaus liefern.


Schritt 3a: Eigene Datenbank verwenden

Wenn Sie die Möglichkeit besitzen eine Datenbank anzulegen und das erwähnte PHP Script (im folgenden erklärt) zur Verfügung zu stellen, dann sollten Sie nun damit fortfahren. Eine fertige SQL Datei der Postleitzahlendatenbank können Sie hier herunterladen. Ein PHP Script, das den entsprechenden Datensatz liefert sollte in etwa das folgende Aussehen haben:


Nun müssen Sie nur noch die vorhin erwähnte Variable url festlegen. Fügen Sie dazu folgende Zeile in den Scriptbereich der HTML Datei aus Schritt 1 ein (Am besten direkt nach der Zeile <script language="javascript" type="text/javascript">). Wenn Sie ein eigenes PHP Script benutzen, passen Sie den Pfad an.


Schritt 3b: Easy-Homepage Datenbank verwenden

Sollten Sie keine Möglichkeit haben, die Datenbank anzulegen oder das PHP Script auszuführen kann ich Ihnen zum testen anbieten, meine Datenbank und das Script aus obigem Beispiel zu verwenden. Das Script liefert die Daten genau wie im Beispiel beschrieben und kann über die Domain http://easy-homepage.info/xml_req_plz.php?plz=10101 erreicht werden.
Wenn Sie sich entschieden haben das vorhandene Easy-Homepage-Script zu verwenden, müssen Sie dieses für Ihr Dokument erreichbar machen. Fügen Sie dazu folgende Zeile in den Scriptbereich der HTML Datei aus Schritt 1 ein (Am besten direkt nach der Zeile <script language="javascript" type="text/javascript">).


Schritt 4: Das ganze nochmal im Überblick

Wenn Sie bis hierher alles befolgt haben sind Sie eigentlich schon fertig. Im folgenden sehen Sie noch einmal die gesamte HTML Datei. Beachten Sie, dass ich in dieser die URL meiner eigenen Datenbank verwendet, und zusätzlich noch ein paar Zeilen zum abfangen von Fehlern eingebaut habe (rot dargestellt). Wenn Ihre Datei in etwa das gleiche Aussehen hat wie die im folgenden angebildete, so müssten Sie jetzt den gleichen Effekt erzielen, wie das Beispiel oben.

Dieses Dokument entspricht den aktuellen HTML / CSS Standards.