AJAX JSON範例 - tw511教學網

我們可以通過AJAX程式碼獲取JSON資料。 AJAX提供了非同步獲取響應的工具。它不會重新載入頁面並節省頻寬。

AJAX JSON範例

下面我們看一個使用AJAX程式碼獲取JSON資料的簡單範例。

<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>