Ajax

From macwrench
Jump to navigation Jump to search

Ajax - Asynchronous Javascript and XML

Was ist Ajax?

Ajax ist eigentlich keine neue sondern vielmehr die Zusammenführung mehrerer, häufig verwendeter Technologien und deren Nutzung für webbasierte Anwendungen. Das Ziel ist es dabei vereinfacht ausgedrückt, Web-Diensten eine ähnliche Oberfläche und Nutzungscharakteristik zu geben wie herkömmlichen Desktop-Anwendungen - und das möglichst für eine Vielzahl unterschiedlicher Endgeräte wie beispielsweise Web-Browser auf einem Computer, PDAs oder Mobiltelefonen.

Um auf einfache Weise solche dynamischen Inhalte plattformunabhängig und ressourcenschonend auf ein Endgerät zu bringen, bietet sich die Nutzung von Browsern und Verwendung von offenen und plattformübergreifenden Technologien wie HTML/WML, Javascript und XML an.

Der Knackpunkt bei Ajax-Anwendungen ist dabei, dass nicht - wie bei herkömmlichen Webseiten - immer der gesamte Seiteninhalt angefordert wird, sondern nur gerade benötigte Informationen - beispielsweise ein Adressbucheintrag. Dies erfolgt über Javascript mit Hilfe von XML. Die Kommunikation ist dabei also asynchron (d.h. das Endgerät bzw. die Anwendung ist während des Vorganges nicht blockiert) im Gegensatz zu normalen Webseiten; hier erfolgt die Kommunikation synchron, d.h. der Browser fordert eine Seite an und wartet auf deren Auslieferung durch den Webserver.

Vorgehensweise

Schematische Darstellung der Funktionsweise einer Ajax Anwendung

Ajax bietet also den großen Vorteil, dass nicht - wie bei der üblichen Verwendung von HTTP/HTML - bei jedem Aufruf die gesamte Seite geladen werden muss sondern nur derjenige Bereich, der gerade verwendet, angefordert oder verändert wurde. Dies wird durch eine zusätzliche clientseitige Abstraktionsschicht erreicht, wie in der Abbildung rechts ersichtlich wird. Dadurch werden lediglich die notwendigen Teile eines Document Object Tree übertragen und auf dem Client selber mit Hilfe von JavaScript in ein ausgabefähiges Format (HTML/CSS) umgesetzt.


Einschub: DOM
Die in einer Anwendung zu nutzenden Daten werden mit XML in Form einer baumartigen Struktur übertragen und verarbeitet. Das DOM bietet dabei eine Programmierschnittstelle, um auf die Daten in dieser Struktur zugreifen und sie verarbeiten zu können.


Die Anfragen werden dabei mit Hilfe von XMLHttpRequest abgesetzt, woraufhin serverseitig der notwendige XML-Baum (gem. DOM, Document Object Model) erzeugt und zum Client zurückgeschickt wird. Durch die damit verbundenen relativ kurzen Reaktionszeiten der Anwendung wird dem Benutzer das Gefühl vermittelt, es handele sich um eine lokale Applikation. Gleichzeitig wird durch die interne Datenrepräsentation in Form von XML als ein einheitliches, offenes und weitverbreitetes Format die Wiederverwendbarkeit und Umsetzung der Daten aus unterschiedlichsten Datenquellen ermöglicht. Für die serverseitige Datenverarbeitung existiert neben einer Vielzahl zur Verfügung stehender Java-APIs eine fast schon unermesslich große Auswahl verschiedener Hilfsprogramme und Bibliotheken für die Umsetzung von Daten aus objektorientierten oder relationalen Datenspeichern in ein XML-Format.

Um die Softwareentwicklung mit Ajax zu vereinheitlichen und neue Entwickler für diese Technologie zu gewinnen, wurde unter anderem von IBM, Borland, Novell und Oracle die Open-Ajax-Initiative ins Leben gerufen. Ziel des Projekts ist es, ein einheitliches Framework zu erstellen, das den Entwicklern innerhalb der Eclipse Entwicklerumgebung eine Reihe von Kommunikations-Werkzeugen, Frameworks und Widgets zur Verfügung stellt.

ein kleines Beispiel

Um diesen Ansatz zu veranschaulichen, soll hier zunächst eine einfache, kleine Beispielapplikation umrissen werden:

Auf einem Server wird ein Adressbuch zur Verfügung gestellt, das eine Vielzahl an Kontakten umfasst; diese werden durch eine serverseitige Applikation baumartig in Form einer XML-Datei zur Verfügung gestellt:

Adressbuch.xml
|
| - Michael Mustermann
|    | - Vorname: Michael
|    | - Nachname: Mustermann
|    ...
|    \ - E-Mail: michael.mustermann@example.com
...
|
\ - Michaela Musterfrau
     | - Vorname: Michaela
     | - Nachname: Musterfrau
     ...
     \ - E-Mail: michaela.musterfrau@example.com

Dafür kommen offene und freie Standards wie XML und das DOM (Document Object Model) zum Einsatz, mit deren Hilfe unterschiedlichste Daten plattformübergreifend dargestellt werden können. Unter MacOS X trifft man beispielsweise laufend auf solche XML-Dateien: von den Wörterbüchern (Dictionary.app) über die .plist Konfigurationsdateien bis hin zu System-Konfigurationen.

Die graphische Oberfläche wird unabhängig von diesen Daten erstellt und im Browser dargestellt, diese umfasst auch Skripte (Javascript) für die Verarbeitung der Kontaktdaten, z.B.:

  • einen Kontakt vom Server laden
  • einen Kontakt mit neuen Daten auf dem Server speichern
  • eine Liste von Kontakten anhand eines Suchmusters vom Server laden
  • etc.

Ein weiteres Skript sorgt dann beispielsweise dafür, dass die Kontaktdaten (via XMLHttpRequest) vom Server geladen und in der graphischen Oberfläche dargestellt werden. Das kann mit Javascript erfolgen, ohne dass die gesamte Seite neu geladen werden muss - daher spricht man hier auch von sogenannten "Aktiven Inhalten". Prinzipiell ist diese Vorgehensweise auch mit anderen Technologien wie Flash und ActionScript umsetzbar, mit Javascript steht jedoch ein offener, frei verfügbarer und verbreiteter Standard zur Verfügung.

In der Darstellung einer HTML-Webseite in Form eines Document Object Trees mit Hilfe des DOM wird diese Vorgehensweise deutlich; in dem mit Firefox mitgelieferten "DOM Inspector" lässt sich das beispielsweise recht einfach nachvollziehen (Menü Extras -> DOM Inspector).

Anwendungsbeispiele

Die bekanntesten Vertreter dieser Art von Webanwendungen sind die verschiedenen Google Dienste wie Google Maps, Calendar oder Google Suggest. Es sind aber auch Office-Produkte wie Ajax write (Textverarbeitung) und iRows (Tabellenkalkulation) in der Entwicklung.

Codebeispiele

more to come ...

Weiterführende Informationen

Mittlerweile existiert eine fast schon unüberschaubare Anzahl verschiedener Frameworks zur Erstellung von Ajax Anwendungen, daher kann die Liste unten im Artikel naturgemäß nicht vollständig sein und führt nur einige bekannte Lösungen auf.

Foundations & SIGs:

Wikis, News und Blogs:

Dokumentationen und Artikel:

iX Artikel:

Weitere Artikel zum Thema:

Frameworks: