Dynamic webpages using AJAX & JSON

1,126 views

Published on

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.

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

  • Be the first to like this

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

No notes for slide

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

×