AJAX und JSON

Wie bereits im Kapitel HTTP erwähnt handelt es sich bei HTTP um ein Request-Response-Protokoll. Jede einzelne Kommunikation ist abgeschlossen und besteht immer aus dem Aufbauen der Verbindung, dem Senden der Anfragedaten, dem Empfang der Ergebnisdaten und dem Schließen der Verbindung. Dieser Prozess benötigt Zeit die zum Großteil für die Übertragung und serverseitige Operationen aufgewendet wird. Eine Client-Anwendung bleibt an dieser Stelle nichts anderes übrig als zu warten.

Im Kapitel Javascript 2 wurde bereits das Problem von wartenden Prozessen erörtert und festgestellt, dass zu lange Wartezeiten den Browser blockieren. Mit der asynchronen Programmierung wurde aber auch eine Technik vorgestellt, die diesem Problem entgegentritt. AJAX (Asynchronous Javascript And Xml) nutzt genau diese Technik indem Callback-Funktionen zur Verarbeitung des Anfrageergebnisses asynchron ausgeführt werden.

AJAX mit Javascript

Javascript stellt für die HTTP-Kommunikation das XMLHttpRequest Objekt bereit. Mit der Funktion open wird die Verbindung initiiert und send löst das Senden des Request aus. Beide Funktionen akzeptieren diverse Parameter zur Steuerung der Kommunikation. Für die Reaktion auf Serverantworten stehen entsprechende Callback-Funktionen bereit.

AJAX mit jQuery

Mit jQuery werden Funktionen bereitgestellt, die das Javascript XMLHttpRequest Objekt kapseln und die gleiche Funktionalität bieten. Jedoch wird hier eine andere Syntax für den Aufruf verwendet, so dass dieser als eine einzige Funktion definiert werden kann. Sämtliche Aufrufparameter, inklusive der Callback-Funktionen, werden hier als Eigenschaften eines Objekts an die Funktion übergeben. Die möglichen Eigenschaftsnamen (Parameter) können in der jQuery-Dokumentation nachgelesen werden.

Serialisierung

Um auch Objekte, die sich ausschließlich im Arbeitsspeicher befinden, übertragen zu können, müssen diese serialisiert (in eine sequentiell übertragbare Struktur gebracht) werden. Für Javascript Objekte ist die Javascript Object Notation (JSON) eine solche Struktur. Mit JSON.stringify kann ein Objekt in eine JSON-Zeichenkette überführt werden. Diese kann nun, wie jede andere Zeichenkette, übertragen werden. Die Erzeugung eines Javascript Objekts aus der JSON-Zeichenkette erfolgt mit JSON.parse. JSON ähnelt der Literaldefinition von Objekten in Javascript (eingefasst in geschweifte Klammern werden die Eigenschaften des Objekts durch Komma getrennt als Name-Wert-Paare aufgelistet). JSON ist aber sehr viel strikter. Neben Notationsunterschieden sind z.B. rekursive Objektreferenzen nicht serialisierbar.

Projekt und weitere Übungen

1. Analysieren Sie das folgende Dokument mit Firebug.
   <!DOCTYPE html> <html> <head> <title>AJAX: readyState</title> <script type="text/javascript"> // Objekt erzeugen (ohne Polyfill) var xhr = new XMLHttpRequest(); function handleStateChange() { // aktuellen Status melden alert("xmlHttpObject.readyState = " + xhr.readyState + (xhr.readyState >= 3 ? " HTTP-Status = " + xhr.status : '')); } // Mit dem Laden des Dokuments ausführen window.onload = function() { // Handler hinterlegen xhr.onreadystatechange = handleStateChange; xhr.open('GET', 'bsp02.html'); // Anfrage abschicken xhr.send(null); } </script> </head> <body> <p>AJAX-readyState-Codes und HTTP-Status</p> </body> </html>
2. Arbeiten Sie den online-Beitrag über die Verarbeitung großer Datenmengen (im JSON-Format) durch und implementieren Sie die drei genannten Strategien. Bewerten Sie das jeweilige Ergebnis.
3. Verwenden Sie einen sniffer, z.B. Fiddler (kostenlos), um die Datenkommunikation zwischen Client und Server zu beobachten und zu interpretieren. Als HTTP-Debugging-Proxy platziert sich Fiddler zwischen dem Client und dem (entfernten) Server, der die Anfrage entgegennimmt. Da ist es ein Leichtes, ein- und ausgehenden HTTP-Verkehr zu protokollieren - und zu ändern.
4. Verwenden Sie den Geoservice von Google und stellen Sie damit interessante Daten tabellarisch zusammen.
5. Erschließen Sie die (komfortablen) Methoden der AJAX-Verarbeitung von jQuery und kommentieren Sie ein selbsterstelltes Beispiel mit JSON-Daten.
6. Bei Interesse: Verwenden Sie AtoCC zur Herstellung eines JSON-Parsers.