Websiteentwicklung: AJAX: Was ist AJAX

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:

Firebug für 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)