Asynchronous JavaScript And XML is described relative to javascript, and a brief on JSON

2. Lecture Outline
 JSON
 AJAX

4. JSON
 http://www.json.org/
 A lightweight data-interchange format.
 Humans readable.
 Easy for machines to parse and generate.
 A text format that is completely language independent.
 An ideal data-interchange language.

5. JSON (Cont’d)
 Built on two structures:
 A collection of name/value pairs (object)
 An object begins with { and ends with }. Each name is
followed by : and the name/value pairs are separated by
‘,’ .
 An ordered list of values (array)
 An array begins with [ and ends with ]. Values are
separated by ‘,’ .
 A value can be a string in double quotes, or a number, or
true or false or null, or an object or an array.

6. JSON (Cont’d)
 There are libraries in nearly all languages to parse
JSON files.
 In JavaScript, these libraries contain function to
convert from objects to json text and vice versa.

7. Try JSON Library

9. AJAX
 Allows client-side JavaScript to request and receive
data from a server without refreshing the web page.
 Only partial reload occurs
 Jesse James Garrett originally coined the term Ajax in
2005.
(www.adaptivepath.com/publications/essays/archives
/000385.php ).
 Let web applications look and behave more like
desktop applications than web sites,

11. Steps to send a simple ajax
request
1. Create XMLHttpRequest Object
2. Open the request, set the HTTP method and URL
3. Set callback for onreadychange
4. Send asynchronous request
5. Create an event to call the previous steps

13. Sending Request
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = myCallback;
 xhr.open('GET', 'somefile.txt', true);
 xhr.send('');

14. For Cross-browser
compatibility

15. readyState values
Value Description
0 Uninitialized
1 Loading
2 Loaded
3 Interactive
4 Complete

16. Some status values
Value Description
200 Ok
204 No content
401 UnAuthorized
404 Not Found
411 Request Timeout

17. Processing Request
function myCallback() {
if (xhr.readyState < 4) {
return;
}
if (xhr.status !== 200) {
alert('Error!'); // the HTTP status code is not OK
return;
}
alert(xhr.responseText);
}

18. Try Ajax
Use Developer tools

19. References
 Object-Oriented JavaScript Create Scalable, reusable, high
quality JavaScript applications and libraries, Stoyan Stefanov,
2008.
 ECMAScript Language Specification, 5.1 edition, July 2011,
http://www.ecma-international.org/
 Beginning JavaScript, 4th Edition, Paul Wilton, Jeremy
McPeak, 2010