Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dynamic webpages using AJAX & JSON

Guest college Webtechnology, Avans Breda, 2012.
An introduction to AJAX and JSON using jQuery.
Slides might not mean much on their own, but do provide working samples for further use.

  • Be the first to comment

  • Be the first to like this

Dynamic webpages using AJAX & JSON

  1. 1. Christiaan Rakowski
  2. 2. Contents AJAX Javascript AJAX jQuery AJAX JSON AJAX + JSON Browser Detection Christiaan Rakowski 2012 2
  3. 3. AJAX Asynchronous Javascript And XML 1990 – Plain HTML 1996 – iframes 1998/1999 – XMLHTTP (ActiveX) 2006 – XMLHttpRequest (HTML5) Christiaan Rakowski 2012 3
  4. 4. Javascript AJAXvar xmlHttpObject;function getXMLDataFromServer() { 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. 5. jQuery AJAX$.get(data.xml, function(result) { alert(result);}); Christiaan Rakowski 2012 5
  6. 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. 7. AJAX + JSON$.getJSON(data.json, function(result) { alert(result.data);}); Christiaan Rakowski 2012 7
  8. 8. Browser Detection window.navigator User Agent String (rule 34 also applies to jQuery plugins) http://detectmobilebrowser.com/ Christiaan Rakowski 2012 8

×