JSON with Ajax

Advertisements


Ajax is Asynchronous JavaScript and XML which is used on client side as group of interrelated web development techniques in order to create asynchronous web applications. According to Ajax model, web applications can send data and retrieve data from a server asynchronously without interfering with the display, behavior of existing page.

Many developers use JSON to pass AJAX updates between client and server. Websites updating live sports scores can be considered as an example of AJAX. If these scores have to be updated on the website, then they must be stored on the server so that the webpage can retrieve the score when it is required. This is where we can make use of JSON formatted data.

Any data that is updated using AJAX can be stored using the JSON format on web server. Ajax is used so that javascript can retrieve these JSON files when necessary, they parse them and then does of the two:

  • Store the parsed values in variables for further processing before displaying them on the webpage

  • It directly assign the data to the DOM elements in the webpage, so that it gets displayed on the website.

Example

The below code shows JSON with Ajax, save it in ajax.htm file. Here loading function loadJSON() will be used asynchronously to upload JSON data.

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="application/javascript">
function 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();
   }catch (e){
      // Internet Explorer Browsers
      try{
         http_request = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
            // Something went wrong
            alert("Your browser broke!");
            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 and can
        // be accessed as jsonObj.name and jsonObj.country.
        document.getElementById("Name").innerHTML =  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="central">
<button type="button" onclick="loadJSON()">Update Details </button>
</body>
</html>

Following is the input file data.json having data in JSON format which will be uploaded asynchronously when we click Update Detail button. This file is being kept in http://www.tutorialspoint.com/json/

{"name": "brett", "country": "Australia"}

Above HTML code will generate following screen, where you can check AJAX in action:

Cricketer Details

NameCountry
Sachin
India

When you click on Update Detail button, you should get a result something as follows, you can try it yourself JSON with AJAX provided your browser supports Javascript.

Cricketer Details

NameCountry
brett
Australia


Advertisements
Advertisements