Ajax meistern, Teil 1: Einführung in Ajax

 

Brett McLaughlin (brett@newInstance.com), Autor und Editor, O'Reilly Media Inc.

06 Dez. 2005

Deutsche Übersetzung: Claudia Nölker

Ajax, die Kombination aus HTML, JavaScript Technologie, DHTML und DOM, ist ein hervorragender Ansatz, mit dem Sie aus trägen Web-Schnittstellen interaktive Ajax-Anwendungen machen können. Der Autor, ein Ajax Experte, demonstriert die Zusammenarbeit dieser Technologien - von einem groben Überblick bis hinein in die Details - um extrem effiziente Web-Entwicklungen Wirklichkeit werden zu lassen. Er lüftet auch den Schleier der zentralen Konzepte von Ajax, inklusive des XMLHttpRequest-Objekts.

Wenn Sie vor fünf Jahren kein XML kannten, waren Sie das Mauerblümchen, mit dem niemand reden wollte. Vor zwei Jahren kam dann Ruby ins Rampenlicht und Programmierer, die nicht wussten, was gerade bei Ruby lief, waren in der Kaffeeküche nicht willkommen. Und wenn Sie heute auf dem Stand der Dinge in der Technologie sein wollen, dann kommen Sie an Ajax nicht vorbei.

Ajax ist jedoch viel mehr als einfach nur ein aktueller Trend; es ist ein mächtiger Ansatz, um Webseiten zu erstellen und es ist bei weitem nicht so schwierig wie eine komplett neue Programmiersprache zu erlernen.

Bevor wir richtig ins Thema Ajax einsteigen, lassen Sie uns kurz einmal betrachten, was Ajax wirklich macht. Wenn Sie eine Anwendung schreiben, haben Sie zwei Möglichkeiten zur Wahl:

  • Desktop-Anwendungen
  • Web-Anwendungen

Das wird Ihnen beides vertraut sein. Desktop-Anwendungen erhalten Sie üblicherweise auf einer CD (oder manchmal auch als Download aus dem Internet), die dann komplett auf Ihrem Computer installiert werden. Manche davon nutzen das Internet zum Herunterladen von Daten, doch der Code, der diese Anwendungen laufen lässt, liegt auf Ihrem Desktop. Web-Anwendungen dagegen - und das wird Sie nicht weiter verwundern - liegen irgendwo auf einem Webserver und Sie greifen mit Ihrem Browser darauf zu.

Viel wichtiger als der Ort, an dem diese Anwendungen laufen, ist jedoch, wie diese Anwendungen sich verhalten und wie Sie mit ihnen interagieren können. Desktop-Anwendungen sind normalerweise ziemlich schnell (sie laufen auf Ihrem Computer, also müssen Sie auch nicht wegen der Internetverbindung warten), haben großartige Benutzerschnittstellen (üblicherweise in Interaktion mit dem Betriebssystem) und sind unglaublich dynamisch. Sie können klicken, tippen, Menüs und Untermenüs aufklappen, wild herumklicken - ohne dass Sie groß warten müssen.

Web-Anwendungen sind dagegen normalerweise brandaktuell und bieten Services, die Sie niemals auf Ihrem Desktop erhalten könnten (denken Sie mal an Amazon oder eBay). Doch leider ist mit der Leistung auch Wartezeit verbunden -- warten darauf, dass der Server antwortet, dass der Bildschirm aktualisiert wird, dass die Anfrage zurück kommt und schließ die neue Seite erstellt wird.

Dies ist natürlich eine starke Vereinfachung, aber Sie verstehen sicher, was ich meine. Wie Sie vielleicht schon vermuten, schließt Ajax diese Kluft zwischen der Funktionalität und Interaktivität einer Desktop-Anwendung und der ständig aktuellen Web-Anwendung. Sie können damit das dynamische Interface und die schicke Steuerung, die Sie von einer Desktop-Anwendung kennen, auch bei einer Web-Anwendung einsetzen.

Worauf warten Sie noch? Schauen Sie sich Ajax genauer an und lernen Sie, wie Sie schwerfällige Web-Schnittstellen zu rasanten Ajax-Anwendungen machen.

