Web Engineering 1/AJAX und JSON
Aus ProgrammingWiki
Wiki-Quelltext dieser Seite.
<language>Javascript</language>
__NOTOC__
{{Ziele|
* Allgemeines Verständnis der Request-Response-Kommunikation
* AJAX: Konzept des asynchronen Datenaustauschen
* JSON: Alternatives Format zur Repäsentation von Objekten
* XHR: Umsetzung von AJAX in Javascript
* jQuery bietet einen komfortablen Aufsatz
|
* Senden von Anfragen und Akzeptieren von Antworten (am Client)
* Emfang von Anfragen und Versand von Antworten (am Server)
* Intuitiver Umgang mit GET und POST
* Objektserialisierung mit JSON und XML
|
* Node.js Server zur Verwaltung der Nutzerdaten
** Anmeldung und Registrierung von Nutzern mit Passwort
** Serverseitige Speicherung der Nutzerdaten
** Bei erfolgreicher Lösung des Sudoku, Speicherung der benötigten Zeit
* Sudoku-App zeigt nach Anmeldung die besten 10 eigenen Spielergebnisse
}}
Wie bereits im Kapitel [http://www.programmingwiki.de/Web_Engineering_1/HTTP 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 [http://www.programmingwiki.de/Web_Engineering_1/Javascript_2 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 <tt>XMLHttpRequest</tt> Objekt bereit. Mit der Funktion <tt>open</tt> wird die Verbindung initiiert und <tt>send</tt> 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.
{|
|style="width: 22em;vertical-align:top;"|
<html><iframe width="420" height="300" src="//jsfiddle.net/pw_we1/33rw9j5n/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></html>
|style="vertical-align:top;padding-left:1em;"|
* ''Analysieren Sie den Beispielaufruf. Machen Sie sich klar, wann der eigentliche Aufruf der Callback-Funktion erfolgt.''
* ''Untersuchen Sie den <tt>true</tt> Parameter an der Funktion <tt>open</tt> und erklären Sie seine Wirkung''
* ''Fügen Sie eine Fehlerbehandlung hinzu und testen Sie die verschiedenen Statuscodes''
* ''Probieren Sie auch Aufrufe mit Parametern (siehe [http://fixer.io/ fixer.io])''
* ''Übernehmen Sie das Beispiel in eine lokale Datei und platzieren Sie diese auf Ihrem Webserver''
* ''Legen Sie eine PHP Datei daneben und sprechen Sie diese über den <tt>XMLHttpRequest</tt> an.''
* ''Versuchen Sie auch POST Anfragen und versenden Sie verschiedene Arten von Parametern''
|}
==AJAX mit jQuery==
{|
|style="width: 22em;vertical-align:top;"|
<html><iframe width="400" height="290" src="//jsfiddle.net/pw_we1/p1qpb9c9/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></html>
|style="vertical-align:top;padding-left:1em;"|
* ''Fügen Sie eine Fehlerbehandlung hinzu und testen Sie die verschiedenen Statuscodes''
* ''Probieren Sie auch Aufrufe mit Parametern (siehe [http://fixer.io/ fixer.io])''
* ''Recherchieren Sie die jQuery Funktionen <tt>get</tt> und <tt>post</tt> und machen Sie Unterschiede und Gemeinsamkeiten mit <tt>ajax</tt> aus''
* ''Übernehmen Sie das Beispiel in ein lokale Datei und kommunizieren Sie mit dem oben erstellten PHP Skript''
* ''Installieren Sie [https://nodejs.org/ Node.js] implementieren Sie einen [https://nodejs.org/api/synopsis.html einfachen Webservice] der die Aufgaben des PHP Skripts übernimmt''
* ''Implementieren Sie im Node.js Server die Behandlung von POST Anfragen mit entsprechenden Parametern''
|}
==Serialisierung==
{|
|style="width: 22em;vertical-align:top;"|
<html><iframe width="400" height="380" src="//jsfiddle.net/pw_we1/4zpemo21/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></html>
|style="vertical-align:top;padding-left:1em;"|
* ''Experimentieren Sie mit dem Beispiel. Testen Sie die Grenzen der JSON-Serialisierung aus. Probieren Sie auch mit leeren Texten und identischen Namen''
* ''Machen Sie sich klar, dass JSON nicht nur ein Datenformat sondern auch Teil der Javascript Syntax ist.''
* ''Versuchen Sie ein Objekt einer selbst definierten "Klasse" zu serialisieren. Welches Problem entsteht hier und wie lässt es sich lösen?''
* ''Recherchieren Sie Möglichkeiten zur XML Serialisierung von Javascript Objekten. Testen Sie verschiedene Bibliotheken.''
* ''Erweitern Sie das AJAX Beispiel und nutzen Sie die Möglichkeiten der Serialisierung zur Übertragung von Objekten''
|}
==Projekt und weitere Übungen==
{{Projekt|
Stellen Sie Anmeldung auf Node.js um. Speichern Sie zusätzlich zu jedem Nutzer seine Ergebnisse (benötigte Zeit zur Lösung eines Sudokus) und geben Sie diese in der Webapplikation aus.
Beispiellösung <document>WE1-P8.zip</document>}}
# Analysieren Sie das folgende Dokument mit Firebug. <code id="5888b46a0dafc" readonly>
<!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>
</code>
# Arbeiten Sie den [http://developerblog.redhat.com/2014/05/20/communicating-large-objects-with-web-workers-in-javascript/ online-Beitrag] über die Verarbeitung großer Datenmengen (im JSON-Format) durch und implementieren Sie die drei genannten Strategien. Bewerten Sie das jeweilige Ergebnis.
# Verwenden Sie einen sniffer, z.B. [http://www.telerik.com/fiddler 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.
# Verwenden Sie den [https://maps.googleapis.com/maps/api/geocode/json?address=02826+G%C3%B6rlitz+Br%C3%BCckenstra%C3%9Fe+1 Geoservice] von Google und stellen Sie damit interessante Daten tabellarisch zusammen.
# Erschließen Sie die (komfortablen) Methoden der AJAX-Verarbeitung von jQuery und kommentieren Sie ein selbsterstelltes Beispiel mit JSON-Daten.
# Bei Interesse: Verwenden Sie AtoCC zur Herstellung eines JSON-Parsers.