AJAX - XML und JavaScript in Schönheit vereint?

Gelesen bei AboutWebDesign.de
URL: http://www.aboutwebdesign.de/awd/content/1124893836.shtml

AJAX - was sich anhört wie Spülmittel, ist in Wahrheit ein aktuelles "Buzzword". Klar ist: AJAX ist "hot", in und angesagt. Doch was genau verbirgt sich hinter der Abkürzung?

Je nach Variante geht es entweder um "Advanced JavaScript and XML" oder um "Asynchronous JavaScript and XML", also eine Kombination von JavaScript und XML (und allen anderen Web-Standard-Technologien, z.B. XHTML und CSS). Etwas technischer ausgedrückt: seit einiger Zeit enthalten die die JavaScript-Implementierungen der verbreitetsten Browser das Objekt XMLHttpRequest - damit ist es innerhalb einer im Browser ausgeführten JavaScript-Applikation möglich, HTTP-Anfragen z.B. an einen Web-Service zu starten und das Ergebnis, meist XML-Code, im Browser weiterzuverarbeiten. Im Kombination mit den komplexen Möglichkeiten, die JavaScript im Zusammenspiel mit DOM bietet, nämlich den Aufbau und die Manipulation ganzer Benutzerinterfaces, ergeben sich interessante Anwendungsmöglichkeiten.

Postleitzahl-Abfrage ohne Seiten-Neuaufbau


Zum Einstieg ein einfaches Beispiel: Sie wollen eine Suchmaschine anbieten, die Postleitzahlen Orten und Bundesländern zuordnet. Normalerweise reichte dafür ein einfaches HTML-Formular und ein Backend-Programm - der Benutzer gibt die ihn interessierende Postleitzahl ein, die Eingaben werden als HTTP-Request kodiert, das Backend sucht den Ort heraus und liefert eine komplett neue HTML-Seite zurück.

Mit AJAX funktioniert die Sache so: Sie verwenden das gleiche Formular wie oben, fügen dem PLZ-Feld aber einen JavaScript-Event-Handler onChange hinzu. In der entsprechenden Subroutine erstellen Sie ein HTTP-Request-Objekt, das die eingegebene PLZ an das Backend übermittelt und auf eine Antwort wartet. Danach werden daraus Ort und Bundesland extrahiert und mit DOM-Methoden in andere Formularfelder eingetragen. Ein Beispiel (siehe Screenshot) für eine solche Applikation finden Sie hier, den zugehörigen Code dagegen woanders.

AJAX-Engine zwischen User und Server


Etwas theoretisiert: Das AJAX-Konzept postuliert eine zusätzliche Ausführungsebene (in JavaScript) zwischen Benutzer und Server-Applikation. Dadurch wird die Interaktion asynchron: die User-Ebene (also die XHTML+CSS-Inhalte) kann jederzeit Veränderungen darstellen, ohne dass der Server (ansprechbar z.B. in Form einer Web Service-SOAP-Anfrage) zwingend involviert sein muss - und andersherum.

Vorteile: Keine Latenzzeiten, Desktop-ähnliche Interaktion


Vorteil dieser Methode: die Seite wird weder neu geladen noch neu aufgebaut - das verhindert lästige Latenzzeiten. Manche Benutzer-Interaktion wird mit dieser Technik vereinfacht - in letzter Zeit haben sich z.B. Google (z.B. bei GMail sowie Google Suggest, das bereits vorhandene Eingaben zu vervollständigen versucht) und A9 entschieden, auf AJAX-Technologien zu setzen.

In gewissem Sinne nähert sich die Web-Applikation mit AJAX damit der klassischen Desktop-Applikation an.

Damit wird es auch wieder möglich, einen Teil der anfallenden Rechenarbeit auf den Client zu verlagern - was bisher bei Web-Applikationen nur mit einigem Aufwand möglich war.

Nachteile: Testbarkeit, Accessibility, Drucken, Usability


Natürlich verkehren sich einige der oben genannten Vorteile unter bestimmten Umständen ins Gegenteil: so kann die Ähnlichkeit mit einer Desktop-Applikation unerfahrene Surfer gehörig verunsichern. Auch die Funktionalität des Zurück-Knopfes ist mit AJAX keineswegs sichergestellt - obwohl es hier bereits Lösungsansätze gibt, wie das Beispiel Google Maps zeigt.

Aus Sicht des Programmierers problematischer ist die Testbarkeit der eigenen Implementation: da die verschiedenen Browser unterschiedliche JavaScript-Implementierungen nutzen, stellt das vollständige Durchtesten einer Applikation die meisten Entwickler vor ein Zeitproblem. Ebenfalls problematisch ist, dass man sich auf die Fehlerfreiheit der einzelnen JavaScript-Implementierungen beim Ausführen von komplexen Applikationen, die eben mehr als drei oder vier Variablen enthalten, verlassen muss - ob ein solches Vertrauen durch umfangreiche Tests der Browser-Hersteller legitimiert wird, erscheint zumindest zweifelhaft.

Auch Drucken aus AJAX-Applikationen heraus ist zunächst einmal ein Problem - gerade, wenn es um einen Technologiewechsel weg vom Desktop hin zum Browser gehen soll. Nichtsdestotrotz wird AJAX von Analysten großes Potential zugeschrieben : "Experten sind nicht der Meinung, dass AJAX Desktop-Applikationen obsolet machen wird. Doch die Verwendbarkeit des Webs als Standalone-Entwicklungsplattform von Software hat es schon unter Beweis gestellt" (Wired).

Vielleicht das gewichtigste Problem in diesem Zusammenhang ist, dass Browser im Allgemeinen schlecht darin sind, auf externe Ereignisse zu reagieren - ein Push-Verhalten im Sinne, dass der Server dem Client eine Benachrichtigung schickt und dieser darauf reagieren kann, ist kaum möglich. Die derzeitige Standardlösung besteht im "Polling": die JavaScript-Applikation schickt regelmäßig eine Anfrage an den Server, ob neue Daten vorliegen. Leider resultiert das häufig in höheren Antwortzeiten und größeren Anforderungen an den Server.

Viel Lärm um nichts bzw. alte Hüte?


Manche Kritiker unterstellen der Firma adaptive path (die den Begriff "AJAX" in einem Artikel geprägt hat), eine Menge alter Technologien unter einem neuen Namen zu hypen, um das eigene Geschäft anzukurbeln.

Richtig ist auf jeden Fall: JavaScript, XML, CSS und auch das XHLHttpRequest-Objekt sind nicht neu, sondern teilweise schon seit mehreren Jahren fest etabliert. Richtig ist aber auch: manche Idee gewinnt erst dann an Zugkraft, wenn sie den passenden Namen bekommt.

Für den einzelnen Entwickler ist diese Kontroverse im Endeffekt nicht wichtig: Die sich durch die Kombination verschiedener Techniken ergebenden Möglichkeiten sind durchaus interessant, völlig unabhängig vom Namen, den man der Sache geben möchte. Und in einem Verkaufsgespräch macht sich ein Verweis auf die Verwendung "innovativer AJAX-Technologien" ohnehin gut - wenn man danach auch fundiert erklären kann, worum es dabei geht.

AJAX in der Praxis


AJAX.NET


Wie bei meisten Web-Technologien gibt es auch hier zwei Schienen, AJAX einzusetzen. Da wäre einerseits High-Level-Variante: AJAX in Kombination mit Techniken wie J2EE oder .NET, womöglich sogar direkt aus der Visual Studio-Entwicklungsumgebung heraus - manche der neuen Web Widgets von Microsoft gehen stark in diese Richtung (diese Linkliste ist ein guter Startpunkt für Enterprise AJAX).

AJAX per Hand


Die andere Variante, weniger aufwändig und preiswerter, läuft auf Code-Ebene; und genau das wollen wir anhand einiger Code-Schnipsel illustrieren.

