Submit-Buttons waren gestern. Heute ist AJAX.

17. März 2005

Was ist AJAX?

Zunächst ist es die Abkürzung für »Asynchronous JavaScript And XML«. Und es ist, kurz gesprochen, eine Möglichkeit, auf einer HTML-Seite über JavaScript/DOM mit dem Server Daten auszutauschen, ohne dass diese Seite neu geladen werden muss.

Wie war das bisher?

Wenn eine Website bestimmte interaktive Funktionen besitzt, die es nötig machen, mit dem Server zu kommunizieren, so war das bisher eine recht komplizierte Angelegenheit:

  1. Die Seite wird vom Server auf den Browser übertragen.
  2. Da liegt sie nun erstmal.
  3. Der User kann nun etwas mit der Seite machen. Alles, was über das bloße Lesen oder Ansehen der bei 1. geladenen Daten hinaus geht, nennen wir Interaktion. Darunter fällt zum Beispiel das Ausfüllen eines Formulars oder auch das Abfragen einer bestimmten Information vom Server, die nicht bei 1 mitgeliefert wurde.
  4. Jede Aktion, die man nun tätigt und abschließt, muss man mit dem Klick auf einen Button (oder etwas vergleichbares), bestätigen.
  5. Der Browser fordert nun beim Server eine neue Seite an und gibt ihm dabei die Informationen über die Interaktivität des Users mit.
  6. Eine neue Seite wird vom Server auf den Browser übertragen, die so zusammengestellt ist, dass die Ergebnisse der User-Interaktion sichtbar sind.

Und alles geht von vorne los. Jeder kennt ja schließlich den Formularkrieg bei eBay und Co. Kann manchmal eine üble Angelegenheit sein. Und vor allem Anfänger wundern sich immer wieder, warum es Fehlermeldungen gibt, wenn man die Browsertasten vor und zurück verwendet.

Kann ich’s … schon mal sehen?

Seit einigen Monaten sieht man im Netz immer häufiger Seiten, bei denen man nicht erst neu laden muss, um die Ergebnisse der Interaktivität zu erhalten. Google Suggest holt sich bereits während des Tippens die wahrscheinlichsten Suchergebnisse aus der Datenbank. Und wer seine Fotos mit Flickr verwaltet, wird sich über die Möglichkeit freuen, fast alle Daten seiner Bilder »on the fly« einzugeben – sie werden direkt nach Verlassen des Formulares gespeichert und in der Datenbank abgelegt. Magic!

Der Trick ist stets die Verwendung von AJAX, eine Kombination mehrerer Web-Technologien. Kultiviert wird das ganze unter anderem bei adaptive path, wo man sich auch diesen sauberen Namen ausgedacht hat.

Woraus besteht das?

  • Das DOM kann Inhalte von Websites austauschen und/oder verändern, ohne dass die Seite neu geladen werden muss. Soweit ein alter Hut. Doch dass die auszutauschenden Inhalte auch vom Server kommen können, ist neu.
  • Über XML und XSLT wird mit dem Server kommuniziert.
  • Der von Microsoft im IE5 eingeführte, aber inzwischen in ähnlicher Form bei allen neueren Browsern vorhandene XMLHttpRequest ist das Herzstück und stellt die eigentliche Schnittstelle dar.

Was bedeutet das für Web-Designer?

Wir sollten AJAX in Erwägung ziehen, es ist eine sehr nutzerfreundliche Art, Webanwendungen zu gestalten. Selbstverständlich benötigt man zum Einsatz eine ganze Portion Wissen über JavaScript/DOM. Und auch der Code auf der Serverseite will natürlich programmiert werden. Insofern ist die Implementierung von AJAX eher etwas für die Web-Entwickler unter uns.

Generell sollte man allerdings darauf achten, immer einen Fallback anzubieten. Sprich: Eine Möglichkeit, die Seite auch mit deaktiviertem JavaScript zu nutzen. Zumindest, wenn es »nur« um das Ausfüllen von Formulardaten geht.

Weitere Informationen