Alte Technologie, neue Tricks

Ajax ist in Wirklichkeit keine einzelne, sondern besteht aus mehreren Technologien. Um über die Grundlagen hinaus zu kommen, müssen Sie sich einen Einblick in mehrere verschiedene Technologien verschaffen. (Das ist der Grund, warum ich die ersten paar Artikel dieser Serie damit verbringe, die einzelnen Teile vorzustellen.) Die gute Nachricht dabei ist, dass Sie schon einiges über viele dieser Technologien wissen könnten. Und besser noch, dass diese einzelnen Technologien leicht zu erlernen sind - jedenfalls bestimmt nicht so schwierig wie eine ganze Programmiersprache wie Java oder Ruby.

Ajax definiert


Ajax ist übrigens die Abkürzung für Asynchrones JavaScript und XML (und DHTML und so weiter). Dieser Ausdruck wurde von Jesse James Garrett, Adaptive Path, geprägt (siehe Abschnitt Ressourcen) und ist von ihm nicht als Akronym beabsichtigt gewesen.

Folgende Basis-Technologien werden in Ajax-Anwendungen eingesetzt:

  • HTML wird zum Aufbau der Web-Formulare und zum Identifizieren der Eingabefelder für den Rest der Anwendung genutzt.
  • JavaScript bildet das Herzstück des Codes für Ajax-Anwendungen und erleichtert die Kommunikation mit Server-Anwendungen.
  • DHTML (Dynamisches HTML) hilft Ihnen die Formulare dynamisch zu aktualisieren. Sie werden div, span und andere dynamische HTML-Elemente verwenden, um Ihr HTML auszuzeichnen.
  • DOM, das Document Object Model, werden wir unter Benutzung von JavaScript-Code dazu verwenden, mit der Struktur des HTML und (in manchen Fällen) dem vom Server zurückgesendeten XML, zu arbeiten.

Lassen Sie uns das aufschlüsseln, um eine bessere Vorstellung von der Funktion jeder Technologien zu bekommen. Mit jeder davon werde ich mich in weiteren Artikeln näher befassen; doch für den Moment sollten Sie einfach mit diesen Komponenten und Technologien vertraut werden. Je besser Sie dieses verstanden haben, desto leichter wird es Ihnen fallen, den Schritt von einem ungefähren Wissen zu einem tiefen Verständnis dieser Technologien zu machen (und damit frischen Wind in Ihre Web-Entwicklung zu bringen).

Das XMLHttpRequest-Objekt

Das erste Objekt, das Sie verstehen sollten, ist wahrscheinlich das, was am neuesten für Sie ist; es heißt XMLHttpRequest. Das ist ein JavaScript-Objekt und wird so einfach erstellt wie in Listing 1 gezeigt.


Listing 1. Ein neues XMLHttpRequest Objekt erstellen

<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>

Im nächsten Artikel erfahren Sie noch mehr über dieses Objekt. Bis dahin merken Sie sich einfach, dass dieses das Objekt ist, welches alle Ihre Kommunikation mit dem Server abwickeln wird. Bevor Sie weiterlesen, halten Sie mal kurz inne und denken mal drüber nach -- es ist die JavaScript -Technologie in Form des XMLHttpRequest-Objekts, das mit dem Server spricht. Das ist nicht der übliche Ablauf einer Anwendung und genau das verleiht Ajax einen großen Teil seines Zaubers.

In einer normalen Web-Anwendung füllen Benutzer Formularfelder aus und klicken auf den Absenden-Button. Dann wird das komplette Formular zum Server geschickt. Der Server gibt es an ein Skript (gewöhnlich PHP oder Java oder vielleicht einen CGI-Prozess oder etwas ähnliches) weiter, und wenn das Skript fertig ist, sendet es eine komplett neue Seite zurück. Diese Seite könnte HTML mit einem neuen Formular sein, bei dem schon einige Felder gefüllt sind oder es könnte eine Bestätigungs-Seite oder vielleicht auch eine Seite sein, bei der einige Optionen schon aufgrund der Eingaben aus dem ersten Formular selektiert sind. Während das Skript oder Programm auf dem Server die Daten verarbeitet und das neue Formular zurückschickt, müssen die Benutzer natürlich warten. Ihr Bildschirm wird erst weiß und dann wieder neu mit Inhalt aufgebaut, nachdem die Daten vom Server zurück kommen. Hier merkt man dann die geringe Interaktivität -- die Benutzer bekommen kein augenblickliches Feedback und fühlen sich ganz gewiss nicht so, als ob sie mit einer Desktop-Anwendung arbeiten.

