笙亿网络策划

Ajax怎么用JSON发送和接收数据？

约 6 分钟读完 9 阅
文章导读
Previous Quiz Next AJAX 是 Asynchronous JavaScript and XML 的缩写，它是一组在客户端使用的相互关联的 Web 开发技术，用于创建异步 Web 应用程序。根据 AJAX 模型，Web 应用程序可以异步地向服务器发送和检索
📋 目录
  1. 一 示例
A A

使用 Ajax 的 JSON

Previous
Quiz
Next

AJAX 是 Asynchronous JavaScript and 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 = "https://www.example.com";
            var http_request = new XMLHttpRequest();
            try{
               // Opera 8.0+、Firefox、Chrome、Safari
               http_request = new XMLHttpRequest();
            }catch (e) {
               // Internet Explorer 浏览器
               try{
                  http_request = new ActiveXObject("Msxml2.XMLHTTP");
					
               }catch (e) {
				
                  try{
                     http_request = new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e) {
                     // 出现问题了
                     alert("Your browser broke!");
                     return false;
                  }
					
               }
            }
			
            http_request.onreadystatechange = function() {
			
               if (http_request.readyState == 4  ) {
                  // Javascript 函数 JSON.parse 用于解析 JSON 数据
                  var jsonObj = JSON.parse(http_request.responseText);

                  // jsonObj 变量现在包含数据结构，可以
                  // 通过 jsonObj.name 和 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>example.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 格式的数据，当我们点击 Update Detail 按钮时，它将被异步上传。此文件位于 https://www.example.com。

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

上述 HTML 代码将生成以下屏幕，您可以在其中查看 AJAX 的实际效果 −

Cricketer Details

Name Country
Sachin
India

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

Cricketer Details

Name Country
Brett
Australia