Websiteentwicklung: AJAX: Was ist AJAX


AJAX ist ein englisches Apronym für die Wortfolge „Asynchronous JavaScript and XML“, das man grob übersetzen kann mit: "asynchrones Nachladen von Javascript plus dynamische Manipulation der DOM". Das X steht dabei eigentlich für XML, in der Praxis ist es aber eher ein Platzhalter: die Daten werden in X verschiedenen Formaten vom Server zum Client geladen.

Der Begriff wurde von Jesse James Garrett geprägt, siehe [1].

Das erste eingängige Beispiel ist vielleicht Google Suggests.

Bei klassischen Web-Applikationen sieht der Ablauf so aus:

  • URL eintippen
  • Warten (Webformular wird geladen*)
  • Formular ausfüllen
  • Formular ausfüllen
  • Formular ausfüllen
  • Formular absenden
  • Warten (Antwort wird geladen*)

Nur bei den mit Sternchen markierten Stellen passieren Datenübertragungen zwischen Server und Client - während die UserIn das Formular ausfüllt also gar nicht. Mit AJAX ändert sich das:

  • URL eintippen
  • Warten (Webformular wird geladen*)
  • Formular ausfüllen (Liste nachladen*)
  • Formular ausfüllen (Feld speichern*)
  • Formular ausfüllen (Bild austauschen*)
  • Formular absenden
  • Warten (Antwort wird geladen*)

Die Technologien

Bearbeiten

AJAX vereinigt alle Technologien, die Sie in diesem Wikibook kennen gelernt haben:

  • Eine Seite wird per HTML und CSS dargestellt
  • Javascript setzt asynchrone XMLHttpRequests ab und definiert die Callback-Funktionen
  • Der Server empfängt eine HTTP-Anfrage und bearbeitet sie.
  • Per Javascript werden die Serverantworten mit Hilfe von DOM in die Seite integriert.

Entwicklungsumgebung für AJAX

Bearbeiten

Um erfolgreich AJAX-Applikationen zu entwickeln empfiehlt sich die Verwendung eines AJAX-fähigen Debuggers wie z.B. der Firebug-Erweiterung von Firefox:

Libraries und Frameworks für AJAX

Bearbeiten

Sie können AJAX auf verschiedenen Ebenen entwickeln:

Eigenbau
Sie schreiben selbst in Javascript. Dabei müssen Sie selbst die Browser-Unterschiede des XMLHTTPRequest-Objekts behandeln - nicht zu empfehlen
Clientseitige Bibliothek
Sie verwenden eine Bibliothek (engl. library), die das XMLHTTPRequest-Objekt kapselt, so dass Sie browserunabhängig arbeiten können. Sie schreiben auf der Webseite Javascript-Code und separat davon ein serverseitiges Programm. Beispiel: prototype.js
Framework mit Mapping
Sie verwenden ein Framework, das Javascript mit Ihrer bevorzugten serverseitigen Programmiersprache verbindet: Ein Javascript-Funktionsaufruf mit Javascript-Datentypen als Argumente wird z.B. automatisch in einen PHP-Funktionsaufruf umgesetzt (mit PHP-Datentypen als Argumente). Beispiel: Mybic für PHP, crVCL PHP Framework.
Framework, das Javascript generiert
Sie verwenden eine serverseitige Programmiersprache, die fertige AJAX-Komponenten anbietet, ohne dass Sie dafür Javascript programmieren müssen. Beispiel: Ruby on Rails.
Toolkit, das Javascript generiert
Sie verwenden clientseitig Ihre bevorzugte Programmiersprache (inkl. z.B. gewohnter IDE, Debug- und Testumgebung) und einen Compiler, der den Quellcode dieser Sprache in Javascript übersetzt. Beispiel: GWT (Google Web Toolkit)