Ajax setzt im Wesentlichen JavaScript-Technologie und das XMLHttpRequest-Objekt zwischen Ihr Web-Formular und den Server. Wenn ein Benutzer Formulare ausfüllt, werden diese Daten zu einem JavaScript-Code und eben nicht direkt zum Server geschickt. Stattdessen holt sich das JavaScript die Daten aus dem Formular und sendet eine Anfrage an den Server. Währenddessen bleibt das Formular auf dem Bildschirm stehen - ohne aufzublitzen, zu blinken, zu verschwinden oder lahmgelegt zu werden. In anderen Worten, der JavaScript-Code sendet die Anfrage hinter den Kulissen los und der Benutzer merkt noch nicht einmal, dass die Anfrage gemacht wird. Und es kommt noch besser: Die Anfrage wird asynchron geschickt, das heißt Ihr JavaScript-Code (und damit auch der Benutzer) wartet nicht darauf, dass der Server antwortet. So kann der Benutzer weiter Daten eingeben, auf der Seite herumscrollen und die Anwendung benutzen.

Wenn der Server dann Daten zum JavaScript-Code (und damit dem Formular) zurückschickt, entscheidet dieser, was mit den Daten geschehen soll. Der JavaScript-Code kann Formularfelder on-the-fly aktualisieren und dadurch das Gefühl einer sofortigen Reaktion auf die Eingabe vermitteln - die Benutzer bekommen neue Inhalte, ohne dass das Formular abgeschickt oder neu geladen wurde. Der JavaScript-Code kann sogar die Daten holen, ein paar Berechnungen durchführen, eine weitere Anfrage starten - alles ohne das Eingreifen des Benutzers! Das ist die Leistungsfähigkeit vom XMLHttpRequest. Er kann mit dem Server hin und her kommunizieren, ohne dass der Benutzer überhaupt merkt, was wirklich abläuft. Das Resultat ist der Eindruck einer dynamischen, schnell reagierenden und hoch interaktiven Anwendung wie auf einem Desktop, jedoch mit all der Leistungsfähigkeit des Internet.

JavaScript hinzufügen

Sobald Sie das XMLHttpRequest begriffen haben, erweist sich der Rest des JavaScript-Codes als ziemlich banal. Tatsächlich werden Sie JavaScript-Code nur für wenige elementare Aufgaben verwenden:

  • Formulardaten holen: Mit JavaScript ist es ein Leichtes, die Daten aus dem Formular auszulesen und zum Server zu senden.
  • Formulardaten ändern: Ebenso ist es einfach, ein Formular zu aktualisieren, vom Setzen von Feldwerten bis zum on-the-fly Ersetzen von Bildern.
  • HTML und XML parsen: Sie werden JavaScript-Code verwenden, um das DOM zu manipulieren (siehe nächster Abschnitt) und mit der Struktur des HTML-Formulars und jeglicher XML-Daten, die der Server zurückgibt, zu arbeiten.

Für die beiden ersten Dinge sollten Sie mit der getElementById()-Methode, wie sie in Listing 2 gezeigt wird, vertraut sein.


Listing 2. Auslesen und setzen von Feldwerten mit JavaScript-Code


// Den Wert vom Feld "phone" holen und in einer Variable namens phone speichern 
var phone = document.getElementById("phone").value;

// Einige Werte eines Formulars mit Hilfe eines Arrays namens response setzen 
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

