AJAX und JSON

Aus ProgrammingWiki
Archivierte Version vom 2017-01-25T14:23:33+00:00. Aktuelle Version
WissenKönnenProjekt
  • 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

  • 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 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 XMLHttpRequest an.
  • Versuchen Sie auch POST Anfragen und versenden Sie verschiedene Arten von Parametern

AJAX mit jQuery

  • Fügen Sie eine Fehlerbehandlung hinzu und testen Sie die verschiedenen Statuscodes
  • Probieren Sie auch Aufrufe mit Parametern (siehe fixer.io)
  • Recherchieren Sie die jQuery Funktionen get und post und machen Sie Unterschiede und Gemeinsamkeiten mit ajax aus
  • Übernehmen Sie das Beispiel in ein lokale Datei und kommunizieren Sie mit dem oben erstellten PHP Skript
  • Installieren Sie Node.js implementieren Sie einen einfachen Webservice der die Aufgaben des PHP Skripts übernimmt
  • Implementieren Sie im Node.js Server die Behandlung von POST Anfragen mit entsprechenden Parametern

Serialisierung

  • 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

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 WE1-P8.zip
  1. Analysieren Sie das folgende Dokument mit Firebug.
  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.