AJAX und JSON

Aus ProgrammingWiki

Wissen	Können	Projekt
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 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 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 XMLHttpRequest Objekt bereit. Mit der Funktion open wird die Verbindung initiiert und send 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.

Analysieren Sie den Beispielaufruf. Machen Sie sich klar, wann der eigentliche Aufruf der Callback-Funktion erfolgt. Untersuchen Sie den true Parameter an der Funktion open 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 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

Hinweis zum Missbrauch von Access keys, wie sie beispielsweise für fixer und Geoservice erforderlich sind

Prinzipiell ist die Access-key-Technologie ein Abrechnungsmodell, um einem Entwickler für die angefallene Nutzung eines Dienstes eine Rechnung stellen zu können, wenn es zu viel wird.
Wenn man in das html schaut, steht der access key häufig sichtbar im code. Das ist systembedingt bei rich client Applikationen nötig. Deshalb beschränkt man dann beim anderen Dienst den key auf einen bestimmten referrer. Somit akzeptiert die Gegenstelle die Anfrage nur, wenn sie von einer vorher definierten Domain kommt. Der Browser schickt bei jeder Anfrage den referrer mit.
Den refferer kann man auch faken, somit ist das nicht 100% sicher, aber man kann den key nicht einfach in einer andere Webapplikation verwenden, wo ganz normale Leute mit ihrem normalen Browser drauf gehen. Damit reicht das in der Regel, um Missbrauch zu verhindern.

AJAX mit jQuery

Mit jQuery werden Funktionen bereitgestellt, die das Javascript XMLHttpRequest Objekt kapseln und die gleiche Funktionalität bieten. Jedoch wird hier eine andere Syntax für den Aufruf verwendet, so dass dieser als eine einzige Funktion definiert werden kann. Sämtliche Aufrufparameter, inklusive der Callback-Funktionen, werden hier als Eigenschaften eines Objekts an die Funktion übergeben. Die möglichen Eigenschaftsnamen (Parameter) können in der jQuery-Dokumentation nachgelesen werden.

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

Weiterführende Inhalte

XMLHttpRequest mit PHP und JSON - Zeigt die Verwendung der modernen XMLHttpRequest mit einem PHP-Backend und wie man mit JSON-Antworten arbeitet.

XMLHttpRequest - Beschreibung des XMLHttpRequest-Standards, API-Dokumentation und Beispiele

JSFiddle mit Fetch - Beispiel für die Anwendung von der auf einem Promise basierenden fetch-Methode

Serialisierung

Um auch Objekte, die sich ausschließlich im Arbeitsspeicher befinden, übertragen zu können, müssen diese serialisiert (in eine sequentiell übertragbare Struktur gebracht) werden. Für Javascript Objekte ist die Javascript Object Notation (JSON) eine solche Struktur. Mit JSON.stringify kann ein Objekt in eine JSON-Zeichenkette überführt werden. Diese kann nun, wie jede andere Zeichenkette, übertragen werden. Die Erzeugung eines Javascript Objekts aus der JSON-Zeichenkette erfolgt mit JSON.parse. JSON ähnelt der Literaldefinition von Objekten in Javascript (eingefasst in geschweifte Klammern werden die Eigenschaften des Objekts durch Komma getrennt als Name-Wert-Paare aufgelistet). JSON ist aber sehr viel strikter. Neben Notationsunterschieden sind z.B. rekursive Objektreferenzen nicht serialisierbar.

Experimentieren Sie mit dem Beispiel. Testen Sie die Grenzen der JSON-Serialisierung aus. Probieren Sie auch mit leeren Texten und identischen Namen 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. Vergleichen Sie XML und JSON bezüglich ihres Nutzens zur Serialisierung von Objekten. Welche Vor- und Nachteile gibt es? Erweitern Sie das AJAX Beispiel und nutzen Sie die Möglichkeiten der Serialisierung zur Übertragung von Objekten

Validierung

