Websiteentwicklung: AJAX: Was ist AJAX

Aus Wikibooks

Wechseln zu: Navigation, Suche

Websiteentwicklung

AJAX

Was ist AJAX

Inhaltsverzeichnis

1 Die Technologien
2 Entwicklungsumgebung für AJAX
3 Libraries und Frameworks für AJAX
4 Links

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*)

[Bearbeiten] Die Technologien

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

HTML + CSS baut Seite auf
Javascript: XMLHttpRequest asynchron absetzen, Callback-Funktionen angeben
Am Server: egal welche Sprache, bloß ein HTTP-Request
Javascript: Antwort einbauen mit DOM

[Bearbeiten] Entwicklungsumgebung für AJAX

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

Firebug für Firefox

[Bearbeiten] Libraries und Frameworks für AJAX

Sie können AJAX auf verschiedenen Ebenen entwickeln:

Eigenbau: Sie schreiben selbst das Javascript. Dabei müssen Sie selbst die Browser-Unterschiede des XMLHTTPRequest-Objekts behandeln - nicht zu empfehlen
Clientseitige Library: Sie verwenden eine Library die das XMLHTTPRequest-Objekt kapselt, so dass Sie browserunabhängig arbeiten können. Sie schreiben Javascript und serverseitiges Programm separat. 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 umgesetzt in ein PHP-Funktions-Aufruf mit PHP-Datentypen als Argumente. Beispiel: Mybic für PHP.
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)