Ajax如何传输Json和xml数据

Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。它结合了XMLHttpRequest对象和JavaScript的DOM（文档对象模型）操作，实现了客户端和服务器端的异步数据交换。在Ajax中，经常使用的数据格式有JSON和XML。本文主要介绍如何使用Ajax传输JSON和XML数据。 了解JSON和XML的基本概念是必要的。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。XML（Extensible Markup Language）是一种标记语言，用于存储和传输数据。与JSON相比，XML更加复杂且占用空间更大，但XML支持更复杂的数据结构。 在Ajax传输数据中，JSON因为其轻便性，逐渐成为了主流的数据交换格式。而XML虽然使用率下降，但在一些遗留系统和特定的业务场景中仍然在使用。 ### Ajax传输JSON数据 在Ajax中传输JSON数据通常涉及以下步骤： 1. 创建JSON对象或字符串。 2. 使用`XMLHttpRequest`对象发送HTTP请求，并在请求中设置`Content-Type`为`application/json`。 3. 服务器端接收到JSON数据后，使用相应的语言（如Java、PHP等）解析JSON数据。 4. 根据业务逻辑处理数据，并返回响应。 5. 客户端接收到响应后，可以使用`JSON.parse()`方法将返回的JSON字符串转换为JavaScript对象，进而更新页面的DOM。 ### Ajax传输XML数据 与JSON类似，Ajax传输XML数据的步骤包括： 1. 创建XML格式的数据。 2. 同样使用`XMLHttpRequest`对象发起请求，设置`Content-Type`为`application/xml`或其他适合XML的MIME类型。 3. 服务器端接收到XML数据后，一般会使用流的方式读取XML数据，并通过解析库（例如dom4j）解析XML文档。 4. 服务器处理完业务逻辑后，将结果编码为XML格式发送回客户端。 5. 客户端通过`xhr.responseXML`属性接收XML数据，并可以使用JavaScript的DOM操作方法来处理这些数据。 ### 示例代码解析 在给定的文件内容中，包含两段使用Ajax传输数据的示例代码，分别是使用GET和POST方法传输XML数据。 #### GET方式传输XML数据 在GET方式的示例代码中，通过表单元素获取用户输入的"name"和"age"值，并构建一个查询字符串。然后创建一个`XMLHttpRequest`对象，并设置请求方式为"GET"。请求成功返回后，通过`responseXML`属性接收XML格式的数据，并使用JavaScript的DOM方法进行处理。 ```javascript function send1() { // 获取数据 var name = document.getElementsByName("name")[0].value; var age = document.getElementsByName("age")[0].value; // 创建XMLHttpRequest对象 var xhr = null; // ...此处省略了创建和初始化XMLHttpRequest对象的代码... // 设置请求的URL，包含参数 var url = "<c:url value='/XmlServlet?name='/>" + name + "&age=" + age; xhr.open("GET", url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 使用responseXML接收XML数据 var txt = xhr.responseText; alert(txt); } }; xhr.send(null); } ``` #### POST方式传输XML数据 在POST方式的示例代码中，同样获取"name"和"age"值并创建XML格式的数据字符串。设置`Content-Type`为"application/xml"（在实际代码中应包含此项设置）。发送请求后，服务器通过POST方法接收到XML数据，并返回包含用户信息的XML响应。客户端通过`responseXML`属性接收并解析XML数据。 ```javascript function send2() { // 获取数据并创建XML格式数据 var name = document.getElementsByName("name")[0].value; var age = document.getElementsByName("age")[0].value; var xml = "<user><name>" + name + "</name><age>" + age + "</age></user>"; // 创建XMLHttpRequest对象并设置请求 // ...此处省略了创建和初始化XMLHttpRequest对象的代码... xhr.open("POST", "<c:url value='/XmlServlet'/>", true); xhr.setRequestHeader("Content-Type", "application/xml"); // 设置请求头 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var xmlObj = xhr.responseXML; var users = xmlObj.getElementsByTagName("user"); for (var i = 0; i < users.length; i++) { var id = users[i].getAttribute("id"); // 使用DOM操作方法获取文本节点的值 var name = users[i].childNodes[0].firstChild.data; var age = users[i].childNodes[1].firstChild.data; alert(id + "," + name + "," + age); } } }; xhr.send(xml); } ``` ### 总结 Ajax传输JSON和XML数据都需要使用`XMLHttpRequest`对象进行异步请求。JSON通常更为简单和高效，是现代Web开发中的首选数据交换格式。而XML格式虽然功能强大，但使用复杂度较高，适用于那些需要保持XML特有结构的场景。在实际开发中，应当根据具体需求和现有技术栈，选择合适的数据格式进行Ajax传输。