Web Engineering 1/AJAX und JSON

Wiki-Quelltext dieser Seite.

{{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;"|
Serialisierung
|}

{{Projekt|Beispiellösung <document>WE1-P8.zip</document>}}