Da gibt es wirklich nichts Bemerkenswertes und das ist gut! Machen Sie sich klar, dass nichts daran furchtbar kompliziert ist. Sobald Sie den XMLHttpRequest kapiert haben, besteht Ihre Ajax-Anwendung hauptsächlich aus einfachem JavaScript-Code wie in Listing 2, vermischt mit ein bisschen clevererem HTML. Dann gibt es ab und zu noch etwas mit DOM zu arbeiten...schauen wir uns das also einmal an.

Vollenden mit dem DOM

Und dann gibt es da noch DOM, das Document Object Model. Für manche von Ihnen mag sich das beunruhigend anhören -- HTML-Designer haben nicht häufig damit zu tun, und es ist sogar für JavaScript-Coder etwas ungewöhnlich, es sei denn, es handelt sich um wirklich komplexe Programmieraufgaben. Gebrächlicher ist das DOM in Hochleistungs-C/C++ und Java-Programmen; in der Tat liegt darin wahrscheinlich der Grund, warum das DOM den Ruf hat, dass es schwer zu erlernen sei.

Glücklicherweise ist es mit JavaScript leicht, DOM einzusetzen, und meistens auch intuitiv. An dieser Stelle würde ich Ihnen normalerweise das DOM oder zumindest ein paar Code-Beispiele zeigen, aber selbst das wäre irreführend. Sie werden sehen, dass man ziemlich viel mit Ajax machen kann, ohne dass man sich mit dem DOM herumplagen muss. Und diesen Weg werde ich Ihnen zeigen. In einem späteren Artikel dieser Serie werde ich auf das DOM zurückkommen, aber für jetzt genügt es, wenn Sie wissen, dass es das DOM gibt. Wenn Sie erst einmal XML zwischen Ihrem JavaScript-Code und dem Server hin und her schicken und wirklich Inhalte im HTML-Formular verändern werden, greifen wir das DOM wieder auf. Bis dahin können wir auch ohne das DOM einige nette Dinge mit Ajax machen und legen es deswegen auf Eis.

Erzeugen eines Anfrage (Request)-Objekts

Nachdem Sie einen groben Überblick bekommen haben, sind Sie nun gerüstet für ein paar mehr Details. Da XMLHttpRequest der Dreh- und Angelpunkt von Ajax-Anwendungen ist -- und wahrscheinlich für viele von Ihnen recht neu -- werde ich damit beginnen. Wie Sie in Listing 1 gesehen haben, sollte es ziemlich leicht sein, dieses Objekt zu erstellen und zu nutzen, oder? Aber Moment mal!

Können Sie sich noch an diese nervtötenden Browserkriege vor ein paar Jahren erinnern und wie nichts auf allen Browsern in der gleichen Weise funktionierte? Tja, glauben Sie es oder auch nicht, aber diese Browserkriege gehen auch jetzt noch weiter, wenn auch in wesentlich kleinerem Ausmaß. Und, Überaschung: XMLHttpRequest ist eines der Opfer dieses Krieges. Daher müssen Sie ein paar verschiedene Dinge tun, damit Sie das XMLHttpRequest-Objekt ans Laufen bekommen. Ich werde Ihnen das Schritt für Schritt erläutern.

Arbeiten mit Microsoft Browsern

Microsoft's Browser, der Internet Explorer, verwendet den MSXML Parser, um XML zu verarbeiten. (Mehr über MSXML finden Sie in den Ressourcen.) Wenn Sie also Ajax-Anwendungen schreiben, die auf dem Internet Explorer laufen sollen, müssen Sie das Objekt in einer besonderen Weise erzeugen.

Ganz so einfach ist das jedoch nicht. Tatsächlich gibt es da draußen zwei verschiedene Versionen von MSXML, abhängig von der JavaScript-Version, die im Internet Explorer installiert ist. Also müssen Sie Code schreiben, der beide Fälle abdeckt. In Listing 3 sehen Sie den notwendigen Code, um auf Microsoft-Browsern ein XMLHttpRequest-Objekt zu erzeugen.


Listing 3. Ein XMLHttpRequest-Objekt auf Microsoft Browsern


var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}

