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.html", 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>

<!-- Mirrored from www.javatpoint.com/ajax-json-example by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 21 Jun 2016 07:55:52 GMT -->
</html>

Output:

Date: 
Time:

Next TopicJSON Object

← prev next →

JSON Tutorial

PHP JSON

Java JSON

AJAX JSON

AJAX JSON Example

AJAX JSON Example