AJAX. Die Technik für das Web 2.0


Referat (Ausarbeitung), 2014
19 Seiten, Note: 1,0

Leseprobe

Inhaltsverzeichnis

Abkürzungsverzeichnis

Abbildungsverzeichnis

Tabellenverzeichnis

Verzeichnis der Listings

1. Einleitung

2. Theoretische Grundlagen
2.1. (X)HTML
2.2. JavaScript
2.3. Serverseitige Verarbeitung
2.4. Geschichte von AJAX

3. AJAX in der Praxis
3.1. Einfaches Praxisbeispiel
3.2. Vorteile und Herausforderungen von AJAX

4. Fazit

Literaturverzeichnis

A. Anhang
A.1. Vorschau des Praxisbeispiels
A.2. HTML des Praxisbeispiels
A.3. PHP-Code des Praxisbeispiels

Abkürzungsverzeichnis

Abbildung in dieser Leseprobe nicht enthalten

Abbildungsverzeichnis

A.1. Vorschau des Praxisbeispiels

Tabellenverzeichnis

A.1. Datenbank des Praxisbeispiels

Verzeichnis der Listings

A.1. HTML des Praxisbeispiels

A.2. PHP-Code des Praxisbeispiels

1. Einleitung

Im Laufe der Jahre hat sich das Internet stark verändert. Konnten in den ersten Jahren noch nur Texte und Bilder übertragen werden, sind heutzutage dynamische Webapplikationen möglich, die sich kaum noch von Desktopanwendungen unterscheiden. So nutzen unzählige Menschen täglich Google und dessen Suchhilfe Google Suggest oder den E-Mail Dienst Gmail. Auch Soziale Netzwerke wie Facebook und Twitter sind zur Selbstverständlichkeit geworden. Um eine möglichst komfortable Nutzung der Dienste ohne spürbare Unterbrechungen und Wartezeiten zu gewährleisten, greifen die Hersteller hauptsächlich auf AJAX zurück, weshalb es als die Entwicklung schlechthin für das Web 2.0 bezeichnet werden kann.

Was AJAX ist, wie es funktioniert und was es dabei so besonders macht, soll in dieser Arbeit erklärt werden. Dabei geht es zunächst um die Theorie, die hinter AJAX steht. Hier werden die notwendigen einzelnen Technologien erklärt, die zum Einsatz von AJAX notwendig sind. Schließlich wird auf die Funktionsweise von AJAX und dessen verschiedene Formen eingegangen und an einem kurzen Praxisbeispiel gezeigt, wie diese Technologiesammlung im Detail funktioniert. Zuletzt wird ein Fazit gezogen, in dem Vor- und Nachteile aufgezeigt werden.

2. Theoretische Grundlagen

Obwohl häufig von AJAX als Technologie gesprochen wird, ist es eher eine Sammlung verschiedenster Technologien,1 die zusammengenommen ein unterbrechungsfreies Erlebnis im Web ermöglichen. Die einzelnen notwendigen Technologien werden im folgenden näher erläutert.

2.1. (X)HTML

Natürlich muss es zunächst eine Website geben, die dem Browser angezeigt werden kann und auf der es Elemente gibt, die mit AJAX bearbeitet werden können. Dazu wird HTML oder XHTML als Standardsprache eingesetzt, die der Browser dem Benutzer anzeigt. Problematisch hierbei ist, dass (X)HTML eine statische Sprache ist, die sich ohne eine weitere Technologie nicht dynamisch zur Laufzeit ändern lässt.2 Damit AJAX jedoch Elemente einer Website manipulieren kann, ist JavaScript nötig.

2.2. JavaScript

JavaScript ist das wichtigste Element der AJAX-Sammlung, da es ermöglicht, den Inhalt einer HTML-Seite zu ändern, während der Browser diese Seite schon anzeigt. Dies geschieht mit dem DOM, welches Knoten im HTML hinzufügen, verändern oder löschen kann.3 Der Vorteil dieser Schnittstelle ist, dass sich Inhalt ganz gezielt anhand ihrer ID oder ihres Namens bearbeiten lässt. Dies ermöglicht dem Entwickler eine sehr präzise Manipulation der Website abhängig von Ereignissen wie Klicks oder dem Auswählen eines Elements.

Außerdem ist das JavaScript bei AJAX dafür verantwortlich, dass Daten vom Server nachgeladen werden. Hier stellt JavaScript die Abstraktionsschicht dar, welche die Anfrage an den Server schickt, Daten entgegen nimmt und anhand des DOM in der Website verarbeitet. Verantwortlich für den Datenaustausch ist das XMLHttpRequest-Objekt, mit dem im Hintergrund (also asynchron) Anfragen an den Webserver gestellt werden können.4 Dabei ist zu beachten, dass Asynchronität nicht zwingend notwendig ist.

2.3. Serverseitige Verarbeitung

Da AJAX davon abhängt, dass der Server eine Antwort auf die Anfrage des JavaScript sendet, ist die serverseitige Verarbeitung der Anfragen der dritte wichtige Baustein im AJAX-Konstrukt. Der Server nimmt den Request entgegen, sucht z. B. anhand von PHP oder einer anderen serverseitig interpretierten Skriptsprache die angeforderten Daten aus einer Datenbank und gibt das Ergebnis in HTML, XML oder einem anderen Format zurück. In der simpelsten Form ist es möglich, dass das JavaScript nur eine Textdatei abfragt, die auf dem Server liegt. Die empfohlene Form ist jedoch das XML-Format, da dieses die höchste Flexibilität in der weiteren Verarbeitung durch JavaScript bietet.5

