Your SlideShare is downloading. ×
Ajax And JSON
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ajax And JSON

1,320
views

Published on

Slides used for the course WebTechnology, part of CRIA.

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,320
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
53
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AJAX CRIA Webtechnology Thursday, March 18, 2010
  • 2. Some applications of AJAX 2  Validation  Dynamic listboxes  Autorefresh  Excessive tooltips  Calling webservices CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. XML AND JSON Thursday, March 18, 2010
  • 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. 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. 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. 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. 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. 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. 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. Who is responsible for the right 19 format? Web App. Webserver WebService Client event CRIA-WT - Rody Middelkoop Thursday, March 18, 2010
  • 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. 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. 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. 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. 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