AJAX and JSON
2 likes1,073 views
The document provides information about JSON and AJAX. It defines JSON as a lightweight data format that is human readable and easy for machines to parse. It describes the two structures that make up JSON - objects and arrays. It also discusses how to parse and convert JSON in JavaScript. The document then covers AJAX, defining it as a way for client-side JavaScript to request data from a server without refreshing the page. It provides the basic steps to send a simple AJAX request, including creating an XMLHttpRequest object and handling callbacks and responses.
![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.](https://image.slidesharecdn.com/lecture5-130108143213-phpapp01/85/AJAX-and-JSON-5-320.jpg)
AJAX and 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.
- 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