Das alles wird für Sie jetzt noch nicht wirklich Sinn machen, aber das ist OK so. Im Laufe dieser Serie werden Sie JavaScript -Programmierung, Fehlerbehandlung, bedingtes Compilieren und vieles mehr kennenlernen. Zunächst einmal sollten Sie sich aber diese beiden grundlegenden Zeilen genauer ansehen:

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

und

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");.

Kurz und bündig gesagt, versucht dieser Code das Objekt mit der einen Version von MSXML zu erzeugen; wenn das nicht klappt, erstellt er ein Objekt mit der anderen Version. Hübsch, oder? Wenn keines von beidem funktioniert hat, wird die xmlHttp-Variable auf false gesetzt, um Ihrem Code mitzuteilen, dass irgendwas nicht geklappt hat. Sollte das der Fall sein, so haben Sie wahrscheinlich einen Nicht-Microsoft-Browser und müssen einen anderen Code verwenden, um zum gleichen Ziel zu gelangen.

Umgang mit Mozilla und Nicht-Microsoft Browsern

Wenn der Internet Explorer nicht der Browser Ihrer Wahl ist oder Sie Code für Nicht-Microsoft Browser schreiben, benötigen Sie anderen Code. Tatsächlich ist das die wirklich einfache Codezeile, die Sie in Listing 1 gesehen haben.

var xmlHttp = new XMLHttpRequest object;.

Diese simple Zeile erstellt ein XMLHttpRequest-Objekt in Mozilla, Firefox, Safari, Opera und so ziemlich jedem anderen Nicht-Microsoft-Browser, der Ajax in irgendeiner Weise unterstützt.

Alles zusammensetzen

Entscheidend ist, dass alle Browser unterstützt werden. Wer will schon eine Anwendung schreiben, die nur auf dem Internet Explorer läuft oder eine, die nur auf allen Nicht-Microsoft-Browsern funktioniert? Oder noch schlimmer - möchten Sie die Anwendung zweimal schreiben? Natürlich nicht! Also soll Ihr Code sowohl den Internet Explorer als auch Nicht-Microsoft-Browser unterstützen. Listing 4 zeigt Ihnen den Code, mit dem das erreicht wird.


Listing 4. Ein Multi-Browser fähiges XMLHttpRequest-Objekt erstellen


/* Ein neues XMLHttpRequest Objekt erstellen, um mit dem Webserver zu sprechen */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

Ignorieren Sie erst einmal die Kommentare und eigenartige Tags wie @cc_on; das sind spezielle Befehle fü den JavaScript-Compiler, die Sie im nächsten Artikel noch näher kennenlernen werden, wenn wir uns ganz auf XMLHttpRequest konzentrieren werden. Im Wesentlichen führt der Code folgende drei Schritte durch:

  1. Eine Variable xmlHttp erstellen, die auf das XMLHttpRequest-Objekt referenzieren wird.
  2. Versuchen, dieses Objekt in Microsoft-Browsern zu erstellen:
    • Versuchen, dieses Objekt mit dem Msxml2.XMLHTTP-Objekt zu erstellen.
    • Wenn das fehlschlägt versuchen, dieses Objekt mit dem Microsoft.XMLHTTP-Objekt zu erstellen.
  3. Wenn die Variable xmlHttp immer noch nicht belegt ist, das Objekt in der Nicht-Microsoft-Weise erstellen.

Am Ende dieses Prozesses sollte xmlHttp auf ein valides XMLHttpRequest-Objekt referenzieren, egal welchen Browser Ihre Benutzer verwenden.

Ein Wort zur Sicherheit

Und die Sicherheit? Aktuelle Browser bieten ihren Benutzern die Möglichkeit, die Sicherheitslevel hochzudrehen, JavaScript zu deaktivieren oder eine ganze Reihe von Optionen in ihrem Browser auszuschalten. In diesen Fällen wird Ihr Code sehr wahrscheinlich gar nicht mehr funktionieren. Solche Probleme sollten Sie galant bewältigen - das alleine ist Stoff genug für einen ganzen Artikel und der wird auch später drankommen. (Scheint eine ziemlich lange Serie zu werden, oder? Aber keine Bange, das werden Sie alles im Griff haben, bevor wir durch sind.) Bis dahin werden Sie zwar keinen perfekten, aber doch robusten Code schreiben, genau das Richtige, um Ajax zu begreifen. Um die Details kümmern wir uns später.

