5. AJAX und Websockets

Transkript

1 5. AJAX und Websockets Teil 1: AJAX - Asynchronous JavaScript and XML XMLHttpRequest-Klasse Verschiedene Wege zum dynamischen Laden von Informationen Übertragung von Text vs. XML JSON Übertragungsmodell Teil 2: Websockets Protokoll: HTTP und Upgrade Clientseitige Schnittstellen Beispiel für serverseitige Programmierung von Websockets (für PHP) 1

2 Bislang: Webinhalte laden durch Eingabe einer URL Klicken einer Link-URL Absenden eines Formulars (GET, POST) HTTP- Protokoll Webbrowser HTTP-Interaktionen (1) Gewünschte Erweiterung: Interaktives Nachladen von Webinhalten, ohne jedes mal eine neue Webseite zu laden. Beispiele: Mausklick auf Bereich Nachladen eines Details Nachladen von Hilfe- und Erklärungstexten Formulare mit Input- Webserver Feldern, die nur in Spezialfällen erscheinen Immer Aufbau einer neuen Webseite. 2

3 HTTP-Interaktionen (2) Interaktives Anzeigen und dynamischer Webseitenaufbau sind bereits durch JavaScript möglich. Grenzen von JavaScript (ohne die nachfolgende Erweiterung): Zugriff auf Dateien der Client-Seite nicht möglich Zugriff auf Dateien auf Serverseite bislang auch nicht möglich Grenzen von PHP: Zugriff auf Dateien und Datenanken ist immer mit dem vollständigen Laden einer PHP-Seite verbunden Benötigt wird: Nachlade-Funktion innerhalb Client-Script (JavaScript), die wie der Browser selbst HTTP-Protokollaktionen auslösen und Ergebnisse entgegen nehmen kann. 3

4 XMLHttpRequest-Klasse Neue JavaScript-Klasse XMLHttpRequest Browser Webseite mit Javascript XMLHttpRequest- Objekt Web-Server ggf. mit Scripting 4

5 AJAX Technologie Asynchroneous JavaScript and XML (AJAX) ermöglicht Webseiten, die sich wie lokale Anwendungs-GUIs verhalten Teilinhalte können verändert bzw. aktualisiert werden, ohne die ganze Webseite neu zu laden Schnelleres Reagieren auf Nutzerinteraktionen, da weniger Daten übertragen werden Übertragen von eingegebenen Nutzerdaten an den Server (ohne Neuladen der Seite, wie beim alten klassischen Formular-Submit) Asynchrone Kommunikation mit dem Webserver, d.h. von der Oberfläche im zeitlichen Verhalten entkoppelt 5

6 XMLHttpRequest Ein Minimalbeispiel (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="de" lang="de"> <head> <title>javascript und HTTP</title> <script type="text/javascript"> //<![CDATA[ window.onload = function() { var req = (window.xmlhttprequest)? new XMLHttpRequest() : ((window.activexobject)? new ActiveXObject("Microsoft.XMLHTTP") : false ); req.open("get", "dyntext.txt", true); req.onreadystatechange = function() { if (req.readystate==4) { if (req.status == 200) // Fortsetzung auf der folgenden Seite 6

7 XMLHttpRequest Ein Minimalbeispiel (2) Fortsetzung: { var d = document.getelementbyid("dyntext"); d.innerhtml = req.responsetext; } } } Das Skript setzt voraus, dass auf dem req.send(null); Server eine Datei dyntext.txt } vorhanden ist. //]]> Deren Inhalt wird in die Webeseite </script> eingebaut. </head> <body> <div id= dyntext"></div> // hier erscheint der nachgeladene Text </body> </html> 7

8 XMLHttpRequest - Klasse Verschiedene Klassen in Browsern, je nach Plattform (Microsoft, Gecko-Browser, u.a.) Instanziierung der Klasse für Gecko 1 -basierte Browser (Mozilla, Firefox, Thunderbird): var req = new XMLHttpRequest(); Instanziierung der Klasse für Microsoft-basierte Browser (IE): var req = new ActiveXObject( Microsoft.XMLHTTP ); Zum Teil werden ausgewählte Versionen des XMLHTTP-Objekts benötigt: var req = new ActiveXObject( Msxml2.XMLHTTP.5.0 ); 1 Gecko ist eine s.g. Rendering Engine, die von der Mozilla Foundation entwickelt wurde 8

9 XMLHttpRequest - Instanziierung (1) Benutzung des?-operators in Zuweisungen: var abs_x = (x>0)? x : x*(-1); rechte Seite wenn nicht erfüllt Bedingung rechte Seite wenn erfüllt Versuch, die geeignete Klasse zu instanziieren: var req = (window.xmlhttprequest)? new XMLHttpRequest() : ((window.activexobject)? new ActiveXObject( Microsoft.XMLHTTP ): false ); Damit laufen Ajax-Webseiten sowohl in Microsoft, als auch in Gecko- Browsern 9

10 XMLHttpRequest - Instanziierung (1) try-catch Kaskade zum erreichen der bestmöglichen AJAX- Unterstützung: <script type="text/javascript"> //<![CDATA[ if (window.activexobject) { try { req = new ActiveXObject( Msxml2.XMLHTTP.5.0 ); } catch (e) { try { req = new ActiveXObject( Msxml2.XMLHTTP.4.0 ); } catch (e) { try { req = new ActiveXObject( Msxml2.XMLHTTP.3.0 ); } catch (e) { try { req = new ActiveXObject( Microsoft.XMLHTTP ); } catch (e) { req = false; } }}} } 10

11 XMLHttpRequest Instanziierung (2) try-catch Kaskade über Array: <script type="text/javascript"> //<![CDATA[ var msxml = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP ]; if (window.activexobject) { for (var i=0; i<msxml.length; i++) { try { ret = new ActiveXObject(msxml[i]); break; } catch(e) {} } } //]]> </script> 11

12 Wege zum dynamischen Laden (1) Laden einer Textdatei über XMLHttpRequest: Funktion open( GET, dateiname.txt, ) Entnahme des Inhalts aus dem Element responsetext Laden einer XML-Datei: Funktion open( GET, dateiname.xml, ) Entnahme der Daten aus responsexml Traversal des DOM-Trees des XML-Objekts und Einbauen der Informationen in die Webseite (siehe loadxmlobj.js aus den Übungen) Laden von HTML-formatierten Inhalten aus einer Datei: Inhalte als Text anfordern, z.b. open( GET, info.txt, ) Einfügen der formatierten Inhalte aus responsetext als innerhtml bereits existierender Elemente in der Webseite 12

13 Wege zum dynamischen Laden (2) Laden einer Skriptdatei über XMLHttpRequest: Funktion open( GET, dateiname.php, ) Bei Anforderung des Objekts kann serverseitig z.b. die Abfrage von Informationen aus einer Datenbank, oder das Lesen von Daten aus einer Datei und eine anschließende Formatierung erfolgen. Mit AJAX wird oft eine Kombination von server- und client-seitigem Scripting realisiert. 13

14 Methoden XMLHttpRequest / ActiveXObject (1) Ausgangspunkt ist das Request-Objekt req, das wie vorab beschrieben instanziiert wurde. Es existiert eine Schnittmenge von Methoden die gleich arbeiten req.setrequestheader(key,value) erlaubt das Setzen eines optionalen Request Headers req.open(method, url, [syncflag, username, password]) der Request wird an die gewünschte Zieladresse (url) gerichtet. Die Methode kann GET, POST, HEAD, PUT, DELETE sein. Das syncflag gibt an, ob synchron (false) oder asynchron (true, Standardwert) gearbeitet werden soll. Eine Authentifikation mittels username, password ist wäre bei den Methoden PUT oder DELETE notwendig. 14

15 Methoden XMLHttpRequest / ActiveXObject (2) Request-Objekt Methoden (Fortsetzung): req.send(body null) erst mit send erfolgt das Absenden des Requests, danach kann unmittelbar die Antwort des Servers folgen, sofern eine asynchrone Übertragung vereinbart wurde. Im body können Nutzerdaten an den Server übertragen werden. req.abort() beendet den aktuell ausgelösten Request req.getresponseheaders() erzeugt eine Liste aller vorhandenen Header als key-value-paare in einem String req.getresponseheader(name) gibt den Wert des durch name angefragten Headers zurück 15

16 Methoden XMLHttpRequest / ActiveXObject (3) Request-Objekt Methoden (Fortsetzung): Ein gültiger Request muss mindestens mit den Methoden open() und send() vorbereitet werden. Beispiel: var req = new XMLHttpRequest; req.open( GET, beispiel.xml ); req.send(null); Bei asynchroner Übertragung wird das Ergebnis von einer Funktion ausgelesen, die als req.onreadystatechange angemeldet wurde. Siehe Eigenschaften. 16

