Webtechnologien. Teil 13: JSON und etwas AJAX

Transkript

1 Webtechnologien Teil 13: JSON und etwas AJAX

2 Literatur [13-01] [13-02] Steyer, Ralph: JavaScript. Addison-Wesley, 2007 [13-03] Steyer, Ralph: Das JavaScript Codebook. 2. Auflage, Addison-Wesley, 2005 [13-04] Flanagan, David: JavaScript Das umfassende Referenzwerk. O'Reilly, 6. Auflage, 2012 (1.200 Seiten) [13-05] Flanagan, David: JavaScript kurz&gut. O'Reilly, 4. Auflage, 2012 [13-06] Crane, Dave; Pascarello, Eric; James, Darren: Ajax in action. Addison- Wesley, 2006 [13-07] Bergmann, Olaf; Bormann, Carsten: AJAX. SPC TEIA Lehrbuch Verlag,

3 Literatur zu Ajax [13-08] Perry, Bruce: AJAX Hacks. O'Reilly, 2006 [13-09] Steyer, Ralph: AJAX mit PHP. Addison-Wesley, 2006 [13-10] Koch, Daniel: Schnell plakatiert. CT 20/2005, S [13-11] Wang, Dapeng: Nicht nur holländische Fußballkunst. Javamagazin, 11, 2005, S [13-12] Braun, Herbert: Ajax zu Fuß. CT 5/2006, S [13-13] Braun, Herbert: Instant-Ajax. CT 5/2006, S [13-14] Lauriat, Shawn: Advanced Ajax. Prentice Hall, 2008 [13-15] Wenz, Christian: Ajax. Entwickler.press, 2006 [13-16] [13-17] 3

4 Übersicht JSON Operationen auf DOM Beispiel in mehreren Versionen 4

5 AJAX I AJAX = Asynchronous JavaScript and XML Ajax ist ein Verfahren Teile von angezeigten Web-Seiten direkt zu ersetzen anstatt die ganze Seite neu zu laden. Diese Idee ist recht alt und wurde lange vor dem "Ajax-Hype" realisiert, u.a. von Google und Microsoft. Der Begriff AJAX wurde von Jesse James Garret in seinem Artikel "Ajax: A New Approach to Web Applications" 2005 bekannt gemacht. 5

6 AJAX II Dazu werden mit JavaScript im Hintergrund XML-Daten vom Server geholt und im Browser dargestellt. Diese XML-Daten werden in JavaScript-Objekte konvertiert, die in das DOM des Dokuments integriert und somit angezeigt werden. Ajax funktioniert nur bei Browsern, die das XMLHttpRequest- Objekt realisiert haben, ab Firefox 1.0, Explorer 5, Opera 8, Mozilla 1.4, Netscape 7.1, Safari 1.2, Konqueror 3.2 und icab 3.0. Wenn statt XML-Daten JSON-Daten verwendet werden, lassen sich dieselbe Effekte ohne den Overhead von XML realisieren. Dies wird im folgenden getan. 6

7 Geschichte von JSON JSON = JavaScript Object Notation Entwickelt von Douglas Crockford, 2002 Definiert in RFC 4627 (Juli 2006) JSON ist ein Serialisierungsformat von JavaScript-Objekten basierend auf ASCII. JSON ist eine Untermenge von JavaScript und kann daher direkt mit der eval()-funktion interpretiert bzw. bei der Objekt- Erzeugung benutzt werden. Definition: Siehe: 7

