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

Serialisierung

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.