17 Eigenschaften XMLHttpRequest / ActiveXObject (1) Request-Objekt-Eigenschaften: Auch hier gibt es eine funktional gleich gestaltete Schnittmenge req.readystate gibt den Status des Requests wieder: 0 unititialized (noch kein open() ausgeführt) 1 loading (wird gestartet, aber noch nicht abgeschickt durch send()) 2 loaded (bereit durch send() abgeschickt, aber Antwort steht noch aus) 3- interactive (die Übertragung durch den Server läuft und Teile der Antwort sind bereits in responsetext bzw. responsexml verfügbar) 4 complete (alles vollständig übertragen) req.onreadystatechange Platz für eine zuzuordnende Funktion, die bei jeder Änderung von req.readystate ausgeführt wird. Diese Funktion erlaubt, den Zeitpunkt zu finden, an dem das Ergebnis des Request vorliegt. 17

18 Eigenschaften XMLHttpRequest / ActiveXObject (2) Request-Objekt-Eigenschaften (Fortsetzung): req.responsetext Inhalt des Bodys (Typ String) aus der Server- Antwort req.responsexml XML-Objekt aus der Server-Antwort, sofern eine XML-Datei angefordert wurde req.status numerischer Wert des Serverstatus am Ende der Übertragung, wenn readystate den Wert 4 enthält, z.b. 200 für erfolgreiche Übertragung, oder 400 für bad request req.statustext eine Beschreibung des Status am Ende der Übertragung (bei readystate==4) als String 18

19 Beispiel Überwachung eines asynchronen Requests var req.onreadystatechange = function() { if (req.readystate==4) { if (req.status==200) { /* Antwort weiter verarbeiten */} else { alert( Request Response Code: +req.status); } } } 19

20 Beispiel für einen GET-Request Laden einer Skriptdatei über XMLHttpRequest mit Übergabe von Parametern Funktion open( GET, dateiname.php?param1=wert1&param2=wert2, ) Parameterauswertung im PHP-Skript: Ein GET-Request sendet die <?php übergebenen Daten mit der URL mit. if (isset($_get[ param1 ])) // weitere Verwendung von $_GET[ param1 ], z.b. als DB Abfrage $sql = SELECT name FROM tabelle WHERE wohnort=\. $_GET[ param1 ]. \ ; $ergebnis = mysql_query($sql, $dbverbindung); echo $zeile[i] ;?> 20

