praegnanz.de büro für intervernetzte medien

Gerrit, 17.03.2005

Submit-Buttons waren gestern. Heute ist AJAX.

Eine etwas plakative Überschrift, das gebe ich gerne zu. Heute stelle ich wieder einmal eine interessante Web-Technologie vor, die zwar nicht taufrisch ist, über die es sich aber durchaus zu berichten lohnt.

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

20 Kommentare

  1. Benedikt am 11. März 2005 #

    Das ist ne Tolle sache ähnelt ein bischen dem Formularframework Cocoon Forms bzw Woody bzw XForms :)

    Alle wollen das selbe bessere Formulare ich denke der Standart der jetzt schon seit Jahren besteht sollte endlich abgelöst werden…

    Aber bitte einheitlich ;)
  2. psysp am 11. März 2005 #

    Ich dachte immer Google Suggest läuft über WebServices?!?
  3. Aristoteles Pagaltzis am 12. März 2005 #

    Google Suggest verwendet XMLHttpRequest. Allerdings ist das X in AJAX hier fehl am Platze, denn es wird kein XML heruntergeladen, sondern Javascript-Code, der ein Array mit neuen Daten befüllt.
  4. Benjamin Reitzammer am 15. März 2005 #

    > Über XML und XSLT wird mit dem Server kommuniziert.

    Sorry, wenn ich kleinlich bin, aber ich glaube anstatt XML/XSLT wird eher über HTTP mit dem Server kommuniziert. Das dabei verwendete Format ist vielleicht XML-basiert (siehe Google Suggest Kommentar weiter oben). XSLT hat mit der Kommunikation zwischen Server und Client/Browser nichts zu tun.
  5. Vitaly Friedman am 7. Mai 2005 #

    Endlich! Danke für diesen Artikel! Irgendwie habe ich die ganze Zeit irgendwelche Zusammenfassungen über AJAX gelesen, aber so konkrete, eindeutige und klare Information habe ich bisher nirgendwo lesen können.

    Danke!

    Mit freundlichen Grüßen, Vitaly
  6. Manni am 24. August 2005 #

    http://www.swarovskibirding.com verwendet eine derartige Technologie bereits seit 2001 extensiv, allerdings ohne XMLHttpRequest .
    Über ein Kommunikationsframe werden Formulare geprüft, gespeichert oder Elemente befüllt, Server-Messages ausgegeben, etc.
  7. nepi am 9. Oktober 2005 #

    In der Tat ist AJAX keine neue Technologie, Microsoft hat es ja schon 2001 eingeführt. Aber aus mehreren Gründen ist jetzt einfach die Zeit für AJAX gekommen:
     – JavaScript ist relativ langsam, aber mittlerweile sind die PC’s schnell genug, um JavaScript-Anwendungen ausreichend schnell auszuführen.
     – Die Bandbreite der Internet-User/innen (vom Modem zu DSL) hat sich deutlich gesteigert, zusätzliche Daten können relativ schnell nachgeladen werden.
     – Die unterschiedlichen DHTML-Modelle der Browser (Netscape 4-Layer vs. IE-document.all) sind weitgehend Vergangenheit. Alle neueren Browser unterstützen das gleiche DHTML-Modell (DOM).
     – Die Sicherheitsprobleme von XMLHTTPRequest aus der Anfangszeit (lokale Dateien konnten ausgelesen werden) sind bereinigt.
     – Bedeutende Firmen im Internet-/Software-Bereich (Google, Yahoo, Amazon, Microsoft) gehen bei AJAX voran und setzen damit neue Maßstäbe.
     – Die bedeutenden Server-seitigen Fortschritte verlangen geradezu nach effektiveren Web-Oberflächen, um die vielfältigen Möglichkeiten voll nutzen zu können.
     – Die großen Fortschritte im Bereich der mobilen Nutzung des Internets führt zu dem Verlangen, dass zunehemnd mehr Aufgaben über das Web bearbeitet werden können und verlangt damit nach besseren Web-Oberflächen.

    Kurz und gut: AJAX ist nicht neu, aber es ist jetzt an der Zeit, es effektiv zu nutzen.

    P.S. Habe gerade einen Vortrag über AJAX gehalten. Wen es interessiert: AJAX-Vortrag
  8. Rolf Köhne am 28. Mai 2006 #

    Auf unserer Homepage www.Online-Automation.de findet sich die Demonstration einer technischen Anwenung zum Thema.

  9. Mike J am 30. Mai 2006 #

    BunteSuppe.de – das Internet Mosaik, ist eine auf Ajax basierende Web 2.0 Applikation.

    Das Internet Mosaik besteht aus 1.000 bunten Mosaiksteinchen, die von allen Spielern gemeinsam verwendet werden, um einzigartige Kunstwerke zu erschaffen. Wenn jemand ein Steinchen bewegt, dann können die anderen Spieler diese Bewegungen sofort in Echtzeit auf ihren Bildschirmen sehen!

    In unserem Developer Blog verraten wir, wie wir das gemacht haben und alle unseren Ajax, Php, Mysql und JavaScript Tipps, Tricks und Techniken! http://www.buntesuppe.de/blog/

  10. Steffen am 8. Juli 2006 #

    Cool!

  11. Lumi am 8. August 2006 #

    Solange diese Technologien zum Nutzen für die Seitenbesucher eingesetzt werden ist ja alles in Ordnung. Sehr leicht lassen sich diese Funktionen nähmlich auch zum ausspionieren der Benutzerdaten verwenden.

  12. Erik am 18. September 2006 #

    Bin hier über G**gle gelandet, eigentlich was anderes gesucht.. Aber trotzdem danke für die nette Einführung :) Dann mal zurück zum Dominator …..

  13. Chris Wagner am 21. Februar 2007 #

    Ich recherchiere gerade zum Thema Ajax im Zusammenhang mit SEO und bin auf diese Info gestossen. Zwar nicht mehr die Neueste – aber gut erklärt. Besten Dank dafür.

  14. Reinhold am 6. März 2007 #

    Toller Beitrag – Vielen Dank.

  15. Steffene am 24. März 2007 #

    Guter Artikel,

    ich denke AJAX oder auch WEB2.0 braucht noch ein bissel. Man hat einer alten Idee einen neuen Namen gegeben und vermarktet dies nun.

    Aber jetzt beschäftigen sich mehr Leute damit – bald ist es vieleicht ein Standart wie html & Co.

Kommentarfunktion für diesen Artikel geschlossen.