Requester-Objekt


Zunächst einmal benötigen wir eine möglichst plattformunabhängige Objekt-Instanziierung eines XMLHttpRequests:

try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}

Daten laden und Requests verschicken


Und was fangen wir nun damit an? Wir könnten beispielsweise eine Anfrage an ein CGI-Skript absetzen. Die beiden folgenden Optionen sind prinzipiell äquivalent, wobei letztere die POST-Methode, erstere die GET-Form eines Requests verwendet:

requester.open("GET", "/suche.pl?for=AJAX");
requester.send(null);

requester.open("POST", "/suche.pl");
requester.send("for=AJAX");

Wer keine Argumente übergeben möchte, z.B. im Falle eines einfachen XML-Abrufs, verwendet ein leeres Argument in der zweiten Zeile:

requester.open("GET", "/xmlfiles/data.xml");
requester.send();

XMLHttpRequest nimmt erst Kontakt mit dem Server auf, wenn die send-Methode aufgerufen wird. Standardmäßig lässt der Browser währenddessen die Ausführung weiterer Skripten zu - wer stattdessen möchte, dass das Benutzerinterface einfriert, bis der Ladevorgang abgeschlossen ist, übergibt der open-Methode ein optionales drittes Argument: requester.open("GET", "/xmlfiles/data.xml", false);

Zustandsüberwachung


Die readyState-Eigenschaft des XMLHttpRequest-Objekts gibt Auskunft über den Ladezustand, also ob eine abgeschickter Request schon beantwortet wurde:
0 – Uninitialisiert
1 – Ladend
2 – Geladen
3 – Interaktiv
4 – Fertiggestellt

Wir interessieren uns in erster Linie für Zustand 4. Glücklicherweise ist es auch noch möglich, einen Event-Listener auf diese Variable zu setzen:

requester.onreadystatechange = stateHandler;

function stateHandler()
{
if (requester.readyState == 4)
{
if (requester.status == 200)
{
// Erfolg! Hurra!
}
else
{
// Problem beim Laden
}
}

return true;
}


Verarbeitung der Daten


Vorerst letzter Schritt: die Verarbeitung der Daten. Wenn das Laden Erfolg hatte, stellt das XMLHttpRequest-Objekt zwei Methoden bereit, Zugriff zu nehmen:

Ein Beispiel. Möglicherweise könnte die oben im Beispiel-Code geladene data.xml so aussehen:
>?xml version="1.0" ?>
>person>
>vorname>Max>/vorname>
>nachname>Meier>/nachname>
>/person>

Zum Zugriff auf den Nachnamen würde man nun folgenden Event-Listener installieren:

requester.onreadystatechange = stateHandler;

function stateHandler()
{
if (requester.readyState == 4)
{
if (requester.status == 200)
{
    var vornameNode = requester.responseXML.getElementsByTagName("vorname")[0];
    var vornameTextNode = vornameNode.childNodes[0];
    var vorname = vornameTextNode.nodeValue;
}
else
{
// Problem beim Laden
}
}

return true;
}


Weiterverarbeitung der Daten


Von diesem Punkt an können Sie die Daten beliebig weiterverarbeiten, z.B. ganze Benutzerinterfaces damit füllen. Für entsprechende Details verweisen wir hier auf das Kapitel DHTML der Webdesign-Referenz.

Fazit


AJAX ist eine interessante Erweiterung der bestehenden Möglichkeiten - das XMLHttpRequest-Objekts potenziert die Möglichkeiten von JavaScript.

Ressourcen


Stichwort AJAX bei Wikipedia - mit vielen anderen Links.

XMLHttpRequest-API von Microsoft / entsprechende Dokumentation von Mozilla.

dojo - ein Framework, das die Browser-unabhängige JavaScript-Programmierung erleichtert.

AjaxMatters.com - Seite mit viele Informationen, Artikeln und Links.