21 Beispiel für einen POST-Request Methodenaufrufe zur Zusammenstellung des Requests req.open( POST, dateiname.php, ); req.setrequestheader( Content-Type, applicatio/x-www-form-urlencoded ); req.send( x=1&y=3&z=5 ); Parameterauswertung im PHP-Skript: Ein POST-Request sendet die <?php übergebenen Daten $x=0; $y=0; $z=1; mit dem Body-Block. if (isset($_post[ x ]) $x=$_post[ x ]; if (isset($_post[ y ]) $y=$_post[ y ]; if (isset($_post[ z ]) $z=$_post[ z ]; $erg=($x + $y) * $z ; echo ($x + $y) * $z ergibt $erg \n ; 21

22 Ein AJAX- Taschen -Rechner AJAX Beispiel (1) <html> <head> <title>javascript und HTTP</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src= ajaxrechner.js" type="text/javascript"></script> </head> <body> <form> <input type="text" name="a" /> <select name="o"> <option value="p">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> Beispiel aus: J. Gamperl: AJAX- Web2.0 in der Praxis, Galileo Press,

23 AJAX Beispiel (2) Ein AJAX- Taschen -Rechner (Fortsetzung) <input type="text" name="b" /> <input type="button" value=" = " onclick=" ajaxrechner(this.form)" /> <input type="text" name="ergebnis" /> </form> </body> </html> JavaScript (in eigenständiger Datei ajaxrechner.js ) 23

24 AJAX Beispiel (3) function ajaxrechner(f) { var query = "a=" + escape(f.a.value) + "&" + "b=" + escape(f.b.value) + "&" + "o=" + escape(f.o.options[f.o.selectedindex].value); alert("aufruf ajaxrechner: POST, body="+query); f.ergebnis.value = "Rechnen..." var req = new XMLHttpRequest; req.open("post", "rechner.php",true); req.setrequestheader("content-type", "application/x-www-form-urlencoded"); req.onreadystatechange = function() { if (req.readystate==4) { if (req.status==200) f.ergebnis.value = req.responsetext; else alert("request Response Code:"+req.Status); } } req.send(query); } Internettechnologien 24

25 AJAX Beispiel (4) Rechner.php: <?php if ( $_POST["a"]!="" && $_POST["b"]!="" ) { $a = $_POST["a"]; $b = $_POST["b"]; switch ($_POST["o"]) { case "p": print $a+$b; break; case "-": print $a-$b; break; case "*": print $a*$b; break; case "/": print $a/$b; break; } } else print Eingabefehler";?> 25

26 Asynchrone Natur von XMLHttpRequest Zeit Web-Client var req = new XMLHttpRequest; result = req.responsetext; req.open( POST, ziel.php ); req.send( name=meier&kontonr= ); Ajax-Engine HTTP-Protokoll- Nachrichten Web-Server 26

27 Zustände von XMLHttpRequest 0 unitialized var req = new XMLHttpRequest; req.open( POST, ziel.php ); Client-Script: Zusammenstellen des Requests 1 loading req.send( name=meier&kontonr= ); Client-Script: ggf. Abbrechen, optional kann eine Fortschrittsanzeige durch zeitgesteuerte Funktionen erfolgen Client-Script: Verarbeiten der Antwort, bzw. Fehlerbehandlung 2 loaded Server-Antwort begonnen 3 interactive Server-Antwort beendet 4 complete 27

28 Übertragung von Text vs. XML Bisher zwei Möglichkeiten zur Datenübertragung mit dem XMLHttpRequest Anfordern von Daten und Rückgabe als responsetext als reponsexml Übertragen von Daten als url-encoded Text mit einen GET-Request als url-encoded String (Text) im send-body (POST Request) als XML-Datenstruktur im send-body (POST Request) 28

29 Eingabeparameter als XML Übertragen der XML-Datenstruktur im send-body (POST Request) var req = XMLHttpRequest; req.open( POST, beispiel.php ); req.setrequestheader( Content-Type, text/xml ); req.onreadystatechange = function() { } var namestr = encodeuri(namefeld.value); // angenommene var alterstr = encodeuri(alterfeld.value); // Formular Text-Inputs var xmlbody = <search> ; xmlbody += <name> +namstr+ </name> ; xmlbody += <alter> +alterstr+ </alter> ; xmlbody += </search> ; req.send( <?xml version= 1.0 encoding= UTF-8?> +xmlbody); 29

30 Rückgabe als XML Anlegen einer Variablen zur Aufnahme des XML-Objekts var xmlobj = req.responsexml; Danach Auslesen der Elemente aus dem XML-Dokument. Das konkrete Vorgehen ist stark abhängig von der XML-Struktur. Ein einfaches Beispiel: var element = xmlobj.getelementsbytagname( abflug ).item(0); var value = element.firstchild.nodevalue; Korrespondiert z.b. mit der empfangenen Struktur: <flugplan ort= FRA > <abflug>moscow</abflug> <abflug>paris</abflug> <ankunft>stockholm</ankunft> </flugplan> 30

31 XML auf Server-Seite (1) Möglichkeit 1: Manuelles Zusammenstellen des XML-Strings mit echo und printf Anweisungen. <?php $stationsmeldung = array( ort => Stavanger, windr => Sued, windst => 4, wetterer => Regenschauer, temp => 9, druck => 1009 ); echo <stationsmeldung> \n ; while($wert=each($stationsmeldung)) { echo <.$wert[ key ]. > ; echo $wert[ value ]; echo </.$wert[ key ]. > ; } echo </stationsmeldung> \n ;?> 31

32 XML auf Server-Seite (2) Möglichkeit 2: Benutzen von Bibliotheksklassen, z.b. DOM-XML Methoden sind nach dem Vorbild der DOM-Funktionen von JavaScript gestaltet <?php $stationsmeldung = array( ort => Stavanger, windr => Sued, windst => 4, wetterer => Regenschauer, temp => 9, druck => 1009 ); $dom = domxml_new_doc( 1.0, utf-8 ); // Root Knoten erstellen $root = $dom->create_element('stationsmeldung'); $dom->append_child($root); 32

33 XML auf Server-Seite (3) Möglichkeit 2 (Fortsetzung) : Bibliotheksklassen DOM-XML while($wert=each($stationsmeldung)) { $tag_node = $dom->create_element($wert[ key ]); $root->append_child($tag_node); $tag_node->append_child( $dom->create_text_node($wert[ value ])); } // Ausgabe echo $dom->savexml();?> Neben DOM-XML gibt es: DOM, libxml, SimpleXML und vermutlich noch weitere PHP-Bibliotheken 33

34 Umschiffen von Cache-Problemen (1) Daten, die mehrmals per AJAX-Request angefordert werden, haben oft die gleiche URL und unterliegen damit Caching. Cache des Browsers Cache in Proxy-Servern Es wird veralteter Inhalt zurückgegeben, wenn die Daten serverseitig aktualisiert werden. Gegenmittel auf Client-Seite: Setzen zusätzlicher Request-Header: req.setrequestheader( Pragma, no-cache ); req.setrequestheader( Cache-Control, must-revalidate ); oder Anhängen zusätzlicher Dummy-Parameter: var zusatz = new Date().getTime(); req.open( GET, beispiel.php +zusatz); 34

35 Umschiffen von Cache-Problemen (2) Gegenmittel auf Server-Seite: Setzen zusätzlicher Response-Header: <?php header( Pragma, no-cache ); header( Cache-Control: no-store, no-cache, must-revalidate ); header( Cache-Control: post-check=0, pre-check=0, false ); oder Setzen eines Cache-Verfallsdatums auf ein früheres Datum: header( Expires: Tue, 27. Jul :00:00 GMT ); header( Last-Modified:.gmdate( D, d M Y H:i:s ). GMT ); 35

36 JSON Übertragungsmodell (1) JSON - JavaScript Object Notation Übertragung von speziell kodierten Strings anstatt XML Strings werten als Text übertragen (z.b. req.responsetext) Für das Senden via JSON verpackt der Client die Datenstrukturen (bzw. Objekte) in diese Strings. Das geschieht mittels bereitgestellter Bibliotheksfunktionen. Bei JavaScript entstehen s.g. Literalobjekte Client entnimmt Daten und baut Datenstrukturen (bzw. Objekte) wieder auf. Die Auswertung auf Client-Seite erfolgt mittels Bibliotheksfunktionen und erzeugt wiederum solche Literalobjekte. Server (z.b. PHP-Skript) kann Datenstrukturen in JSON- Strings kodieren und als Ausgabe eines HTTP-Requests bereitstellen. Dazu gibt es in PHP entsprechende Bibliotheksfunktionen. 36

37 JSON Übertragungsmodell (2) Beispiel: ein AJAX-Client sendet eine Übersetzungsanfrage per GET mit dem zu übersetzenden Wort als Parameter: Client / Javascript: $word = funicular req.open( GET, server.php?translate= +$word, true); req.send(); Server / PHP: <?php require_once( json.php ); $word = $_GET[ translate ]; // some magic translation algorithm $german = seilbahn ; $spanish= el funicular ; $french= funiculaire ; $result = array ( g =>$german, s =>$spanish, f =>$french); $json = new Services_JSON(); echo $json->encode($result);?> 37

38 JSON Übertragungsmodell (3) Beispiel (Fortsetzung) Client / JavaScript: in der onreadystatechange-funktion if (req.readystate==4) { if (req.status==200) { var translation = eval ( ( +req.responsetext+ ) ); d_german.innerhtml= translation.g; d_french.innerhtml= translation.f; d_spanish.innerhtml= translation.s; } else { d_german.innerhtml= Translation Error ; d_french.innerhtml= Translation Error ; d_spanish.innerhtml= Translation Error ; } } 38

39 JSON Übertragungsmodell (4) Übertragungsformat des Beispiels: { g : seilbahn, s : el funicular, f : funiculaire } Im Beispiel wurde ein assoziatives Array kodiert. Ein anderes Beispiel ist ein 2-dimensionales Array innerhalb des Clients: innere Dimension als assoziatives Array, äußere Dimension als numerisches Array. var warenkorb = { items : [ {id:1, titel: Schokolade, preis: 1.05, waehrung: EUR }, {id:2, titel: Gummibaeren, preis: 1.99, waehrung: CHF }, {id:3, titel: Mandeltorte, preis: 29.95, waehrung: SKR } ] }; JSON.stringify(warenkorb); 39

40 JSON Übertragungsmodell (5) var json_string = JSON.stringify(warenkorb); Danach sieht der String wie folgt aus: {"items":[{"id":1,"titel":"schokolade","preis":1.05,"waehrung":"eur"},{"id":2,"tit el":"gummibaeren","preis":1.99,"current": CHF"},{"id":3,"titel": Mandeltorte"," preis":19.95,"current": SKR"}]} Dieser String könnte nun zum Server übertragen und dort gespeichert werden. Wird der String später wieder zum Client gesendet, kann er wie folgt wieder in die originale Datenstruktur gewandelt werden: var warenkorb= JSON.parse(receivedText); Alternativ kann man auch verwenden: var warenkorb= eval( ( +receivedtext+ ) ); 40

41 AJAX - Zusammenfassung HTTP-Interaktion durch Klasse XMLHttpRequest im JavaScript- Teil einer Webanwendung Laden und Übertragen von Webinhalten werden damit losgelöst von der Bedienung des Web-Browsers Client-Seite: JavaScript Server-Seite: normaler HTTP-Server + XML Dateien + PHP oder andere Skriptsprachen 41