Ajax处理服务器返回的Text/HTML、XML与JSON数据

本文主要介绍了如何使用Ajax处理服务器返回的三种不同数据类型，包括Text/HTML格式、XML格式以及JSON格式。通过示例代码详细解释了处理这些数据的方法。 在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种用于创建快速、动态网页的技术。它允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。在Ajax中，处理服务器返回的数据是关键步骤之一，根据不同的数据类型，处理方式会有所不同。 1. Text/HTML格式 这种数据类型是最常见的，服务器返回的内容通常可以直接作为字符串处理。文中提供了一个`ajaxText`函数的示例，该函数接受URL、Json数据和一个回调函数作为参数。它创建了一个XMLHttpRequest对象（或者对于旧版本的IE，创建ActiveXObject），然后以POST方式发送数据到指定URL。当服务器响应且状态码为200时，会调用回调函数`getMsg`，将接收到的文本数据作为参数传递。 ```javascript function ajaxText(url, jsonData, getMsg) { var oAjax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); oAjax.open('POST', url, true); var data = ''; for (var d in jsonData) { data += (d + '=' + jsonData[d] + '&'); } oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); oAjax.send(data); oAjax.onreadystatechange = function() { if (oAjax.readyState == 4 && oAjax.status == 200) { if (getMsg) getMsg(oAjax.responseText); } }; } ``` 2. XML格式 当服务器返回XML数据时，我们需要解析XML文档来获取其中的内容。在JavaScript中，可以使用`XMLHttpRequest`对象的`responseXML`属性来获取XML DOM对象。然后，可以使用DOM遍历和操作方法来提取和处理数据。 3. JSON格式 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。在JavaScript中，可以使用`JSON.parse()`方法将接收到的JSON字符串转换为JavaScript对象，便于操作。例如： ```javascript function ajaxJson(url, jsonData, getMsg) { var oAjax = new XMLHttpRequest(); oAjax.open('POST', url, true); oAjax.setRequestHeader("Content-type", "application/json"); oAjax.send(JSON.stringify(jsonData)); oAjax.onreadystatechange = function() { if (oAjax.readyState == 4 && oAjax.status == 200) { var response = JSON.parse(oAjax.responseText); if (getMsg) getMsg(response); } }; } ``` 服务器端在返回不同数据类型时，需要设置合适的Content-Type头部。对于XML，应设置为`text/xml;charset=utf-8`；对于Text/HTML或JSON，应设置为`text/html;charset=utf-8`。同时，为了避免浏览器缓存数据，通常还会添加`Cache-Control:no-cache`头部。 总结，处理Ajax返回的数据时，关键是根据数据类型选择正确的解析方法。Text/HTML可以直接作为字符串处理，XML需要解析DOM，而JSON则需要转换为JavaScript对象。通过合理的封装，可以构建灵活的Ajax通信机制，实现与服务器的有效交互。