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.

1. Christiaan Rakowski

2. Contents
 AJAX
 Javascript AJAX
 jQuery AJAX
 JSON
 AJAX + JSON
 Browser Detection
Christiaan Rakowski 2012 2

3. AJAX
 Asynchronous Javascript And XML
 1990 – Plain HTML
 1996 – iframes
 1998/1999 – XMLHTTP (ActiveX)
 2006 – XMLHttpRequest (HTML5)
Christiaan Rakowski 2012 3

4. Javascript AJAX
var 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. 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