Web Engineering 1/AJAX und JSON

Aus ProgrammingWiki
Wiki-Quelltext dieser Seite.
<language>Javascript</language>
{{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
}}

==AJAX mit Javascript==
{|
|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 erfolgt.''
* ''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|
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.
Web Engineering 1/AJAX und JSON

Suche