2.4. Geschichte von AJAX

AJAX wurde zum ersten Mal von Jesse J. Garrett im Jahr 2005 öffentlich erwähnt,6 allerdings gab es den Ansatz schon vorher. So nutzte Microsoft die dazu nötigen Technologien bereits 1998 für das Outlook Web Access. Das dazu notwendige Objekt XMLHttpRequest wurde in den Microsoft Exchange Server und den Internet Explorer 5 integriert.7 Trotzdem kam dieser Ansatz außerhalb von Microsoft nur selten zum Einsatz, bis Google mit Google Suggest, Gmail und weiteren Diensten begann, AJAX weiterzuverfolgen.8 Mittlerweile gehört AJAX zum Standard im Internet.

3. AJAX in der Praxis

Wie schon erwähnt, setzte Microsoft als erstes Unternehmen AJAX bzw. das XMLHttpRequest- Objekt ein. Erst Jahre später folgten weitere große Unternehmen. Allen voran ging Google mit Google Suggest und Gmail, doch auch weitere Unternehmen implementierten AJAX in ihre Webdienste. Mittlerweile kommt kaum eine aktuelle Webanwendung ohne AJAX aus.

3.1. Einfaches Praxisbeispiel

Die Funktionsweise in der Praxis soll anhand einer eigenentwickelten Website erklärt werden. Eine Vorschau der entwickelten Website ist unter A.1 auf Seite ii zu finden. Auf der Website gibt eine Auswahl von Namen, die gewählt werden kann. Der HTML-Quelltext ist zu finden unter A.2 auf Seite iii. Der Inhalt der CSS-Datei wurde weggelassen, da er keine Relevanz für die Funktion der Website hat. Wie zu erkennen ist, hat das select-Tag der Auswahlliste das Attribut onchange, mit dem die Funktion showDetails aufgerufen und der Parameter this.value übergeben wird, welcher den aktuell ausgewählten Nachnamen der Auswahlliste bezeichnet. Die aufgerufene Funktion ist im script-Bereich der Website im head des HTMLDokuments beschrieben.

Diese Funktion prüft nun anhand des übergebenen Wertes, ob tatsächlich ein Name ausgewählt wurde. Falls dies der Fall ist, speichert sie den HTML-Absatz mit der ID details in der Variable paragraph und erstellt ein XMLHttpRequest-Objekt. Dieses Objekt wird mit xmlhttp.open- ("GET","getdetails.php?q="+name,true); konfiguriert und mit xmlhttp.send(); an den Webserver gesendet. Die Anfrage richtet sich demnach an die getdetails.php-Datei mit einer GET-Variable q, welche den Nachnamen enthält.

Da die angefragte Datei ein PHP-Skript ist, verarbeitet der Webserver zunächst das Skript, bevor es zur Ausgabe kommt. Der Quelltext des PHP-Skriptes ist zu finden unter A.3 auf der Seite v. Hier ist zu erkennen, dass das Skript zunächst prüft, ob die GET-Variable q übergeben wurde. Ist das der Fall, stellt PHP eine Verbindung mit einem MySQL-Server her und fragt den Server nach dem Nachnamen ab. Die dabei genutzte Datenbank ist unter A.4 auf Seite vii abgebildet. Vor der SQL-Abfrage kommt es noch zur Prüfung und möglichen Veränderung des Namens um einen Angriff durch SQL-Injection zu verhindern. Das Ergebnis der Abfrage wird dann in einer HTML-Tabelle zusammengefügt und per echo $html ausgegeben. Diese Ausgabe erhält das JavaScript der Website als Antwort zurück. Hier überwacht der Event- Handler onreadystatechange das XMLHttpRequest-Objekt. Der Einfachheit halber wird hier nur auf den Status 4 eingegangen, welcher besagt, dass die Anfrage abgeschlossen ist und der Server eine Antwort geliefert hat. Ist dieser Fall eingetroffen, und der HTTP-Status lautet 200 (entspricht der erfolgreichen Verarbeitung der Anfrage), wird die Antwort des Webservers in das Element paragraph geschrieben.

[...]


1 Vgl. [Garrett 2005]

2 Vgl. [Darie u. a. 2007, S. 127 f.]

3 Vgl. [Wenz 2008, S. 349 ff.]

4 Vgl. [Darie u. a. 2007, S. 53]

5 Vgl. [Darie u. a. 2007, S. 25]

6 Vgl. [Garrett 2005]

7 Vgl. [Steyer 2006, S. 33]

8 Vgl. [Steyer 2006, S. 34]

Ende der Leseprobe aus 19 Seiten

Details

Titel
AJAX. Die Technik für das Web 2.0
Hochschule
Private Fachhochschule für Wirtschaft und Technik Vechta-Diepholz-Oldenburg; Abt. Vechta
Note
1,0
Autor
Jahr
2014
Seiten
19
Katalognummer
V286069
ISBN (eBook)
9783656864547
ISBN (Buch)
9783656864554
Dateigröße
539 KB
Sprache
Deutsch
Schlagworte
AJAX, Web, 2.0, Technologie, Internet, Dynamisch, PHP, Programmierung, Informationsmanagement
Arbeit zitieren
Sven Schulter (Autor), 2014, AJAX. Die Technik für das Web 2.0, München, GRIN Verlag, https://www.grin.com/document/286069

Kommentare

  • Noch keine Kommentare.
Im eBook lesen
Titel: AJAX. Die Technik für das Web 2.0


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