8 Beispiel von JSON { "Herausgeber": "Humpty", "Nummer": " ", "Deckung": 2e+6, "Waehrung": "EUR", "Inhaber": { "Name": "Mustermann", "Vorname": "Max", "maennlich": true, "Hobbys": [ "Reiten", "Golfen", "Lesen" ], "Alter": 42, "Kinder": [], "Partner": null Quelle: 8

9 JSON-Format Ein Objekt wird innerhalb geschweifter Klammern { definiert. Es können Objekte geschachtelt werden, aber nie auf der obersten Ebene mehr als ein Objekt. Arrays werden durch eckige Klammern [] definiert. Attribute werden jeweils durch ein Paar Name: Wert definiert. 9

10 DOM-Operationen I Hello.css Hello.html Hello.js function mods() function addnode() Es wird ein Beispiel für das Zusammenspiel zwischen JavaScript, CSS und HTML vorgestellt. 10

11 DOM-Operationen II - Datei Hello.html Hello.html... <head> <title>hello mit JS</title> <link rel="stylesheet" type="text/css" href="hello.css"> <script type="text/javascript" src="hello.js"></script> </head> <body onload="mods()"> <p id="hello">hello World!<p> <div id="comment"></div> </body>... Hello.css.normal { color: green; font-weight: normal; font-size: 14pt;.good { color: blue; font-weight: bold; font-size: 12pt; 11

12 DOM-Operationen III Datei Hello.js function mods() { var teaser= document.getelementbyid("hello"); teaser.classname= "normal"; // Zuweisung von CSS-Klasse var console= document.getelementbyid("comment"); addnode(console,"das ist ein dynamisch"); addnode(console,"generierter Text!"); var kids= console.childnodes; // array von Kindern for (var i= 0;i<kids.length;i++) { kids[i].classname= "good"; // Zuweisung der CSS-Klasse console.style.border= "solid red 3px"; console.style.width= "300px"; getelementbyid("hello") liefert ein Element mit der id="hello"..classname= "..." weist CSS-Klassen einem Element zu..style.border= und.style.width= sind Möglichkeiten Styles direkt ohne Klassennamen zuzuweisen. 12

13 DOM-Operationen IV - Datei Hello.js function addnode(elem, text) { var newdiv= document.createelement("div"); elem.appendchild(newdiv); // einen neuen Layer var newtext= document.createtextnode(text); newdiv.appendchild(newtext); // Text in den Layer einfügen Es werden zwei neue Knoten erzeugt und in den Baum eingehängt. Das ist das Ergebnis im Browser 13

14 DOM-Operationen IV nodevalue=... removechild() insertbefore() appendchild() parentnode replacechild(a,b) firstchild lastchild nextsibling createelement() createtextnode() Ändern von Text eines Textknotens Löschen eines Knotens Vorne Einfügen Hinten Anfügen Holt den Elternknoten Ersetzt b durch Knoten a Holt den ersten Knoten Holt den letzten Knoten Holt das nächste Kind (Geschwister) Neues Element außerhalb des DOM erzeugen Neues Text-Element außerhalb des DOM erzeugen Einige Operationen sind Attribute, andere sind Funktionen. 14

15 Beispiel2 Kommunikation mit Server Ajax.css ajax() Ajax.html Ajax.js sendrequest() Event gethttprequest() processchange() XMLHttpRequest() write2console() Nun kommt eine einfache Version für die Ajax-Kommunikation. addnode() 15

16 Anfrage an den Server senden I function sendrequest(url, params, method, async) { if(arguments.length<3) { method= "POST"; if(arguments.length<4) { async= true; request= gethttprequest(); // Objekt generieren if(request!=null) { hier wird noch etwas eingefügt request.open(method, url, async); request.setrequestheader("content-type", "application/x-www-form-urlencoded"); request.send(params); Das ist das prinzipielle Verfahren etwas an den Server zu senden. 16

17 Anfrage an den Server senden II function gethttprequest() { var req= null; if(typeof XMLHttpRequest!== "undefined") { req= new XMLHttpRequest();// Mozilla und Co. else { if(typeof ActiveXObject!== "undefined") { req= new ActiveXObject("Microsoft.XMLHTTP"); if(!req) { req= new ActiveXObject("Msxml2.XMLHTTP"); return req; Tja, und hier holt uns die Geschichte der Inkompatibilitäten ein... - weiter unten kommt noch mehr. 17

18 Antwort vom Server holen I var request; // globale Variable für das XMLHttpRequest-Objekt function sendrequest(url, params, method, async) {... if(request!=null) { request.onreadystatechange= processchange; // Call Back request.open(method, url, async);... Name einer Routine Um etwas vom Server empfangen zu können, muss eine Routine als ein "Call Back" definiert werden. 18

19 Antwort vom Server holen II function processchange() { var state= request.readystate; var response= null; if(state==state_complete) { response= request.responsetext; var STATE_UNINITIALIZED= 0 var STATE_LOADING = 1; var STATE_LOADED = 2; var STATE_INTERACTIVE = 3; var STATE_COMPLETE = 4; // der empfangene Text else { response= "waiting: "+state; // Ersatztext //... hier findet die Verarbeitung des Textes statt //... es wird dem DOM mit den obigen Routinen geändert Das ist nun die Routine, die immer dann asynchron zur Anzeige des Browsers bei jeder Zustandsänderung der Verbindung zum Server aufgerufen wird. Die Zustände des XMLHttpRequest-Objekts werden als "Konstanten" definiert. 19

20 Beispiel2 HTML Teil 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" charset=iso "> <title>ajax Hello</title> <link rel="stylesheet" type="text/css" href="ajax.css"> <script type="text/javascript" src="ajax.js"></script> </head> <body> <p class="normal">hello Ajax!<p class="normal"> <div id="comment"></div> <script">ajax();</script> </body> </html> In dieser "Rahmendatei" wird die Routine ajax() direkt gleich zum Start aufgerufen und verändert die Ausgabe. 20

21 Beispiel2 Ajax.js Teil 1 var console= null; function addnode(elem, text) { var newtext= document.createtextnode(text); elem.appendchild(newtext); function write2console(text) { if(console==null) { console= document.getelementbyid("comment"); addnode(console,text); Zur Ausgabe in JavaScript wird ein Knoten im DOM erzeugt und hinten angehängt. Dies wird durch die Routine write2console() verdeckt. 21

22 Beispiel2 Ajax.js Teil 2 function processchange() { var state= request.readystate; var response= null; if(state == STATE_COMPLETE) { response= request.responsetext; var STATE_UNINITIALIZED= 0 var STATE_LOADING = 1; var STATE_LOADED = 2; var STATE_INTERACTIVE = 3; var STATE_COMPLETE = 4; // der empfangene Text else { response= "waiting: "+state; // Ersatztext write2console(resp); Die geänderte Call-Back-Routine jetzt mit write2console(): Es wird der vom Server empfangene Text oder die Meldung waiting... ausgegeben. 22

23 Bemerkungen Das vorherigen Beispiel soll nur die prinzipielle Vorgehensweise zeigen; für reale Projekte ist diese Vorgehensweise nur bedingt geeignet: Z.B. ist die Verwendung und gemeinsame Benutzung einer globalen Variablen - hier req - nicht gut, besonders dann, wenn mit mehreren parallelen Requests gearbeitet werden soll. Dann sollte mit Klassen und lokalen Variablen gearbeitet werden. Wenn beim open() der dritte Parameter false ist, wird "synchron" gesendet, d.h. es wird beim send() auf die Antwort gewartet (also kein Ajax, sondern eher ein Sjax). Bei true wird weiter gemacht, so dass die Anforderung parallel bearbeitet wird. 23

24 Beispiel2 Ajax.js Teil 3 function sendrequest(url, params, method, async) { if(arguments.length<3) { method= "POST"; if(arguments.length<4) { async= true; request= gethttprequest(); // Objekt generieren if(request!=null) { request.onreadystatechange= processchange;// Call Back request.open(method, url, async); request.setrequestheader("content-type", "application/x-www-form-urlencoded"); if(params!=null) { request.send(params); else { request.send(); Das sendrequest() wird nun um die Fähigkeit auch Parameter an den Server senden zu können erweitert. Diese müssen aber in der urlencoded-form kodiert sein. 24

25 Beispiel2 Ajax.js Teil 4 var URL= " var request= null; // globale Variable (XMLHttpRequest) function ajax() { sendrequest(url,null,"post"); Die Routine gethttprequest() ist oben angegeben. 25

26 Beispiel2 HTML-Datei auf dem Server <?php echo "Now is ".strftime("%d.%m.%y %H:%M:%S");?> Das ist das PHP-Programm, das die Ajax-Daten sendet. Das Ergebnis: 26

27 Einige Verbesserungen I Kodierungen der HTTP-Header... req.setrequestheader("content-type", "application/x-www-form-urlencoded;"); params= "keyword1=val1&keyword2=val2&keyword3=val3"; request.send(params);... Bei der angegebenen Kodierung und der POST-Methode muss der Parameter beim request.send() URL-kodiert sein. Bei GET müssen die Daten immer so kodiert sein. Die Funktion escape() kodiert in die URL-Konvention. Aber dies betrifft nur die Keywords und die Werte, nicht das Gleichheitszeichen und das "&". Der Content-Type-Teil ist bei POST erforderlich. Damit der Internet Explorer mit AJAX klar kommt, sollte immer die POST-Methode verwendet werden. 27

28 Einige Verbesserungen II - Stil In processchange() sollten nicht die empfangenen Daten bearbeitet werden; dies wird in die Routine processready() ausgelagert. Grund: In processchange() steht nur der allgemeine Teil, der für alle verschiedenen Ajax-Anwendungen gleich ist; das Spezielle steht in processready(). function processchange() { var STATE_UNINITIALIZED= 0; var STATE_LOADING = 1; var STATE_LOADED = 2; var STATE_INTERACTIVE = 3; var STATE_COMPLETE = 4; var state= request.readystate; if(state == STATE_COMPLETE) { processready(request.responsetext); else { write2console("waiting: "+state); 28

29 Einige Verbesserungen III - Stil ajax() sendrequest() Event gethttprequest() processchange() XMLHttpRequest() processready() write2console() addnode() 29

30 Einige Verbesserungen IV - Hauptprogramm function processready(text) { write2console(text); function ajax() { sendrequest(url,"msg="+escape("es ist"),"post"); Jetzt wird auch gleich noch ein Parameter an das PHP-Skript eingefügt. Dieser Parameter muss hier(!) URL-Kodiert sein, so dass die escape()-routine erforderlich ist. 30

31 Einige Verbesserungen V - PHP <?php if(isset($_post['msg'])) { $mesg= $_POST['msg']; else { $mesg= 'Now is'; echo "$mesg ".strftime("%d.%m.%y %H:%M:%S");?> Das Ergebnis: Der Parameter 31

32 Einige Verbesserungen VI Console function addnode(elem, text) { var newtext= document.createtextnode(text); elem.appendchild(newtext); function repnode(elem, text) { elem.firstchild.replacedata(0,text.length,text); function write2console(text) { if(console == null) { console= document.getelementbyid("comment"); addnode(console,text); else { repnode(console,text); Nun werden die Meldungen "übereinander" geschrieben. 32

33 Einige Verbesserungen VII Kennzeichnung request= gethttprequest(); // Objekt generieren if(request!=null) { request.onreadystatechange= processchange;// Call Back request.open(method, url, async); request.setrequestheader("content-type", ); request.setrequestheader("x_requested_with","1"); if(params!= null) { request.send(params); else { request.send(); Durch einen neuen Header-Eintrag wird der Ajax-Request gekennzeichnet, so dass der Server erkennen kann, ob die URL von Ajax her oder über einen Browser direkt angesteuert wurde. 33

34 Einige Verbesserungen IX Kennzeichnung if(isset($_post['msg'])) { $mesg= $_POST['msg']; else { $mesg= 'Now is'; $requestheader= apache_request_headers(); if(isset($requestheader['x_requested_with'])) { echo "\n$mesg ".strftime("%d.%m.%y %H:%M:%S")."\n\n"; else { echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ">'; echo '<html><head>'; echo '<meta http-equiv="content-type" content=" ">'; echo '<title>ajax Hello</title></head><body><p>'; echo "\n$mesg ".strftime("%d.%m.%y %H:%M:%S")."</body></html>"; So sieht die dazu gehörige Seite auf dem Server aus. Die Abfrage apache_request_headers() läuft nur auf dem Apache. 34

35 Beispiel 3 Das Ergebnis Fertig! Zugriff direkt auf die Seite 35

36 XMLHttpRequest-Objekt I Attribut onreadystatechange readystate responsetext responsexml status statustext Erläuterung Adresse der Call Back Routine, die bei allen Änderungen von readystate aufgerufen wird Zustände 0 bis 4 (siehe Code oben) STATE_UNINITIALIZED= 0 STATE_LOADING= 1 STATE_LOADED= 2 STATE_INTERACTIVE= 3 STATE_COMPLETE= 4 Einfacher Text der Antwort Antwort im XML-Format HTTP-Status-Code der Antwort HTTP-Status-Code als Text 36

37 XMLHttpRequest-Objekt II - readystate Zustand Erläuterung 0 Nicht initialisiert, also vor open()-aufruf 1 Initialisiert, aber kein Absenden, also vor send()-aufruf 2 send() wurde ausgeführt 3 Empfangen der Antwort, warten auf das Ende des Empfangens; es kann schon auf responsetext zugegriffen werden 4 Alles fertig; responsetext enthält den vollständigen Text Dasselbe gilt für responsexml. Ein Abbrechen mittels abort() ist nur in den Zuständen 2 und 3 sinnvoll. 37

38 XMLHttpRequest-Objekt III Methode abort() getallresponseheaders() getresponseheader(string) open(string method, string url, string asyn) send(string) Erläuterung Abbruch des Requests Gibt den gesamten Header in einem String zurück Gibt den Wert eines Header-Teiles zurück Bereitet Request an Adresse url vor; asyn gibt als String an, ob asynchron ("true") oder nicht ("false") Absenden des Requests, wobei der String Parameter angibt, die nach einem? hinter der URL angefügt werden setheader(string header, string val) Setzen einer Header-Zeile open() hat noch zwei weitere optionale Parameter: 4. Parameter: Benutzernamen 5. Parameter: Passwort 38

39 Arbeiten mit JSON I Wenn die empfangenen Zeichenkette in JSON-Format vorliegt, kann daraus unmittelbar ein JavaScript-Objekt gemacht werden. Dann können die einzelnen Attribute aus diesem Objekt ausgelesen und in das DOM der Seite integriert werden. Einzig was sich ändert, ist die Call-Back-Routine. 39

40 Arbeiten mit JSON II function processchange() { var state= request.readystate; var response= null; if(state==state_complete) { if(req.status==200) { // Status-Code abfragen response= request.responsetext; var obj= eval("("+response+")"); // Arbeiten mit obj, z.b. obj.vorname... else { // Behandlung des Fehlers, // z.b. alert(string) aufrufen else { // Behandlung der Wartesituation Hier wird noch der HTTP-Statuscode abgefragt. 40

41 Bemerkungen var obj= eval("("+response+")"); Diese Lösung erzeugt per Interpretation des empfangenen Textes, z.b. ein JSON-String, einen Wert oder ein Objekt. Z.B. "{ x:10, y:20, sum:30 " Die beiden Klammern müssen gesetzt werden. Die Abfrage des HTTP-Statuscodes dient dazu, Fehler des Servers abzufangen bzw. zu behandeln (siehe Teil über HTTP). Die Statuscodes zwischen 100 und 199 werden für Zwischennachrichten benutzt; sie zeigen keine Beendigung an. Zum Liefern von Informationen braucht der Server nur die Daten im JSON-Format zu liefern. Bei "echten" Ajax-Anwendungen ist es eine XML-Information. Diese Art ist als Gründen der IT-Sicherheit nicht zu empfehlen, da dadurch alle Arten von Software im Browser ablaufen könnten. 41

42 Wie setzt sich alles zusammen? Nach Klicken auf Knöpfe werden JavaScript-Routinen gestartet, die dann die Requests absetzen. Über onxyz-ereignisse, z.b. Änderung des Fokus, MouseOver etc., werden JavaScript-Routinen gestartet. Das einzige, was nicht geht, ist das Aktiv-Werden des Servers ohne Interaktion durch den Client. 42

43 Nach dieser Anstrengung etwas Entspannung... 43