Ajax / Funktionsprinzip

© 2006 Tim Baumgarten

Funktionsprinzip

Die Kommunikationsmodelle

Bisher ist der typische Ablauf beim nutzen des Webs:

• Nutzer interagiert mit der Benutzeroberfläche
• Browser stellt HTTP-Anfrage an den Server
• Nutzer wartet
• Server antwortet mit HTML und CSS Daten
• Browser stellt die neue Seite dar

Mit Ajax verändert sich dieser Ablauf folgendermaßen:

• Nutzer interagiert mit der Benutzeroberfläche
• Ajax-Engine (JavaScript Eventhandling) wird aktiv
• Ajax-Engine (XMLHttpRequest) stellt HTTP-Anfrage an den Server
• Nutzer wartet kann kann die Seite weiterbenutzen
• Server antwortet mit XML oder JSON Daten
• Ajax-Engine (JavaScript + Document Object Model) verarbeitet die Daten und fügt sie an entsprechender Stelle in die Seite ein

Synchrone / Asynchrone Datenübertragung

Auf dem Zeitstrahl wird der Unterschied deutlich, im bisherigen Model des "Surfens" im Web vergeht ein gewisser Teil der Zeit des Nutzers mit warten auf eine neue Webseite vom Server.

Bei Ajax-Anwendungen folgt auf Benutzerinteraktion nicht zwingend eine Server Abfrage. Z.B. wenn nur DHTML Funktionen wie Drag'n Drop benutzt werden. Da Abfragen im Hintergrund stattfinden, bleibt die die Seite normal weiter benutzbar.

Beispielanwendung

Parallel zur Erstellung dieses Seminars wurde eine Ajax-Beispielanwendung entwickelt, welche die meisten angesprochenen Themen aufgreift und aufzeigt.

Bei der Benutzung sollte man einige Dinge ausprobieren bzw. beachten:

• Vergleich Javascript aktiviert / deaktiviert
• Vergleich verschiedener Übertragungformate
• Lösungen des Bookmark / Zurückbutton Problems
• Trennung von Javascript und HTML
• Einsatz eines Frameworks (prototype.js) um die Arbeit zu erleichtern

Zu beachten ist dabei, die JSON Erstellung dauert mit PHP länger als das Erzeugen der XML-Daten, trotzdem ist die Übertragung und Verarbeitung im Client von JSON schneller. Weiterhin funktioniert im IE der Zurückbutton trotz der Fragmentbezeichner-Lösung nicht.