在Ajax中使用JSON

AJAX是异步JavaScript和XML，它在客户端用作一组相互关联的Web开发技术，以便创建异步Web应用程序。根据AJAX模型，Web应用程序可以异步地从服务器发送和检索数据，而不会干扰显示和现有页面的行为。

许多开发人员使用JSON在客户端和服务器之间传递AJAX更新。更新直播体育比分的网站可以被视为AJAX的一个例子。如果必须在网站上更新这些分数，则必须将它们存储在服务器上，以便网页可以在需要时检索分数。这是我们可以使用JSON格式数据的地方。

使用AJAX更新的任何数据都可以使用Web服务器上的JSON格式进行存储。使用AJAX以便javascript可以在必要时检索这些JSON文件，解析它们并执行以下操作之一

将解析后的值存储在变量中，以便在网页上显示之前进行进一步处理。
它直接将数据分配给网页中的DOM元素，以便它们显示在网站上。

例

以下代码显示了带有AJAX的JSON。将其另存为 ajax.htm 文件。这里加载函数loadJSON()以异步方式用于上传JSON数据。

<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.codingdict.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>
      </div>

   </body>

</html>

下面给出的是输入文件 data.json ，其中包含JSON格式的数据，当我们单击“ 更新详细信息” 按钮时，这些数据将异步上载。该文件保存在 http://www.codingdict.com/json/

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

上面的HTML代码将生成以下屏幕，您可以在其中检查AJAX的运行情况

板球运动员详情

名称	国家
萨钦	印度

更新细节：

当您单击“ 更新详细信息” 按钮时，您应该得到如下结果。如果您的浏览器支持Javascript，您可以自己尝试使用AJAX JSON。

板球运动员详情

名称	国家
布雷特	澳大利亚