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)
Links[Bearbeiten]
