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
<html>
<head>
<meta content="text/html; charset = ISO-8859-1" http-equiv="content-type">
<script type="application/javascript">
function loadJSONData(){
var data_file = "http://mysafeinfo.com/api/data?list=englishmonarchs&format=json";
var http_request = new XMLHttpRequest();
try{
// Opera 8.0+, Firefox, Chrome, Safari Browsers
http_request = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browser
try{
http_request = new ActiveXObject ("Msxml2.XMLHTTP");
}catch (e) {
try{
http_request = new ActiveXObject ("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert ("Your browser may have broken!");
return false;
}
}
}
http_request.onreadystatechange = function(){
if (http_request.readyState == 4 ){
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);
// jsonObj variable now contains the data structure which
// has data for name, country, house and years
document.getElementById ("Name").innerHTML = jsonObj[1].nm;
document.getElementById ("Country").innerHTML = jsonObj[1].cty;
document.getElementById ("House").innerHTML = jsonObj[1].hse;
document.getElementById ("Years").innerHTML = jsonObj[1].yrs;
}
}
http_request.open ("GET", data_file, true);
http_request.send ();
}
</script>
<title>Eduonix JSON Example</title>
</head>
<body>
<h1>Person Details</h1>
<table class="src" border="1">
<tr>
<th>Name</th>
<th>Country</th>
<th>House</th>
<th>Years</th>
</tr>
<tr>
<td><div id="Name">XYZ</div></td>
<td><div id="Country">India</div></td>
<td><div id="House">House of Lords</div></td>
<td><div id="Years">2017</div></td>
</tr>
</table>
<br>
<div class="central">
<button type="button" onclick="loadJSONData()">Update Details on Button Click</button>
</div>
</body>
</html>
Output
When we open the above HTML in a web browser, we can observe the following output on the browser.
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.
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.
