AJAX - Eine Einführung mit einem Praxisbeispiel


Hausarbeit, 2006
19 Seiten, Note: 2,0

Leseprobe

Inhaltsverzeichnis

Abkürzungsverzeichnis

Abbildungsverzeichnis

Tabellenverzeichnis

1. Einleitung

2. Grundlagen
2.1 Begriffsbestimmung
2.2 Funktionsweise
2.3 Das XMLHttpRequest-Objekt
2.4 Vor- und Nachteile von AJAX

3. AJAX Frameworks

4. Anwendungsbeispiel

5. Fazit

Literaturverzeichnis

Abkürzungsverzeichnis

Abbildung in dieser Leseprobe nicht enthalten

Abbildungsverzeichnis

Abbildung 1: Vergleich klassisches Prinzip und AJAX-Prinzip

Abbildung 2: Das HTML-Formular bei dem ersten Aufruf

Abbildung 3: Das HTML-Formular nach der Aktualisierung

Tabellenverzeichnis

Tabelle 1: Statuswerte einer Anfrage

Tabelle 2: Mögliche HTTP-Statuswerte

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.

2. Grundlagen

2.1 Begriffsbestimmung

Der Begriff AJAX steht für Asynchronous JavaScript and XML.1 Bekannt und populär wurde dieser Begriff durch Jesse James Garret.2 Dieser verwendete ihn in seinem Aufsatz AJAX: A New Approach to Web Applications.3

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.5 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.6 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.7 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.8 Diese in JavaScript programmierte Schicht wird beim Aufruf einer Webseite vom Browser des Benutzers geladen.9 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.10

Die folgende Abbildung zeigt die beiden unterschiedlichen Ansätze der Webentwicklung. Auf der linken Seite wird das klassische Prinzip dargestellt. Der Benutzer kann über die Benutzerschnittstelle, typischerweise ein Formular, in seinem Browser eine Aktion starten. Darauf hin wird eine Anfrage an den Webserver geschickt und auf dessen Antwort gewartet. Als Antwort erhält der Browser des Benutzers eine HTML-Seite.

Auf der rechten Seite der Abbildung wird die AJAX-Architektur verdeutlicht. Der Benutzer kann wie im klassischen Modell eine Aktion durchführen. Die AJAX-Engine reagiert auf diese Aktion, schickt gegebenenfalls eine Anfrage an den Webserver und verarbeitet dessen Antwort. Der Vorteil dieser Architektur liegt hierbei bei der Verarbeitung der Benutzeraktion. Diese erfolgt im Hintergrund, so dass der Anwender weiterhin neue Aktionen ausführen kann und sein Arbeitsfluss nicht durch Ladezeiten gestört wird.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1: Vergleich klassisches Prinzip und AJAX-Prinzip Quelle: In Anlehnung an o. V. (2006).

2.3 Das XMLHttpRequest-Objekt

Herzstück der im Hintergrund ablaufenden Kommunikation zwischen Browser und Webserver ist das JavaScript XMLHttpRequest-Objekt.11 Es ermöglicht ein asynchrones Bearbeiten von Benutzeraktionen, dass heißt während eine Benutzeraktion verarbeitet und eine Anfrage an den Webserver gestartet wird, kann der Anwender ungestört weiterarbeiten und muss nicht auf ein Neuladen der Seite warten.12

Bevor eine Transaktion mit dem Webserver erfolgen kann, muss ein Objekt des der Klasse XMLHttpRequest erzeugt werden.13 Dabei ist zu beachten, dass die am Markt erhältlichen Internetbrowser unterschiedliche Varianten verwenden.14 Der folgende JavaScript-Quellcode zeigt eine Möglichkeit dieses Problem zu umgehen beziehungsweise zu lösen.

Abbildung in dieser Leseprobe nicht enthalten

Zuerst wird die Variable xmlHttp für die spätere Referenzierung auf das Objekt deklariert. Danach wird in einem try-and-catch-Block versucht eine der beiden in Microsoft Browsern enthaltenen Varianten des XMLHttpRequest-Objektes zu erzeugen.15 Der Fall das beide Versuche fehlgeschlagen sind und die Variable xmlHttp immer noch den Wert false trägt, wird mit einer if-Abfrage abgefangen und die NichtMicrosoft-Variante des Objektes erzeugt.16

Für die Initialisierung einer Transaktion mit einem Webserver wird die Methode open() aufgerufen. Hierfür können bis zu fünf Parameter verwendet werden.17 Der erste Parameter gibt an in welchem Modus die Übertragung stattfinden soll.18 Es kann unter anderem zwischen den Werten GET und POST gewählt werden. Der zweite Parameter gibt die zu öffnende Datei an. Mit dem dritten Parameter wird festgelegt, ob die Transaktion synchron oder asynchron erfolgen soll.19 Standardmäßig ist dieser mit dem Wert true, also asynchron, vorbelegt.20

[...]


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

11 Vgl. Bergmann / Bormann (2005), S. 84.

12 Vgl. Bergmann / Bormann (2005), S. 85.

13 Vgl. Bergmann / Bormann (2005), S. 85.

14 Vgl. Bergmann / Bormann (2005), S. 87.

15 Vgl. McLaughlin (2005).

16 Vgl. Bergmann / Bormann (2005), S. 88.

17 Vgl. McLaughlin (2006).

18 Vgl. McLaughlin (2006).

19 Vgl. McLaughlin (2006).

20 Vgl. McLaughlin (2006).

Ende der Leseprobe aus 19 Seiten

Details

Titel
AJAX - Eine Einführung mit einem Praxisbeispiel
Hochschule
FOM Essen, Hochschule für Oekonomie & Management gemeinnützige GmbH, Hochschulleitung Essen früher Fachhochschule
Note
2,0
Autor
Jahr
2006
Seiten
19
Katalognummer
V56345
ISBN (eBook)
9783638510448
ISBN (Buch)
9783638752237
Dateigröße
537 KB
Sprache
Deutsch
Schlagworte
AJAX, Eine, Einführung, Praxisbeispiel
Arbeit zitieren
Paolo Leon Vacilotto (Autor), 2006, AJAX - Eine Einführung mit einem Praxisbeispiel, München, GRIN Verlag, https://www.grin.com/document/56345

Kommentare

  • Noch keine Kommentare.
Im eBook lesen
Titel: AJAX - Eine Einführung mit einem Praxisbeispiel


Ihre Arbeit hochladen

Ihre Hausarbeit / Abschlussarbeit:

- Publikation als eBook und Buch
- Hohes Honorar auf die Verkäufe
- Für Sie komplett kostenlos – mit ISBN
- Es dauert nur 5 Minuten
- Jede Arbeit findet Leser

Kostenlos Autor werden