Ajax Architektur

Wie bereits im Artikel „Ajax – Was ist überhaupt Ajax“ angesprochen, ist Ajax ein asynchroner Weg des Datenaustausches im World Wide Web. Um den Weg der neuen Technologie im Gegensatz zu der „alten“ Technologie zu veranschaulichen, wird im folgenden die Ajax Architektur erläutert.

konventionelle Webarchitektur

Um die Ajax Architektur zu verdeutlichen, wird zunächst die konventionelle Web-Architektur betrachtet.

Klassisches Modell einer Web-Anwendung

Das alltägliche surfen auf diversen Internetseiten erfordert durch neue Ereignisse (z.B. ein Mausklick auf einen Link) jeweils einen HTTP Request an den Webserver. Der Webserver muss den Request, also die Anfrage des Benutzers, verarbeiten, eine neue Website generieren und die Daten als HTML Dokument an dem Client zurücksenden. Bei diesem synchronen Prozess werden auch bereits vorhandene Daten, wie zum Beispiel das Menü oder der Kopfbereich, neu geladen und generiert.

Ajax Architektur

Die nächste Abbildung veranschaulicht eine Gegenüberstellung des klassischen Modells mit dem Ajax Modell. Im Ajax Modell wird deutlich, das die zusätzliche clientseitige Ajax-Engine entscheidet, ob es nötig ist eine HTTP-Anfrage an den Server zu senden.

[ad#co-3]

Gegenüberstellung der klassischen Webtechnologie mit der Ajax-Technologie

Ajax Anwendungen können Anfragen an den Webserver senden, ohne die vollständige Seite neu laden zu müssen. Bei diesem asynchronen Prozess werden lediglich Bestandteile des vorhandenen DOM Objektes via XMLHttpRequest neu geladen und durch eine Callback Funktion ersetzt. Hierbei spricht man von einem redraw einer Website. Zur näheren Veranschaulichung wird folgendes Beispiel betrachtet:

  1. Ein Webuser fragt eine gewünschte Website per URL an.
  2. Der angesprochene Webserver antwortet und liefert die gewünschte HTML Seite.
  3. Der Webbrowser des Users rendert die Seite und stellt sie ordnungsgemäß dar.
  4. Eine Aktion des Users, zum Beispiel ein Mausklick, löst eine asynchrone Anfrage an den Webserver aus, ohne die aktuelle Seite zu beeinflussen.
  5. Der Webserver sendet die angeforderten Daten an eine Callback Funktion des Clients zurück
  6. Der Webbrowser analysiert die neu erhaltenen Daten, aktualisiert den bereits vorhandenen DOM Baum und macht die Veränderungen sichtbar.

[ad#co-3]

Ein weiteres sehr bekanntes und unter anderem eines der ersten Ajax Webanwendungen ist Google Maps. Ein beliebiger Ort wird auf der Weltkarte gewählt und anschließend durch benutzerdefinierte Ereignisse gesteuert. So hat zum Beispiel ein Doppelklick zur Folge, dass in die Karte hinein gezoomt wird. Beim betätigen der linken Maustaste ist ein verschieben der Karte in alle Himmelsrichtungen möglich. Diese und andere Effekte veranschaulichen die Webdarstellung mit der Ajax Technologie.

Vorteile Ajax:

  • kostenlos, da freie Webtechnologien genutzt werden
  • Betriebssystem unabhängig
  • Webtraffic wird vermindert, da bereits vorhandene Daten nicht neu geladen werden müssen
  • geringere Wartezeiten
  • erhöhte Usability
  • Benutzer kann mit den verfügbaren Inhalten der Website weiterarbeiten, solange neue Daten angefordert werden
  • Ähnlichkeit zu herkömmlichen Desktopanwendungen

Nachteile Ajax:

  • JavaScript muss im Webbrowser aktiviert werden, daher keine Barrierefreiheit.
  • finanzieller Mehraufwand bei der Programmierung.
  • umfangreiche Tests jeglicher Browser erforderlich.
  • der „Zurück-Button“ oder das „Bookmarking“ können nur mit viel Aufwand implementiert werden.
  • da die Suchmaschinen keine JavaScript Seiten durchsuchen können, ist das Aufspüren erschwert