Request/Response in der Welt von Ajax

Nun verstehen Sie also Ajax und die Grundlagen des XMLHttpRequest-Objekt und seine Erstellung. Wenn Sie aufmerksam gelesen haben, haben Sie sogar festgestellt, dass es in der Tat die JavaScript-Technologie ist, die mit jedweder Web-Anwendung auf Ihrem Server kommuniziert und dass kein Formular direkt zur Anwendung abgeschickt wird.

Und wie passt das jetzt alles zusammen? Wie kann man nun das XMLHttpRequest verwenden? Da dies das entscheidende Stück Code ist, welches in jeder Ajax-Anwendung vorkommt, die Sie schreiben, lassen Sie uns kurz betrachten, wie das Request/Response-Modell mit Ajax im Wesentlichen funktoniert.

Eine Anfrage (Request) starten

Sie haben ein blank poliertes XMLHttpRequest-Objekt - nun also raus damit ins pralle Leben. Als Erstes brauchen Sie eine JavaScript-Methode, die Ihre Webseite aufrufen kann (wenn ein Benutzer etwa Text eingibt oder eine Option im Menü auswählt). Dann ist der Ablauf prinzipiell für alle Ihre Ajax-Anwendungen gleich:

  1. Auslesen der benötigten Daten aus dem Webformular.
  2. Bilden der URL, die Sie ansprechen möchten.
  3. Öffnen der Verbindung zum Server.
  4. Festlegen einer Funktion, die der Server aufrufen soll, wenn er fertig ist.
  5. Absenden der Anfrage (Request).

Listing 5 ist ein Beispiel einer Ajax-Methode,die genau dieses in dieser Reihenfolge realisiert:


Listing 5. Eine Anfrage mit Ajax


function callServer() {
  // Auslesen der Stadt (city) und des Bundeslandes (state) aus dem Webformular
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // Beide Werte müssen gefüllt sein, ansonsten stoppen
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;

  // Zusammensetzen der URL, die Sie aufrufen wollen
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  // Öffnen der Verbindung zum Server
  xmlHttp.open("GET", url, true);

  // Festlegen einer Funktion, die der Server aufrufen soll, wenn er fertig ist
  xmlHttp.onreadystatechange = updatePage;

  // Absenden der Anfrage
  xmlHttp.send(null);
}

Vieles davon ist selbsterklärend. Die ersten Zeilen verwenden üblichen JavaScript-Code, um die Werte der Formularfelder auszulesen. Danach wird im Code ein PHP-Skript als Ziel-URL gesetzt. Achten Sie darauf, wie die URL spezifiziert wird und die Parameter city und state (aus dem Formular) an diesen Wert angehängt werden, um eine GET-Anfrage zu bilden.

Als Nächstes wird die Verbindung geöffnet; das ist der erste Ort, an dem Sie XMLHttpRequest wieder in Aktion sehen. Die Verbindungsart (GET) wird angegeben, sowie die URL, die das Ziel der Verbindung ist. Der letzte Parameter gibt durch das true an, dass eine asynchrone Verbindung aufgebaut werden soll (also dass dies Ajax ist). Wenn Sie false verwenden, würde der Code nach dem Starten der Anfrage so lange warten (und nicht fortfahren), bis die Antwort kommt. Wenn dieser Wert true ist, können die Benutzer weiter das Formular verwenden, während der Server im Hintergrund die Anfrage verarbeitet.

Die Eigenschaft onreadystatechange von xmlHttp (Sie erinnern sich, das ist die Instanz des XMLHttpRequest-Objekts) ermöglicht es Ihnen, dem Server mitzuteilen, was er tun soll, wenn er wirklich fertig ist (das könnte in 5 Minuten oder 5 Stunden sein). Da der Code nicht auf den Server wartet, müssen Sie den Server wissen lassen, was er danach tun soll, damit Sie darauf reagieren können. In diesem Fall wird eine spezielle Methode -- genannt updatePage() -- ausgelöst, sobald der Server mit der Verarbeitung der Anfrage fertig ist.

