AJAX ist keine Programmiersprache, sondern beschreibt das Konzept von drei Technologien:
DOM zur Manipulation von Web-Seiten, JavaScript zur Ereignisbehandlung und HTTP zum Nachladen von Daten.
AJAX steht für Asynchronous JavaScript and XML.
Vermutlich weiß jetzt niemand mehr als zuvor, doch es sollte immerhin klar geworden sein,
dass es ein Begriff aus der Informatik ist und man für dessen Verwendung weder das gleichnamige Waschmittel, noch den Fußballverein kennen muss.
AJAX ist keine Programmiersprache, sondern beschreibt das Konzept von drei Technologien:
DOM zur Manipulation von Web-Seiten,
JavaScript zur Ereignisbehandlung und
HTTP zum Nachladen von Daten.
Das Zusammenspiel dieser drei Technologien erlaubt dynamische Websites,
die durch asynchrone Verbindungen in einer interaktiven Umgebung beliebige Datenmengen bewältigen können.
Der Client schickt HTTP-Anfragen an den Server, ohne dass die eigentliche Seite neu geladen wird, oder der Benutzer währenddessen warten muss.
Das Document Object Model (kurz DOM) ist eine vom W3-Konsortium verabschiedete Norm für die Definition einer Baumstruktur und ihrer Traversierungsfunktionen in XML.
Mit DOM lässt sich also ein komplettes HTML Dokument in ein dynamisches Objekt binden.
Das Beispiel zeigt den DOM-Baum einer Standard-Web-Seite, mit Head- und Body-Bereich und mehreren Unterknoten.
In einer Client-Server-Architektur lässt sich DOM sowohl im Backend zur Dokumentengenerierung,
als auch und im Frontend zum dynamischen Manipulieren nutzen.
Um Verwechslungen vorzubeugen, sei an dieser Stelle gesagt, dass es sich bei JavaScript weder um Java handelt,
noch dass konzeptionelle Ähnlichkeiten zwischen den beiden Sprachen existieren.
JavaScript Code wird nicht für die Ausführung in einer VirtualMaschine kompiliert, sondern zur Interpretation im Klartext an den Browser übertragen.
Die Ausführung des Codes läuft somit nicht auf dem Webserver, sondern auf dem eigenen Rechner ab.
JavaScript läuft in einer Sandbox und schränkt darüber den Zugriff auf Netzwerkfunktionen oder das Dateisystem ein.
Skripte werden in das HTML-Dokument eingebettet, um auf Ereignisse zu reagieren oder die DOM Repräsentierung der Website dynamisch zu manipulieren.
Ein simples Beispiel ist der Aufruf der alert-Funktion.
|
HTML Code
|
1
2
3
4
5
6
7
|
<html>
<head><title>Test</title>
<script type="text/javascript">
alert("Hello World!");
</script>
</head><body>
</body></html>
|
Für die Programmierung mit JavaScript gibt es ein umfangreiches Online-Standardwerk unter
http://de.selfhtml.org.
HTTP ist ein zustandsloses Protokoll zur Datenübertragung zwischen zwei Computern.
Ein Computer formuliert eine Anfrage.
Der andere Computer beantwortet diese mit einem Inhalt.
Normale Websites laden in einem Rutsch.
Dazu formuliert der Client eine HTTP-Anfrage mit Hostnamen und Pfad.
Wird die URL
www.foo.com/ajax.html im Browser aufgerufen, wird die folgende Anfrage gesendet:
|
|
Source code
|
1
2
|
GET /ajax.html HTTP/1.1
Host: www.foo.com
|
Der Server beantwortet die Anfrage mit einem Status-Code und den angeforderten Daten:
|
|
Source code
|
1
2
3
4
5
6
7
8
9
10
11
|
HTTP/1.1 200 OK
Content-Type: text/html
<html>
<head>
<title>Hello World!</title>
</head>
<body>
Hello World!
</body>
</html>
|
Klickt man auf einen Link werden wieder und wieder neue HTTP-Anfragen geschickt und das komplette Dokument neu übertragen.
Das folgende Sequenzdiagramm beschreibt den Ablauf von Anfrage und Antwort.
AJAX erweitert dieses starre Konzept und erlaubt das asynchrone Senden und Empfangen von Daten über HTTP.
Das bedeutet, dass das Dokument nicht komplett geladen werden muss,
sondern es stattdessen während der Laufzeit nachgeladen werden kann.
Während des Ladevorgangs kann der Benutzer weiter mit der Seite interagieren,
da der Browser dafür sorgt, dass die asynchrone Anfrage in einem eigenen Thread abläuft.
Zudem ist keine Socketverbindung auf Ebene von TCP oder UDP notwendig.
Das Einfügen in den DOM Baum erledigt dann JavaScript.
So funktioniert das Zusammenspiel der drei Technologien:
Die Ajax-Engine reagiert auf einen Klick in der Benutzeroberfläche,
schickt daraufhin eine HTTP-Anfrage an den Server und sobald dieser antwortet,
wertet sie die Antwort aus und fügt die Informationen mit DOM-Manipulationen in das eigentlich Dokument wieder ein.
Tags
Abstract
