AJAX and JSON

732 views

Published on

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

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

No Downloads
Views
Total views
732
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

AJAX and JSON

  1. 1. Lecture Outline JSON AJAX
  2. 2. 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.
  3. 3. 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.
  4. 4. 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.
  5. 5. Try JSON Library
  6. 6. 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,
  7. 7. Steps to send a simple ajax request1. Create XMLHttpRequest Object2. Open the request, set the HTTP method and URL3. Set callback for onreadychange4. Send asynchronous request5. Create an event to call the previous steps
  8. 8. Sending Request var xhr = new XMLHttpRequest(); xhr.onreadystatechange = myCallback; xhr.open(GET, somefile.txt, true); xhr.send();
  9. 9. For Cross-browser compatibility
  10. 10. readyState valuesValue Description0 Uninitialized1 Loading2 Loaded3 Interactive4 Complete
  11. 11. Some status valuesValue Description200 Ok204 No content401 UnAuthorized404 Not Found411 Request Timeout
  12. 12. Processing Requestfunction myCallback() { if (xhr.readyState < 4) { return; } if (xhr.status !== 200) { alert(Error!); // the HTTP status code is not OK return; } alert(xhr.responseText); }
  13. 13. Try AjaxUse Developer tools
  14. 14. 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

×