AJAX Call

In this chapter, we are going to demonstrate an AJAX (Asynchronous JavaScript and XML) call by using JSON formatted data. AJAX stands for Asynchronous JavaScript and XML. It is one of the widely used technique to make asynchronous requests in the web application on the client side. AJAX technique allows the web application to send and retrieve data asynchronously from a server without reloading a web page on the client browser or interfering with the current web page displayed on the client side.

Like XML, we can also use JSON formatted data to transfer data between the client and the server asynchronously. It can be used in the web applications that requires live update on the webpage without reloading the webpage for the fresh data such as live score update in sports, stock price live update for a particular stock that changes every second, etc. JSON formatted data is heavily used for such websites in order to make the AJAX calls.

Random data which is required to be updated every second or minute using AJAX can be prepared and stored in the JSON formatted data as files on the web server. We can write code to retrieve Javascript from such JSON files and when required the data can be parsed from such JSON files and further processing can be performed by assigning the data directly to the DOM elements in the webpage in order to display the data asynchronously on the webpage without refresh or reloading of the webpage.

Example on JSON and AJAX call
In the following example, we have written code into json_ajax_demo.html file. Here, we are using the function ‘loadJSONData ()’ which is used asynchronously in order to upload the JSON data.

Also, JSON data file is available over internet at the below URL, we are going to read JSON formatted data from this URL and display it on the AJAX call i.e. on button’s click.
http://mysafeinfo.com/api/data?list=englishmonarchs&format=json

File json_ajax_demo.html

Output
When we open the above HTML in a web browser, we can observe the following output on the browser.

Eduonix JSON Ex

Now, click on the “Update Details on Button Click” button, which will trigger the AJAX call via function ‘loadJSONData ()’ and bring JSON data from the URL and render it on the browser as shown below. This is nothing but the working of AJAX over JSON formatted data.

Eduonix JSON Ex 2

Source code for the uses of JSON Formatted data for the AJAX Call

Conclusion: –
In this chapter, we discussed about the use of JSON formatted data for the AJAX call and demonstrated the concept with the help of a suitable example.

Learn How to Use JSON to Demonstrate an AJAX Call was last modified: by