AJAX – Eine Einführung mit einem Praxisbeispiel

von: Paolo Vacilotto

WS 2005/2006

Inhaltsverzeichnis

1. Einleitung 4

2. Grundlagen 5

2.1 Begriffsbestimmung  5
2.2 Funktionsweise  5
2.3 Das XMLHttpRequest-Objekt  7
2.4 Vor- und Nachteile von AJAX 11

3. AJAX Frameworks  12

4. Anwendungsbeispiel 13

5. Fazit  17

Literaturverzeichnis  18


 

Abkürzungsverzeichnis

AJAX = Asynchronous JavaScript and XML
DHTML = Dynamic Hypertext Markup Language
[...]


 

1. Einleitung

Mit der steigenden kommerziellen Nutzung des Internets sind auch die Anforderungen der Benutzer an die zur Verfügung gestellten Webanwendungen gestiegen. Der Wunsch nach desktopähnlichen Programmen, die eine hohe Benutzerfreundlichkeit und geringe Ladezeiten bieten, ist größer den je. Professionelle Webauftritte wie zum Beispiel Google Suggest, Google Maps oder Flickr zeigen, dass man mit dem heutigen Stand der Technik diesem Wunsch gerecht werden kann.

In diesem Zusammenhang tauchen die Begriffe Web 2.0 und AJAX in den Medien immer häufiger auf. Web 2.0 bezeichnet die neue Art des Applikationsdesigns zur Erstellung interaktiver Webanwendungen und AJAX dient als Sammelbegriff für die dafür verwendeten Technologien und Standards. Im Folgenden wird die Verwendung von AJAX erläutert. Das erste Kapitel beschäftigt sich mit der Begriffsbestimmung und den Grundlagen zur Entwicklung einer interaktiven Webapplikation. Danach folgt ein Überblick über bereits existierende Frameworks, die den Programmierer in seiner Tätigkeit unterstützen können. In Kapitel vier wird die Umsetzung der Theorie anhand eines Anwendungsbeispiels verdeutlicht. Abschließend werden die gesammelten Erkenntnisse in einem Fazit zusammengefasst. Grundlagen

2. Grundlagen

2.1 Begriffsbestimmung

Der Begriff AJAX steht für Asynchronous JavaScript and XML.¹ Bekannt und populär wurde dieser Begriff durch Jesse James Garret.² Dieser verwendete ihn in seinem Aufsatz AJAX: A New Approach to Web Applications.³ Genauer betrachtet, beschränkt sich AJAX aber nicht nur auf diese beiden Technologien, es umfasst zudem weitere Programmiersprachen und Standards.4 Dazu gehören zum Beispiel XHTML, Cascading Stylesheets und das Document Object Modell.⁵ Es handelt sich somit nicht um eine Neuentwicklung, sondern nur um einen neuen Namen für bereits vorhandene und etablierte Technologien.

2.2 Funktionsweise

Klassische Webanwendungen bauen auf dem Prinzip auf, dass ein Benutzer über seinen Webbrowser eine Anfrage an einen Webserver schickt und auf dessen Antwort wartet.⁶ Eine Anfrage wäre zum Beispiel die Anforderung einer Webseite. Nach einer gewissen Wartezeit bekommt der Benutzer die Rückmeldung des Webservers in Form einer Fehlermeldung oder der gewünschten Webseite.⁷ Die Wartezeit setzt sich aus der Bearbeitungszeit der Anfrage durch den Webserver und der Ladezeit, die abhängig von der zur Verfügung stehenden Bandbreite ist, zusammen. Der Arbeitsfluss des Benutzers gerät bei zu langen Wartezeiten oder zu komplexen Aufgaben unter Umständen ins stocken.

AJAX-Anwendungen dagegen versuchen mit einer zusätzlichen Applikationsschicht, einer so genannten AJAX-Engine, den Schwächen von klassischen Webapplikationen entgegenzuwirken.⁸ Diese in JavaScript programmierte Schicht wird beim Aufruf einer Webseite vom Browser des Benutzers geladen.⁹ Benutzeraktionen können direkt clientseitig bearbeitet werden ohne dass jedes Mal eine neue Anfrage an den Webserver stattfinden und eine neue Seite geladen werden muss. So kann zum Beispiel eine Benutzereingabe in einem Formular direkt von der Engine geprüft und gegebenenfalls eine Fehlermeldung ausgegeben werden. Danach kann im Hintergrund eine Verbindung aufgebaut werden, die die Eingabe in einer Datenbank speichert, während gleichzeitig der Benutzer weitere Eingaben tätigt. Der Vorteil der hierdurch entsteht ist, dass nur noch die benötigten Daten zur Aktualisierung der Webseite nachgeladen werden und so die Serverlast reduziert wird. ¹⁰

[...]

1 Vgl. Garret (2005).

2 Vgl. o. V. (2006).

3 Vgl. o. V. (2006).

4 Vgl. Garret (2005).

5 Vgl. McLaughlin (2005).

6 Vgl. o. V. (2006).

7 Vgl. o. V. (2006).

8 Vgl. Garret (2005).

9 Vgl. Garret (2005).

10 Vgl. o. V. (2006).