Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 7: Json-Ajax-Jquery

Transcript

1 Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 7: Json-Ajax-Jquery Καθ. Ιωάννης Γαροφαλάκης Πολυτεχνική Σχολή Μηχανικών Η/Υ & Πληροφορικής

2 Σκοποί ενότητας Σκοπός της παρούσας ενότητας είναι να εξοικειωθούν οι φοιτητές με τις βασικές αρχές του Json, Ajax, Jquery 2

3 Περιεχόμενα ενότητας Τι είναι το JSON Δομή JSON Συντακτικό του JSON Σύγκριση JSON και XML Τι είναι ο AJAX Το αντικείμενο XMLHttpRequest Ιδιότητες του XMLHttpRequest Μέθοδοι και Γεγονότα του XMLHttpRequest Καταστάσεις ready state jquery Συντακτικό jquery 3

4 Τι είναι το JSON JSON (JavaScript Object Notation): lightweight data-interchange format. Εύκολο για τους ανθρώπους να το διαβάσουν και γράψουν Εύκολο για τις μηχανές να το αναλύσουν και δημιουργήσουν Βασίζεται σε ένα υποσύνολο της JavaScript Programming Language, Standard ECMA-262 3rd Edition - December Μορφή κειμένου που είναι εντελώς ανεξάρτητη από την γλώσσα αλλά χρησιμοποιεί συμβάσεις που είναι γνωστές στους προγραμματιστές γλωσσών όπως C, C++, C#, Java, JavaScript, Perl, Python κ.α. 4

5 Δομή JSON το JSON αποτελείται από 2 δομές Μια συλλογή από ζεύγη name/value Σε διάφορες γλώσσες αυτό γίνεται αντιληπτό ως object, record, struct, dictionary, hash table, keyed list, or associative array Μια ταξινομημένη λίστα τιμών Στις περισσότερες γλώσσες αυτό γίνεται αντιληπτό σαν array, vector, list, or sequence 5

6 Object Συντακτικό του JSON Μη ταξινομημένο σύνολο ζευγών name/value Ξεκινά από { (αριστερή αγκύλη) και τελειώνει με } Κάθε όνομα ακολουθείται από : και τα ζεύγη name/value διαχωρίζονται με, (κόμμα). 6

7 Array Συντακτικό του JSON Ταξινομημένη συλλογή από values Ξεκινά από [ και τελειώνει με ]. Τα values διαχωρίζονται με, (κόμμα). 7

8 Value Συντακτικό του JSON string σε (double quotes), number, true, false, object, array Οι δομές αυτές μπορεί να είναι εμφωλευμένες String Ακολουθία από 0 (μηδέν) ή περισσότερους χαρακτήρες Unicode μέσα σε (double quotes), με το \ να είναι χαρακτήρας διαφυγής 8

9 Number Συντακτικό του JSON Όπως και στις C, Java, εκτός της οκταδικής και δεκαεξαδικής μορφής 9

10 Παράδειγμα Javascript Object { "statcode" : 200, "stattext" : "Ok", "interval" : ["hour", "day", "week"], "ids":[10, 30, 45], "readings": [ { "timestamp": , "reading": }, { "timestamp": , "reading": } ] } JSON (text) '{'+ ' "statcode" : 200, '+ ' "stattext" : "Ok", '+ ' "interval" : ["hour", "day", "week"], '+ ' "ids":[10, 30, 45], '+ ' "readings": ['+ ' {'+ ' "timestamp": , '+ ' "reading": '+ ' }, '+ ' {'+ ' "timestamp": , '+ ' "reading": '+ ' } '+ ' ] '+ '} ' View page 10

11 Μετατροπή σε Object Με την eval() (δεν συνίσταται για λόγους ασφάλειας) Το κείμενο πρέπει να γίνει wrap σε παρενθέσεις Με την εγγενή υποστήριξη του browser (εφόσον διατίθεται) Firefox 3.5, IE8, Chrome, Opera 10, Safari 4 Με την json_parse() από τη βιβλιοθήκη Με την υποστήριξη που προσφέρουν βιβλιοθήκες όπως jquery, Yahoo UI, Prototype, Dojo, ECMAScript 1.5 View page 11

12 Σύγκριση JSON και XML JSON (text) '{'+ ' "statcode" : 200, '+ ' "stattext" : "Ok", '+ ' "interval" : ["hour", "day", "week"], '+ ' "ids":[10, 30, 45], '+ ' "readings": ['+ ' {'+ ' "timestamp": , '+ ' "reading": '+ ' }, '+ ' {'+ ' "timestamp": , '+ ' "reading": '+ ' } '+ ' ] '+ '} ' XML <?xml version="1.0" encoding="utf-8"?> <root> <ids> <element>10</element> <element>30</element> <element>45</element> </ids> <interval> <element>hour</element> <element>day</element> <element>week</element> </interval> <readings> <element> <reading> </reading> <timestamp> </timestamp> </element> <element> <reading> </reading> <timestamp> </timestamp> </element> </readings> <statcode>200</statcode> <stattext>ok</stattext> </root> 12

13 Τι είναι ο AJAX Asynhronous Javascript And Xml Ασύγχρονη επικοινωνία μεταξύ client (browser αρχικοποίηση επικοινωνίας μέσω συμβάντων και javascript) και server (χρήση XML για την αποστολή των δεδομένων) ΔΕΝ είναι νέα γλώσσα προγραμματισμού Είναι νέος τρόπος να χρησιμοποιούμε υπάρχοντα πρότυπα (Javascript, XML, HTML, DOM, CSS) 13

14 Το αντικείμενο XMLHttpRequest Όλοι οι νέοι Browsers υποστηρίζουν το Javascript αντικείμενο XMLHttpRequest Εξαίρεση αποτελούν οι εκδόσεις του IE πριν την 7 Οι εκδόσεις αυτές παρέχουν υποστήριξη μέσω αντικειμένου ActiveX Το αντικείμενο XMLHttpRequest διαθέτει ένα σύνολο ιδιοτήτων, μεθόδων και γεγονότων τα οποία χρησιμοποιεί ο προγραμματιστής για την υλοποίηση της ασύγχρονης επικοινωνίας 14

15 Ιδιότητες του XMLHttpRequest readystate: Επιστρέφει την τρέχουσα κατάσταση της λειτουργίας του αιτήματος responsetext: Επιστρέφει το σώμα της απόκρισης σαν αλφαριθμητικό. responsexml: Επιστρέφει το σώμα της απόκρισης σαν ένα αντικείμενο XML Document. status: Επιστρέφει τον HTTP κωδικό κατάστασης του αιτήματος. statustext: Επιστρέφει την φιλική μορφή (κείμενο) της HTTP κατάστασης του αιτήματος. 15

16 Μέθοδοι και Γεγονότα του XMLHttpRequest abort(): Απορρίπτει το xmlhttp αίτημα. getallresponseheaders(): Επιστρέφει τις τιμές όλων των επικεφαλίδων σαν αλφαριθμητικό. getresponseheader(header): Επιστρέφει την τιμή της συγκεκριμένης επικεφαλίδας. open(method,url,async): Δίνει τιμές σε παραμέτρους τις επικοινωνίας όπου θα χρησιμοποιηθεί το αντικείμενο XMLHttpRequest. send(postdata): Στέλνει το HTTP αίτημα στον server. setrequestheader(header,value): Προσθέτει επιπλέον HTTP επικεφαλίδες στο αίτημα. onreadystatechange: καθορίζει τον χειριστή γεγονότων που θα κληθεί όταν αλλάξει η κατάσταση ready state. 16

17 Καταστάσεις ready state 0 (Uninitialized) The object has been created, but not initialized (the open method has not been called). 1 (Open) The object has been created, but the send method has not been called. 2 (Sent) The send method has been called. responsetext is not available. 3 (Receiving) Some data has been received. responsetext is not available. 4 (Loaded) All the data has been received. responsetext is available. responsebody is available. 17

18 Αρχικοποίηση var xmlhttp; if (window.xmlhttprequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else if (window.activexobject){ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("your browser does not support XMLHTTP!"); } 18

19 Ένα πρώτο απλό παράδειγμα xmlhttp.open("get","simple1_.htm",true); xmlhttp.onreadystatechange=function() { rstatech(xmlhttp) }; xmlhttp.send(null); } function rstatech(xmlhttpobj){ alert(xmlhttpobj.readystate); } if(xmlhttpobj.readystate==4) alert(xmlhttpobj.responsetext); View page 19

20 Παράδειγμα 2 <div id="suggestionel" style="display:none; position:absolute; margin-top: 2px; border:1px solid black; padding: 1px; background-color: white">dummy TEXT</div> <p>παράδειγμα χρήσης Ajax για παροχή εισηγήσεων στον χρήστη </p> <p>όνομα χρήστη: <input type="text" name="inptxt" onkeyup="ajaxcall(this)" onblur="document.getelementbyid('suggestionel').style.display='none'"> </p> <p> Ξεκινήστε να γράφετε το όνομα στο παραπάνω πεδίο. </p> 20

21 Παράδειγμα 2 Javascript function ajaxcall(par){ init var qstr="?name="+par.value; var url_="example2.php"+qstr; xmlhttp.open("get",url_,true); xmlhttp.onreadystatechange=function() { rstatech(xmlhttp, par) }; xmlhttp.send(null); } function rstatech(xobj,par1){ if(xobj.readystate==4){ var _suggel = document.getelementbyid("suggestionel"); _suggel.style.top = par1.offsettop "px"; _suggel.style.left = par1.offsetleft + "px"; _suggel.innerhtml=xobj.responsetext; _suggel.style.display='block'; } } 21

22 Παράδειγμα 2 Server Side Script <? header('content-type: text/html; charset=iso '); $namear = array( 'fanis','vasilis','danai','flora','fani','denny'); $sname = iconv("utf-8", "ISO ", $_GET['name']); foreach($namear as $si){ if(stripos($si,$sname)===0) echo $si."</br>"; }?> View page 22

23 Παράδειγμα 3 XML response <? header('content-type: text/xml; charset=iso '); $namear = array( 'fanis','vasilis','danai','flora','fani','denny'); $sname = iconv("utf-8", "ISO ", $_GET['name']); echo "<?xml version=\"1.0\" encoding=\"iso \"?>\n"; echo "<rootel>"; foreach($namear as $si){ if(stripos($si,$sname)===0) echo "<suggname>".$si."</suggname>"; } echo "</rootel>";?> 23

24 Παράδειγμα 3 Javascript function rstatech(xobj,par1){ if(xobj.readystate==4){ var _suggel = document.getelementbyid("suggestionel"); _suggel.style.top = par1.offsettop "px"; _suggel.style.left = par1.offsetleft + "px"; _suggel.innerhtml=""; var namelist = Xobj.responseXML.getElementsByTagName("suggname"); for(i=0; i<namelist.length; i++){ _suggel.innerhtml = _suggel.innerhtml + namelist.item(i).firstchild.nodevalue + "</br>"; } _suggel.style.display='block'; } } View page 24

25 Παράδειγμα POST (HTTP Basics) Τύποι Μηνυμάτων HTTP-message = Request Response ; HTTP/1.1 message Μέθοδοι Request GET GET /path/script.cgi?home=cosby&favorite=flies HTTP/1.0 HEAD POST POST /path/script.cgi HTTP/1.0 Content-Type: application/x-www-form-urlencoded Content-Length: 32 home=cosby&favorite=flies 25

26 Παράδειγμα POST - Javascript function ajaxcall(par){ init var qstr="name="+par.value; var url_="example4.php"; xmlhttp.open("post",url_,true); xmlhttp.setrequestheader('content-type','application/xwww-form-urlencoded; charset=iso '); xmlhttp.setrequestheader('content-length', qstr.length); xmlhttp.onreadystatechange=function() { rstatech(xmlhttp, par) }; xmlhttp.send(qstr); } View page 26

