AJAX JSON 实例

我们可以通过AJAX代码获取JSON数据。AJAX提供了异步获取响应的工具。它不会重新加载页面并节省带宽。

让我们看一个使用AJAX代码获取JSON数据的简单示例。

<html>
  
  <head>
    <meta content="text/html; charset=utf-8">
    <title>AJAX JSON by Javatpoint 前端之家 F2er.com</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>