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="400" height="380" src="//jsfiddle.net/pw_we1/33rw9j5n/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></html>
|style="vertical-align:top;padding-left:1em;"|
XMLHttpRequest
|}

==AJAX mit jQuery==
{|
|style="width: 22em;vertical-align:top;"| 
<html><iframe width="400" height="330" src="//jsfiddle.net/pw_we1/p1qpb9c9/embedded/js,html,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></html>
|style="vertical-align:top;padding-left:1em;"|
Alternative jQuery
|}

==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>}}