Dynamic webpages using AJAX & JSON

Dynamic webpages using AJAX & JSON

• 1.
  Christiaan Rakowski
• 2.
  Contents  AJAX  Javascript AJAX  jQuery AJAX  JSON  AJAX + JSON  Browser Detection Christiaan Rakowski 2012 2
• 3.
  AJAX  Asynchronous JavascriptAnd XML  1990 – Plain HTML  1996 – iframes  1998/1999 – XMLHTTP (ActiveX)  2006 – XMLHttpRequest (HTML5) Christiaan Rakowski 2012 3
• 4.
  Javascript AJAX var xmlHttpObject; functiongetXMLDataFromServer() { xmlHttpObject = new XMLHttpRequest(); xmlHttpObject.onreadystatechange = xmlHttpObjectChanged; xmlHttpObject.open("GET", 'data.xml', true); //Method, URL, Async, User, Pass xmlHttpObject.send(null); // „form data‟ } function xmlHttpObjectChanged() { /* 0: request not initialized, 1: server connection established, 2: request received, 3: processing request, 4: request finished and response is ready */ if (xmlHttpObject.readyState == 4) { alert(xmlHttpObject.response); } } Christiaan Rakowski 2012 4
• 5.
  jQuery AJAX $.get('data.xml', function(result){ alert(result); }); Christiaan Rakowski 2012 5
• 6.
  JSON  JavaScript Object Notation  { object }  “key” : “value”  “array” : [ 1, 2, 3 ]  var obj = { “error”: 0, “data” : “….” }  obj[“error”] == obj.error  http://json.org  http://jsonlint.com/ Christiaan Rakowski 2012 6
• 7.
  AJAX + JSON $.getJSON('data.json',function(result) { alert(result.data); }); Christiaan Rakowski 2012 7
• 8.
  Browser Detection  window.navigator User Agent String  (rule 34 also applies to jQuery plugins)  http://detectmobilebrowser.com/ Christiaan Rakowski 2012 8