27 Παράδειγμα AJAX με JSON Client function rstatech(xobj,par1){ if(xobj.readystate==4){ var resp = JSON.parse(Xobj.responseText); _suggel.innerhtml=resp.result.join("<br>"); _suggel.style.display='block'; } } Server foreach($namear as $si){ if(stripos($si,$sname)===0){ $res[]=iconv("iso ", "UTF-8", $si); $resq[]="\"".$si."\""; } } echo "{\"result\":[".implode(",",$resq)."]}"; //echo json_encode(array("result"=>$res)); 27

28 jquery Βιβλιοθήκη Javascript Ελαφριά, γρήγορη, με πλούσια χαρακτηριστικά Σκοπός: απλούστευση της χρήσης της JavaScript Χαρακτηριστικά που προσφέρει Χειρισμός HTML/DOM, CSS, γεγονότων Effects and animations Ajax JSON parsing Utilities Browser compatibility Επεκτασιμότητα 28

29 Προσθέτοντας jquery Τοπικά από το site <head> <script src="jquery min.js"></script> </head> Include από CDN <head> <script src=" y.min.js"> </script> </head> 29

30 Συντακτικό jquery Το βασικό συντακτικό είναι $(selector).action() Με το $ αποκτούμε πρόσβαση στο jquery Με το (selector) εντοπίζουμε τα επιθυμητά HTML elements action() η ενέργεια που εκτελείται στα στοιχεία Παράδειγμα $("p").hide() - hides all <p> elements. Που τοποθετούμε τον κώδικα <script> $(document).ready(function(){ // jquery methods go here... }); </script> 30

31 Selectors element Selector (Επιλογή με βάση το όνομα) $("p") #id Selector (Επιλογή με βάση το id) $("#myid").class Selector (Επιλογή με βάση την κλάση) $(".myclass"); Attribute Selector (Επιλογή με βάση attribute) $("input[name='first_name']"); Pseudo-Selectors $("tr:odd"); 31

32 Events Το jquery προσφέρει μεθόδους για να αντιστοιχίζουμε συναρτήσεις χειρισμού γεγονότων σε ενέργειες (π.χ..click(),.focus() κλπ) Παραδείγματα // Event setup using a convenience method $( "p" ).click(function() { console.log( "You clicked a paragraph!" ); }); // Equivalent event setup using the `.on()` method $( "p" ).on( "click", function() { console.log( "click" ); }); 32

33 Events Μέσα στην συνάρτηση χειρισμού γεγονότων Η συνάρτηση λαμβάνει ένα αντικείμενο, το οποίο περιέχει πληροφορίες και μεθόδους σχετικά με το γεγονός.preventdefault() method pagex, pagey, type, data, target Αντιστοίχιση περισσότερων handlers $( "p" ).on({ }); "click": function() { console.log( "clicked!" ); }, "mouseover": function() { console.log( "hovered!" ); } View page 33

34 Ajax $.ajax() method Options async data type url Returns jquery XMLHttpRequest (jqxhr) object Methods.done(function( data, textstatus, jqxhr ) {});.fail(function( jqxhr, textstatus, errorthrown ) {});.always(function( data jqxhr, textstatus, jqxhr errorthrown ) { }); View page 34

35 Τέλος Ενότητας

36 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στo πλαίσιo του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Πανεπιστήμιο Πατρών» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 36

37 Σημείωμα Ιστορικού Εκδόσεων Έργου Το παρόν έργο αποτελεί την έκδοση

38 Σημείωμα Αναφοράς Copyright Πανεπιστήμιο Πατρών, Ιωάννης Γαροφαλάκης, «Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό». Έκδοση: 1.0. Πάτρα Διαθέσιμο από τη δικτυακή διεύθυνση: 38

39 Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί. 39