Sollen serialisierte Daten von externen Quellen deserialisiert werden, ist es ratsam diese vorher zu validieren, also deren korrekte Struktur zu verifizieren. Für XML-Daten gibt es dazu die XML Schema Definition (XSD). Es handelt sich hierbei um eine Beschreibung der Struktur eines gültigen XML-Dokuments. Neben Vorgaben zu den möglichen Elementen, Attributen und Inhalten sind auch Angaben zur Anzahl der Vorkommen und zu Verschachtelungsmöglichkeiten enthalten.

Eine Schema-Definition ist grundsätzliche in ein <xs:schema> Element eingefasst mit dem zugehörigen xmlns:xs Attribut zur Definition der zu verwendenden Schema-Spezifikation. Es kann zur Festlegung von Spezifikationsversionen und Namespaces um verschiedene Attribute erweitert werden. Mit <xs:element name="xxx"> wird das einmalige Vorhandensein eines Elements xxx erwartet. Mit dem Attribut type kann bei einfachem Inhalt der Typ des Inhalts festgelegt werden. Die Attribute minOccurs und maxOccurs ermöglichen es, die Anzahl der Vorkommen des Elements zu definieren. Werden am Element Attribute erwartet, so können diese mit <xs:attribute name="xyz"> im Inneren der Elementdefinition angegeben werden. Komplexe Elemente können mit <xs:complexType name="yyy"> definiert werden. Unterelemente werden hier, je nach Relevanz von Reihenfolge und Anzahl des Auftretens, in <xs:sequence>, <xs:choice> oder <xs:all> eingefasst. Die Struktur des Schemas entspricht dabei der erwarteten Struktur des XML-Dokuments.

Neben diesen grundlegenden Spezifikationen gibt es viele weitere Möglichkeiten. Dazu zählen Restriktionen für einfache Elemente (wenn. z.B. nur bestimmte Zahlen oder bestimmte Wörter ermöglicht werden sollen), Referenzierungen (um wiederkehrende Elemente nicht mehrfach definieren zu müssen) und Erweiterungen (ein vorhandenes Element wird um zusätzliche Spezifikationen erweitert).

Schema (XSD)	Inhalt (XML)
<?xml version="1.0" encoding="UTF-8" ?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs:element name="tier"> <xs:complexType> <xs:sequence> <xs:element name="art" type="xs:string"/> <xs:element name="name" type="xs:string"/> <xs:element name="alter" type="xs:integer"/> </xs:sequence> <xs:attribute name="id" type="xs:integer"/> </xs:complexType> </xs:element> </xs:schema>	<?xml version="1.0" encoding="UTF-8"?> <tier id="123456"> <art>Hund</art> <name>Waldi</name> <alter>9</alter> </tier>
var res = validateXML({ xml: xml.getValue(), schema: xsd.getValue(), arguments: ["--noout", "--schema", "XSD", "XML"] }); console.log(res.toString()); ausführen

• Experimentieren Sie mit dem Beispiel. Ändern Sie es, sodass die einzelnen Elemente art, name und alter in beliebiger Reihenfolge angegeben werden können.
• Ermöglichen Sie, dass mehrere Tiere in XML definiert werden können und sichern sie ab, dass jedes Tier eine id hat
• Stellen Sie sicher, dass nur Altersangaben größer oder gleich 0 definiert werden können
• Ändern Sie die Schema-Definition, so dass nur die Tierarten Hund, Katze und Vogel verwendet werden dürfen
• Stellen Sie sicher, dass jedes Tier eine unterschiedliche id hat
• Zu jedem Tier sollen dessen Tierarztbesuche erfasst werden. Bedenken Sie, dass Tierarztbesuche beliebig häufig stattfinden können. Das Datum des Arztbesuches soll als Attribut definiert werden und der Grund als freier Text innerhalb des entsprechenden Elements
• Anstelle des allgemeinen Tags tier sollen für jede Art spezielle Tags genutzt werden. Benutzen Sie die tier-Spezifikationen für die neuen Elemente hund, katze und vogel. Prüfen Sie ob die Sicherstellung der eindeutigen id noch funktioniert und passen Sie diese ggf. an.

Projekt und weitere Übungen

1. Analysieren Sie das folgende Dokument mit Firebug.

   <!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>

2. Arbeiten Sie den online-Beitrag über die Verarbeitung großer Datenmengen (im JSON-Format) durch und implementieren Sie die 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.