Ajax And JSON

1,674 views

Published on

Slides used for the course WebTechnology, part of CRIA.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,674
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
55
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax And JSON

  1. 1. AJAX CRIA Webtechnology Thursday, March 18, 2010
  2. 2. Some applications of AJAX 2  Validation  Dynamic listboxes  Autorefresh  Excessive tooltips  Calling webservices CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  3. 3. AJAX 3  Asynchronous Javascript And XML  No DOM Standard, equals implementation in several browsers through the XMLHttpRequest CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  4. 4. XMLHttpRequest 4 AJAX Enabled Web App. Webserver Server Resource XHR function callback() { 2 } Databaseserver event DB CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  5. 5. XMLHttpRequest 4 AJAX Enabled Web App. Webserver Server Resource XHR function callback() { 2 } Databaseserver 1 DB event CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  6. 6. XMLHttpRequest 4 AJAX Enabled Web App. Webserver 3 Server Resource XHR function callback() { 2 } Databaseserver 1 DB event CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  7. 7. XMLHttpRequest 4 AJAX Enabled Web App. Webserver 3 Server Resource XHR function callback() { 4 2 } Databaseserver 1 DB event CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  8. 8. XMLHttpRequest 4 AJAX Enabled Web App. Webserver 3 Server Resource XHR 5 function callback() { 4 2 } Databaseserver 1 DB event CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  9. 9. XMLHttpRequest 4 AJAX Enabled Web App. Webserver 3 Server Resource XHR 5 function callback() { 4 2 } 6 Databaseserver 1 DB event CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  10. 10. XMLHttpRequest 5 HTML: <div id="emailSection"> <input id="email" type="text" onblur="new ValidationServiceRequestor().validateEmail();"/> <label>Emailadres</label> </div> JAVASCRIPT: var ValidationServiceRequestor = function(){ this.validateEmail = function(){ var emailaddress = document.getElementById("email"); var serviceProxy = new ValidationServiceProxy(this); serviceProxy.validateEmail(emailaddress); } this.setValid = function(isValid){ alert(isValid) } } CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  11. 11. XMLHttpRequest 6 var ValidationServiceProxy = function(callbackObject){ this.validateEmail = function(emailaddress){ validateEmailRequest = getXmlHttpRequestObject(); if (validateEmailRequest.readyState == 4 || validateEmailRequest.readyState == 0) { var params = "method=validateEmail&emailaddress=" + emailaddress.value; validateEmailRequest.open("GET", 'validationService.php?' + params, true); validateEmailRequest.onreadystatechange = validateEmailResponse; validateEmailRequest.send(null); } } validateEmailResponse = function(){ if (validateEmailRequest.readyState == 4) { var isEmailValid = eval("(" + validateEmailRequest.responseText + ")"); var isValid = (isEmailValid[0].emailaddressCount == 0) callbackObject.setValid(isValid) } } getXmlHttpRequestObject = function(){ if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } } } } CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  12. 12. XMLHttpRequest - Callback 7 function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //do something interesting here } } } CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  13. 13. XMLHttpRequest 8  You aren't allowed to make XMLHttpRequests to any server except the server where your web page came from. CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  14. 14. XMLHttpRequest: Application Proxy 9 AJAX Enabled Web App. Webserver: Application Proxy Server Resource XHR function callback() { 2 } Webserver in other domain event WebService CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  15. 15. XMLHttpRequest: Application Proxy 9 AJAX Enabled Web App. Webserver: Application Proxy Server Resource XHR function callback() { 2 } Webserver in other domain 1 event WebService CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  16. 16. XMLHttpRequest: Application Proxy 9 AJAX Enabled Web App. Webserver: Application Proxy 3 Server Resource XHR function callback() { 2 } Webserver in other domain 1 event WebService CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  17. 17. XMLHttpRequest: Application Proxy 9 AJAX Enabled Web App. Webserver: Application Proxy 3 Server Resource XHR function callback() { 4 2 } Webserver in other domain 1 event WebService CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  18. 18. XMLHttpRequest: Application Proxy 9 AJAX Enabled Web App. Webserver: Application Proxy 3 Server Resource XHR 5 function callback() { 4 2 } Webserver in other domain 1 event WebService CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  19. 19. XMLHttpRequest: Application Proxy 9 AJAX Enabled Web App. Webserver: Application Proxy 3 Server Resource XHR 5 function callback() { 4 2 } 6 Webserver in other domain 1 event WebService CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  20. 20. On Demand JavaScript 10 Web App. Webserver in other domain Server Resource <script> </script> returns js 2 event WebService http://ajaxpatterns.org/On-Demand_Javascript CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  21. 21. On Demand JavaScript 10 Web App. Webserver in other domain Server Resource <script> </script> returns js 2 1 event WebService http://ajaxpatterns.org/On-Demand_Javascript CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  22. 22. On Demand JavaScript 10 Web App. Webserver in other domain 3 Server Resource <script> </script> returns js 2 1 event WebService http://ajaxpatterns.org/On-Demand_Javascript CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  23. 23. On Demand JavaScript 10 Web App. Webserver in other domain 3 Server Resource <script> </script> returns js 2 4 1 event WebService http://ajaxpatterns.org/On-Demand_Javascript CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  24. 24. On Demand JavaScript 10 Web App. Webserver in other domain 3 Server Resource <script> </script> returns js 5 2 4 1 event WebService http://ajaxpatterns.org/On-Demand_Javascript CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  25. 25. On Demand JavaScript 10 Web App. Webserver in other domain <script id="external_script" 3 type="text/JavaScript"> Server </script> Resource <script> </script> <script> returns js 5 document.getElementById('external_script').src = 'http://cross.domain.com/other.js'; 4 2 </script> 1 event WebService http://ajaxpatterns.org/On-Demand_Javascript CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  26. 26. XML AND JSON Thursday, March 18, 2010
  27. 27. XML vs JSON 12 XML JSON <employee> var employee = { <firstName>John</firstName> "firstName" : John <lastName>Doe</lastName> , "lastName" : Doe <empNr>123</empNr> , "empNr" : 123 <title>Accountant</title> , "title" : "Accountant" </employee> } CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  28. 28. JSON Is Not... 13  JSON is not a document format.  JSON is not a markup language.  JSON is not a general serialization format.  No recursive/recurring structures.  No invisible structures.  No functions. CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  29. 29. Object 14 { "name": "Jack B. Nimble", "at large": true, "grade": "A", "format": { "type": "rect", "width": 1920, "height": 1080, "interlace": false, "framerate": 24 } } CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  30. 30. JSON in Ajax 15  XMLHttpRequest  Obtain responseText  Parse the responseText  responseData = eval(  '(' + responseText + ')');  responseData =  responseText.parseJSON(); CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  31. 31. Security 16  Is it safe to use eval with XMLHttpRequest?  The JSON data comes from the same server that vended the page. An eval of the data is no less secure than the original html.  If in doubt, use string.parseJSON instead of eval. CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  32. 32. JSON Is Not XML 17  objects  element  arrays  attribute  strings  attribute string  numbers  content  booleans  <![CDATA[ ]]>  null  entities  declarations  schema  stylesheets  comments  version  namespace CRIA WT - Rody Middelkoop Thursday, March 18, 2010
  33. 33. Server-side JSON 18 <?php $emailaddresses = getDataFromDataSource( "SELECT COUNT(*) AS emailaddressCount from adresboek where emailaddress = '" . $_REQUEST["emailaddress"] ."'"); $emailaddressesForJSON = array(); while( $row = mysql_fetch_array($emailaddresses)) { array_push($emailaddressesForJSON, $row); } $jsonText = json_encode( $emailaddressesForJSON ); echo $jsonText; function getDataFromDataSource($query) { mysql_connect("127.0.0.1", "root", "root") or die("Connection Failure to Database"); mysql_select_db("criademo") or die ("Database criademo not found."); $result = mysql_query($query); return $result; } ?> CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  34. 34. Who is responsible for the right 19 format? Web App. Webserver WebService Client event CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  35. 35. Who is responsible for the right 19 format? Web App. Webserver WebService Client 1 event CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  36. 36. Who is responsible for the right 19 format? Web App. Webserver 2 WebService Client 1 event CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  37. 37. Who is responsible for the right 19 format? Web App. Webserver 2 WebService Client 3 1 event CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  38. 38. Who is responsible for the right 19 format? Web App. Webserver 2 WebService Client 3 1.SOAP: returns XML 2.REST: let the client pick a 1 format like XML, JSON, HTML event CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  39. 39. Resources and a big thank you 20  JSON the x in AJAX, www.json.org/json.pdf  CRIA-WT - Rody Middelkoop Thursday, March 18, 2010

×