HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

JSON 与 Ajax

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

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

使用 AJAX 更新的任何数据都可以使用 JSON 格式存储在 Web 服务器上。使用 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.tutorialspoint.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.tutorialspoint.com/json/

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

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

运动员详情

Name Country
Sachin
India

单击Update Detail按钮时，您应该会得到如下结果。您可以自己尝试使用 AJAX 的 JSON，前提是您的浏览器支持 Javascript。

运动员详情

Name Country
Brett
Australia
❮ 上一节 下一节 ❯