Zum Schluss wird send() mit dem Wert null aufgerufen. Da Sie bereits in der URL die Daten für den Server (die Stadt und das Bundesland) angegeben haben, müssen Sie in der Anfrage nichts übermitteln. Diese Codezeile löst also Ihre Anfrage aus und der Server kann seiner Aufgabe nachkommen.

Wenn Sie nur eines aus dem Code mitnehmen sollten, dann, wie geradlinig und unkompliziert dies ist! Mal abgesehen davon, die asynchrone Natur von Ajax zu verinnerlichen, ist das alles ziemlich einfach. Sie werden das zu schätzen wissen, denn dadurch können Sie sich ganz auf coole Anwendungen und Schnittstellen konzentrieren, anstatt auf komplizierten HTTP Request/Response-Code.

Der Code in Listing 5 ist so einfach wie möglich gehalten. Die Daten sind einfacher Text und können als Teil der Anfrage-URL übergeben werden. Die Anfrage wird mit GET an Stelle des komplizierteren POST versendet. Es gibt keine XML- oder Inhalts-Header hinzuzufügen, keine Daten , die im Body der Anfrage gesendet werden -- mit anderen Worten: Dies ist Ajax-Utopie.

Keine Angst, die Dinge werden im Laufe dieser Serie komplexer. Sie werden lernen, wie Sie POST-Anfragen machen, wie Anfrage-Header und Inhalts-Typen gesetzt werden, wie XML in der Nachricht enkodiert wird, wie Sie Ihre Anfrage sicherer machen -- die Liste ist ziemlich lang! Machen Sie sich jetzt keine Gedanken über die schwierigeren Dinge -- wichtig ist, die Grundlagen zu verstehen, dann können Sie sich bald ein ganzes Arsenal von Ajax-Tools aufbauen.

Verarbeiten der Antwort (Response)

Nun nehmen wir uns die Antwort des Servers vor. An dieser Stelle müssen Sie zwei Dinge wissen:

  • Machen Sie nichts, bis der Wert der Eigenschaft xmlHttp.readyState gleich 4 ist.
  • Der Server wird seine Antwort in der Eigenschaft xmlHttp.responseText deponieren.

Das erste hiervon -- der Anfragestatus -- wird den Löwenanteil des nächsten Artikels in Anspruch nehmen; Sie werden mehr über die Phasen eines HTTP-Requests erfahren, als Sie je wissen wollten. Im Moment genügt es, wenn Sie einfach auf einen bestimmten Wert (4) checken und es wird laufen (und Sie haben etwas, worauf Sie sich im nächsten Artikel freuen können). Der zweite Punkt -- Auslesen der Eigenschaft xmlHttp.responseText , um die Antwort des Servers zu bekommen -- ist einfach. Listing 6 zeigt ein Beispiel für eine Methode, die der Server aufrufen kann, um das Ergebnis der Anfrage aus Listing 5 zu verarbeiten.


Listing 6. Verarbeiten der Antwort des Servers


function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

Auch dieser Code ist nicht wirklich schwierig oder kompliziert. Er wartet darauf, dass der Server ihn mit dem richtigen Anfragestatus aufruft und verwendet den Rückgabewert des Servers (in diesem Fall die Postleitzahl (ZIP Code) ), um ein anderes Formularfeld zu setzen. Das Ergebnis ist, dass das zipCode-Feld plötzlich eine Postleitzahl enthält -- ohne dass der Benutzer jemals einen Button angeklickt hat! Das genau ist der Eindruck einer Desktop-Anwendung, über die ich vorhin gesprochen habe. Schnell reagierend, dynamisch und interaktiv, und das mit nur mit ein bisschen Ajax-Code.

