AJAX JSON Example

We can get JSON data by AJAX code. AJAX provides facility to get response asynchronously. It doesn't reload the page and saves bandwidth.

AJAX JSON Example

Let's see a simple example of getting JSON data using AJAX code.

<html>
<head>
<meta content="text/html; charset=utf-8">
<title>AJAX JSON by Javatpoint</title>
<script type="application/javascript">
function load()
{
   var url = "http://date.jsontest.com/";//use any url that have json data
   var request;

   if(window.XMLHttpRequest){  
    request=new XMLHttpRequest();//for Chrome, mozilla etc
   }  
   else if(window.ActiveXObject){  
    request=new ActiveXObject("Microsoft.XMLHTTP");//for IE only
   }  
   request.onreadystatechange  = function(){
      if (request.readyState == 4  )
      {
        var jsonObj = JSON.parse(request.responseText);//JSON.parse() returns JSON object
        document.getElementById("date").innerHTML =  jsonObj.date;
        document.getElementById("time").innerHTML = jsonObj.time;
      }
   }
   request.open("GET", url, true);
   request.send();
}
</script>
</head>
<body>

Date: <span id="date"></span><br/>
Time: <span id="time"></span><br/>

<button type="button" onclick="load()">Load Information</button>
</body>
</html>

Output: