Introduction to JSON & Ajax
0 likes175 views
This document provides an overview of JSON and AJAX. It defines JSON as a syntax for storing and exchanging data that is easier to use than XML. The document compares JSON and XML and provides examples of JSON syntax including objects, arrays, and strings. It also explains how AJAX allows asynchronous data exchange in the background to update parts of a web page without reloading. The core XMLHttpRequest object and jQuery methods for AJAX requests are described.
Introduction to JSON & Ajax
- 2. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 2 • JSON is a syntax for storing and exchanging data • JSON is an easier-to-use alternative to XML • JSON is language independent • JSON uses JavaScript syntax, but the JSON format is text only, just like XML
- 3. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 3 JSON XML
- 4. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 4 Similarities • Both JSON and XML are hierarchical (values within values) • Both JSON and XML can be parsed by any programming language • Both JSON and XML can be fetched with an XMLHttpRequest Differences • JSON doesn't use end tag • JSON is shorter • JSON is quicker to read and write • JSON can use arrays • XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function
- 5. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 5 • JSON syntax is derived from JavaScript object notation • Example: • Javascript Object • JSON Object • JSON Text/String • JSON Array
- 6. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 6 • Data is in name/value pairs • name and value are separated by “:” and field name is double quoted • Value can be • A number (integer or floating point) • A string (in double quotes) • A Boolean (true or false) • An array (in square brackets) • An object (in curly braces) • null
- 7. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 7 • The JavaScript function JSON.parse(text) can be used to convert a JSON text into a JavaScript object: • The JavaScript function JSON.stringify(object) can be used to convert JavaScript object to JSON String
- 8. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 8 • A common use of JSON is to exchange data between the client and a web server • Objects in PHP can be converted into JSON by using the PHP function json_encode()
- 9. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 9 Asynchronous JavaScript and XML • AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes • With Ajax you can:- • Update a web page without reloading the page • Request data from a server - after the page has loaded • Receive data from a server - after the page has loaded • Send data to a server - in the background • Examples of applications using AJAX: • Google Maps, Gmail, YouTube, and Facebook.
- 10. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 10
- 11. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 11 • Many of the tasks performed on the server are very time consuming. Before AJAX, retrieving data from server behind the scenes could cause the application to hang or stop • With AJAX, the JavaScript does not have to wait for the server response, but can instead: • execute other scripts while waiting for server response • deal with the response when the response ready
- 12. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 12 XMLHttpRequest Object • The keystone of AJAX is the XMLHttpRequest object • The XMLHttpRequest object is used to exchange data with a server behind the scenes • Syntax for creating an XMLHttpRequest object: • var xhttp = new XMLHttpRequest();
- 13. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 13 Send a Request to a Server • To send a request to a server, the open() and send() methods of the XMLHttpRequest object are used: Method Description open(method, url, async) Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) send() Sends the request to the server (used for GET) send(string) Sends the request to the server (used for POST)
- 14. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 14 Send a Request to a Server … • xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); • xhttp.open("GET", “reg.php?fname=Henry&lname=Ford", true); xhttp.send(); • xhttp.open("POST", "demo_post.php", true); xhttp.send(); • To POST form, add an HTTP header with setRequestHeader() xhttp.open("POST", "ajax_test.asp", true); xhttp.setRequestHeader("Content-type", "application/x-www-form- urlencoded"); xhttp.send("fname=Henry&lname=Ford");
- 15. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 15 AJAX - Server Response • The response from a server, can be accessed through the responseText or responseXML property of the XMLHttpRequest object • responseText - get the response data as a string • responseXML - get the response data as XML data • document.getElementById("demo").innerHTML = xhttp.responseText;
- 16. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 16 • The readyState property holds the status of the XMLHttpRequest: Changes from 0 to 4 • 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready • The onreadystatechange event is triggered every time the readyState changes.
- 17. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 17 • onreadystatechange event: specify what will happen when the server response is ready to be processed • When readyState is 4 and status is 200, the response is ready
- 18. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 18 • If you have more than one AJAX task on your website, you should create ONE standard function for creating the XMLHttpRequest object, and call this for each AJAX task
- 19. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 19 • jQuery provides several methods for AJAX functionality. • With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post
- 20. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 20 • The load() method loads data from a server and puts the returned data into the selected element • Syntax • $(selector).load(URL,data,callback); • URL: required parameter, specifies the URL you wish to load. • data: optional, specifies a set of querystring key/value pairs to send along with the request. • callback: optional, is the name of a function to be executed after the load() method is completed. • $("#div1").load("demo_test.txt");
- 21. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 21 • specifies a callback function to run when the load() method is completed • The callback function can have different parameters: • responseTxt - contains the resulting content if the call succeeds • statusTxt - contains the status of the call • xhr - contains the XMLHttpRequest object
- 22. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 22 • The jQuery get() and post() methods are used to request data from the server with an HTTP GET or POST request • GET is used for just getting data from the server • Note: The GET method may return cached data • POST can also be used to get some data from the server. However, the POST method NEVER caches data, and is often used to send data along with the request.
- 23. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 23 • The $.get() method requests data from the server with an HTTP GET request. • Syntax • $.get(URL,callback); • URL : required parameter, specifies the URL you wish to request. • callback: optional parameter , is the name of a function to be executed if the request succeeds. Has two parameters: • Data: holds the content of the page requested • Status: holds the status of the request
- 24. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 24
- 25. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 25 • The $.post() method requests data from the server with an HTTP POST request. • Syntax • $.get(URL,data, callback); • URL : required parameter, specifies the URL you wish to request. • data: optional, specifies some data to send along with the request • callback: optional parameter , is the name of a function to be executed if the request succeeds. Has two parameters: • Data: holds the content of the page requested • Status: holds the status of the request
- 26. C O M P I L E D B Y : S E B L E N . D E P A R T M E N T O F C O M P U T E R S C . A D D I S A B A B A U N I V E R S I T Y 26