Aufmerksame Leser haben vielleicht bemerkt, dass das zipCode ein normales Textfeld ist. Sobald der Server die Postleitzahl geliefert und die updatePage()-Methode den Wert im Textfeld aktualisiert hat, kann der Benutzer den Eintrag wieder überschreiben. Das ist so gewollt, und zwar aus zwei Gründen: Um das Beispiel einfach zu halten und um Ihnen zu zeigen, dass Sie manchmal wollen, dass die Benutzer überschreiben, was der Server sagt. Behalten Sie beides im Gedächtnis, das ist wichtig für die Gestaltung guter Benutzeroberflächen.


Einbauen in das Webformular

Was fehlt uns jetzt noch? Nicht viel. Sie haben eine JavaScript-Methode, die sich die Information schnappt, die der Benutzer in ein Formular eingegeben hat, diese zum Server sendet, eine JavaScript-Methode angibt, die auf die Antwort wartet, diese verarbeitet und sogar den Feldwert setzt, sobald die Antwort vom Server da ist. Jetzt fehlt nur noch das Aufrufen der ersten JavaScript-Methode, um den ganzen Vorgang zu starten. Sie könnten natürlich einen Button in Ihr HTML-Formular einfügen, aber das ist aus dem Jahr 2001. Machen Sie sich die JavaScript-Technologie zunutze, wie in Listing 7 gezeigt.


Listing 7. Den Ajax-Prozess anstoßen


<form>
 <p>City: <input type="text" name="city" id="city" size="25" 
       onChange="callServer();" /></p>
 <p>State: <input type="text" name="state" id="state" size="25" 
       onChange="callServer();" /></p>
 <p>Zip Code: <input type="text" name="zipCode" id="zipCode" size="5" /></p>
</form>

Wenn Ihnen das wie ziemliche Routine vorkommt, dann habe Sie Recht -- das ist es! Wenn ein Benutzer einen neuen Wert für die Stadt oder das Bundesland angibt, legt die callServer()-Methode los und das Ajax-Vergnügen beginnt. Bekommen Sie eine Vorstellung davon, wo der Hase lang läuft? Gut; so ist das gedacht!

Resümee

An dieser Stelle sind Sie wahrscheinlich noch nicht so weit, Ihre erste Ajax-Anwendung zu schreiben -- zumindest nicht ohne dass Sie sich wirklich durch den Ressourcen-Abschnitt arbeiten. Doch Sie beginnen, die grundlegende Idee, wie diese Anwendungen funktionieren und das XMLHttpRequest-Objekt zu verstehen. In den folgenden Artikeln lernen Sie, wie Sie dieses Objekt meistern, wie Sie die Kommunikation zwischen JavaScript und dem Server abwickeln, wie Sie mit HTML-Formularen arbeiten und sich auch das DOM zunutze machen.

Für jetzt aber denken Sie mal darüber nach, wie mächtig Ajax-Anwendungen sein können. Stellen Sie sich ein Webformular vor, das nicht nur reagiert, wenn Sie auf einen Button klicken, sondern wenn Sie in ein Formularfeld schreiben, wenn Sie eine Option einer Auswahlliste selektieren...sogar wenn Sie Ihre Maus über den Bildschirm ziehen. Überlegen Sie mal, was genau asynchron bedeutet; denken Sie über JavaScript-Code nach, der nicht auf den Server wartet, sondern weiterläuft. Welche Probleme können auftreten? Worauf müssen Sie aufpassen? Und wie wird sich das Design Ihrer Formulare ändern, wenn Sie diesen neuen Programmieransatz verwenden?

Wenn Sie sich Zeit für diese Fragen nehmen, bringt das viel mehr, als wenn Sie nur Code, den Sie nicht wirklich verstehen, in Ihre Anwendung kopieren. Im nächsten Artikel werden wir diese Überlegungen in die Praxis übertragen und ich werde Ihnen die Details liefern, die Sie benötigen, damit solche Anwendungen funktionieren. Also, bis dahin erfreuen Sie sich an den Möglichkeiten von Ajax.

Ressourcen

Erfahren Sie mehr

Lesen Sie weiter: Teil 2 - Wie Sie mit JavaScript und Ajax asynchron anfragen


Themen

Buchreihen

Special Interest

International Sites

O'Reilly China O'Reilly France O'Reilly USA O'Reilly Japan O'Reilly Taiwan