JSON with Ajax
AJAX is an Asynchronous JavaScript and XML used on the client-side as a group of related web communication strategies to create smaller web applications. Depending on the AJAX model, web applications can send and retrieve data from the server consistently without interfering with the display and behavior of the existing page.
Any data updated using AJAX can be stored using the JSON format on a web server. AJAX is used so that JavaScript can retrieve these JSON files as needed, scan them, and perform one of the following tasks -
Keep the values separated by the variable to continue working before displaying them on a web page.
Provides specific information on DOM elements on a web page for display on the website.
For example
The following code shows JSON with AJAX. Save it as an ajax.htm file. Here the JSON () loading function is used interchangeably to load JSON data.
Live demo
<![CDATA[
<html>
<head>
<meta content = "text / html; charset = ISO-8859-1" http-equiv = "content type">
<script type = "application / javascript">
job loadJSON () {
Var data_file = "http://www.tutorialspoint.com/json/data.json";
var http_request = new XMLHttpRequest ();
try {
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest ();
} hold (e) {
// Internet Explorer browsers
try {
http_request = new ActiveXObject ("Msxml2.XMLHTTP");
} hold (e) {
try {
http_request = the new ActiveXObject ("Microsoft.XMLHTTP");
} hold (e) {
// Something went wrong
warning ("Your browser is broken!");
return false;
}
}
}
http_request.onreadystatechange = job () {
if (http_request.readyState == 4) {
// Javascript JSON.parse function to analyze JSON data
var jsonObj = JSON.parse (http_request.responseText);
The // jsonObj variable now contains data structure and can
// available as jsonObj.name and jsonObj.country.
document.getElementById ("Name"). Internal HTML = jsonObj.name;
document.getElementById ("Country"). innerHTML = jsonObj.country;
}
}
http_request.open ("GET", data_file, true);
http_request.send ();
}
</script>
<title> tutorialspoint.com JSON </title>
</head>
<body>
<h1> Cricketer Details </h1>
<table class = "src">
<tr> <th> Name </th> <th> Country </th> </tr>
<tr> <td> <div id = "Name"> Sachin </div> </td>
<td> <div id = "Country"> India </div> </td> </tr>
</table>
<div class = "middle">
<button type = "button" onclick = "loadJSON ()"> Update details </button>
</div>
</body>
</html>
]]>
