Ajax ist das Zauberwort für moderne Webanwendungen, die scheinbar das Problem der zustandslosen HTTP-Verbindung zwischen Browser und Webserver überwinden. Webanwendungen, die auf Anwender wirken wie Desktop-Programme seines Computers. Egal ob Google Maps oder die persönliche Homepage bei Netvibes.com: was darin an Power steckt, ist im wesentlichen Ajax zu verdanken. Dabei ist Ajax nichts weiter als ein Objekt für die Programmiersprache ECMAScript bzw. JavaScript. Ein Objekt, das der clientseitigen Scriptsprache erlaubt, aus Anwenderereignisse wie Mausklicks im Hintergrund mit einem Webserver zu kommunizieren, PHP-Scripts, Java-Servlets oder andere Prozesse auf dem Server zu starten, auf diese Weise neue Daten von dort anzufordern oder vom Benutzer eingegebene Daten direkt auf dem Server auswerten oder speichern zu lassen. Und all das, ohne eine neue Webseite aufzurufen.
Das vorliegende Dokument erklärt die grundsätzliche Funktionsweise von Ajax und stellt zwei einfache Praxisbeispiele vor.
1 Allgemeine Fragen und Antworten
Ajax erfordert ein solides Vorwissen sowohl in JavaScript/JScript und dem Document Object Model (DOM), als auch in einer serverseitigen Web-Programmiersprache wie PHP, Perl oder Python. XML-, HTML- und CSS-Kenntnisse werden in vielen Fällen ebenfalls benötigt, sowie nicht selten auch Kenntnisse in Datenbank Management Systemen wie etwa MySQL. Und last but not least sind Kenntnisse über Einzelheiten des HTTP-Protokolls von Vorteil. Wirklich eine Menge Know-How also, weshalb die Ajax-Technologie auch eher im Profibereich angesiedelt ist. Lassen Sie sich dennoch nicht gleich abschrecken. Wenn Sie von den zuvor genannten Sprachen und Technologien wenigstens schon einmal gehört und eine ungefähre Vorstellung davon haben, werden Sie zumindest die prinzipielle Funktionsweise von Ajax verstehen.
1.1 -- Was ist Ajax?
1.2 -- Warum heißt Ajax so?
1.3 -- Wo kann ich Ajax in Aktion sehen?
1.4 -- Worin besteht die Ajax-Schnittstelle?
1.5 -- Wie wird Ajax standardisiert?
1.6 -- Welche Nachteile hat Ajax?
1.7 -- Wie sicher ist Ajax?
2 Ein einfacher Ajax-Kernel
Die Ajax-Schnittstelle selbst ist vergleichsweise überschaubar. Das XML-HTTP-Objekt lässt sich, wie bereits beschrieben, mit einer kleinen Browserweiche zuverlässig in allen modernen Browsern initialisieren. Die Aufgabe des Objekts besteht darin, HTTP-Requests an den Webserver abzusetzen und nachfolgende HTTP-Responses vom Webserver zu empfangen. Es bietet sich daher an, diese Aufgabe in eine kleine, wiederverwendbare Code-Bibliothek (die wir den „Ajax-Kernel“ nennen wollen) zu packen.
2.1 -- Funktionen des Ajax-Kernels
2.2 -- Eigenschaften und Methoden des XMLHTTPRequest-Objekts
3 Ajax-Beispiel: Formularüberprüfung
Ajax kann Anwendereingaben in Formularen server-seitig überprüfen, bevor das Formular abgesendet wird. So ist es möglich zu prüfen, ob etwa ein eingegebener Name, der in einer Datenbanktabelle auf dem Server eindeutig sein soll, dort bereits vorhanden ist oder nicht.
3.1 -- HTML-Formular
3.2 -- JavaScript zur Steuerung
3.3 -- Serverseitige Verarbeitung
4 Ajax-Beispiel: Tabellensortierung
Das Sortieren von Tabellen ist zwar mit etwas Aufwand auch direkt in JavaScript möglich. Doch dabei lauern zahlreiche Tücken. Wenn die Daten der Tabelle aus einer Datenbank kommen, bietet sich Ajax als Alternative an.
4.1 -- Tabellarische Daten aus einer Datenbank
4.2 -- Basis-Dokument (PHP)
4.3 -- Serverseitiges Sortier-Script
4.4 -- JavaScript zur Steuerung der Sortierung
5 Ajax-Beispiel: Shoutbox
In diesem Beispiel wollen wir zum einen demonstrieren, wie das Übertragen von Daten mit der POST-Methode funktioniert. Zum anderen soll diesmal die XML-Schnittstelle von Ajax zum Einsatz kommen. Eine Shoutbox erlaubt Besuchern einer Website, schnell und unkompliziert Anmerkungen zu hinterlassen, z.B. zu einem Produkt oder einem Review.
5.1 -- HTML-Dokument mit Shoutbox
5.2 -- Serverseitige Verarbeitung mit PHP
5.3 -- XML-Übersetzung in HTML
Weiterführendes zu Ajax
Professionelle Code-Frameworks und -Bibliotheken sowie ausgewählte Webadressen, die sich mit Ajax näher befassen.
6.1 -- Ajax-Bibliotheken und Frameworks
6.2 -- Offizielle Quellen
6.3 -- Deutschsprachige Quellen
6.4 -- Internationale Quellen