首页 > 编程笔记 > JavaScript笔记 > Ajax

AJAX解析请求得到的数据（多种格式）

在 JavaScript 中，一般将格式设置为 XML、HTML、JSON 或其他纯文本格式。具体使用哪种响应格式，可以参考下面几条原则。

获取 XML 数据

XMLHttpRequest 对象通过 responseText、responseBody、responseStream 或 responseXML 属性获取响应信息，说明如下表所示，它们都是只读属性。

XMLHttpRequest 对象响应信息属性
响应信息 说明
responseBody 将响应信息正文以 Unsigned Byte 数组形式返回
responseStream  以 ADO Stream 对象的形式返回响应信息
responseText 将响应信息作为字符串返回
responseXML 将响应信息格式化为 XML 文档格式返回

示例1

在服务器端创建一个简单的 XML 文档。 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <the>XML 数据</the>
然后，在客户端进行如下请求。createXHR() 方法在创建 XMLHttpRequest 对象中讲解过。 
  1. <input name="submit" type="button" id="submit" value="向服务器发出请求" />
  2. <script>
  3.     window.onload = function () {  //页面初始化
  4.         var b = document.getElementsByTagName("input")[0];
  5.         b.onclick = function () {
  6.             var xhr = createXHR();  //实例化XMLHttpRequest对象
  7.             xhr.open("GET", "server.xml", true);  //建立连接，要求异步响应
  8.             xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
  9.                 if (xhr.readyState == 4) {  //监听readyState状态
  10.                     if (xhr.state == 200 || xhr.status == 0) {  //监听HTTP状态码
  11.                         var info = xhr.responseXML;
  12.                         console.log(info.getElementsByTagName("the")[0].firstChild.data);  //返回元信息字符串“XML 数据”
  13.                     }
  14.                 }
  15.             }
  16.             xhr.send();  //发送请求
  17.         }
  18.     }
  19. </script>
在上面代码中，使用 XML DOM 的 getElementsByTagName() 方法获取 the 节点，然后再定位第一个 the 节点的子节点内容。此时如果继续使用 responseText 属性来读取数据，则会返回 XML 源代码字符串。

示例2

以示例 1 为例，使用服务器端脚本生成 XML 结构数据。 
  1. <?php
  2.     header('Content-Type: text/html;');
  3.     echo '<?xml version="1.0" encoding="utf-8"?><the>XML 数据</the>';  //输出XML
  4. ?>

获取 HTML 字符串

设计响应信息为 HTML 字符串，然后使用 innerHTML 把获取的字符串插入到网页中。

示例

在服务器端设计响应信息为 HTML 结构代码。 
  1. <table border="1" width="100%">
  2.     <tr><td>RegExp.exec()</td><td>通用的匹配模式</td></tr>
  3.     <tr><td>RegExp.test()</td><td>检测一个字符串是否匹配某个模式</td></tr>
  4. </table>
然后在客户端可以这样接收响应信息。 
  1. <input name="submit" type="button" id="submit" value="向服务器发出请求" />
  2. <script>
  3.     window.onload = function () {  //页面初始化
  4.         var b = document.getElementsByTagName("input")[0];
  5.         b.onclick = function () {
  6.             var xhr = createXHR();  //实例化XMLHttpRequest对象
  7.             xhr.open("GET", "server.xml", true);  //建立连接，要求异步响应
  8.             xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
  9.                 if (xhr.readyState == 4) {  //监听readyState状态
  10.                     if (xhr.state == 200 || xhr.status == 0) {  //监听HTTP状态码
  11.                         var o = document.getElementById("grid");
  12.                         o.innerHTML = xhr.responseText;  //直接插入到页面中
  13.                     }
  14.                 }
  15.             }
  16.             xhr.send();  //发送请求
  17.         }
  18.     }
  19. </script>

在某些情况下，HTML 字符串可能为客户端解析响应信息节省了一些 JavaScript 脚本，但是也带来了一些问题。

获取 JavaScript 脚本

设计相应为 JavaScript 代码，与 JSON 数据不同，它是可执行的命令或脚本。

示例

在服务器端请求文件中包含下面一个函数。 
  1. function () {
  2.     var d = new Date();
  3.     return d.toString();
  4. }
然后在客户端执行下面的请求。 
  1. <input name="submit" type="button" id="submit" value="向服务器发出请求" />
  2. <script>
  3.     window.onload = function () {  //页面初始化
  4.         var b = document.getElementsByTagName("input")[0];
  5.         b.onclick = function () {
  6.             var xhr = createXHR();  //实例化XMLHttpRequest对象
  7.             xhr.open("GET", "server.xml", true);  //建立连接，要求异步响应
  8.             xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
  9.                 if (xhr.readyState == 4) {  //监听readyState状态
  10.                     if (xhr.state == 200 || xhr.status == 0) {  //监听HTTP状态码
  11.                         var info = xhr.responseText;
  12.                         var o = eval("(" + info + ")" + "()");  //用eval()把字符串转换为脚本
  13.                         console.log(o);  //返回客户端当前信息
  14.                     }
  15.                 }
  16.             }
  17.             xhr.send();  //发送请求
  18.         }
  19.     }
  20. </script>
使用 eval() 方法时，在字符串前后附加两个小括号：一个是包含函数结构体的，一个是表示调用函数的。不建议直接使用 JavaScript 代码作为响应格式，因为它不能传递更丰富的信息，同时 JavaScript 脚本极易引发安全隐患。

获取 JSON 数据

使用 responseText 可以获取 JSON 格式的字符串，然后使用 eval() 方法将其解析为本地 JavaScript 脚本，再从该数据对象中读取信息。

示例

在服务器端请求文件中包含下面 JSON 数据。 
  1. { user : "css8", pass : "123456", email : "css8@123.cn" }
然后在客户端执行下面的请求。把返回 JSON 字符串转换为对象，然后读取属性值。 
  1. <input name="submit" type="button" id="submit" value="向服务器发出请求" />
  2. <script>
  3.     window.onload = function () {  //页面初始化
  4.         var b = document.getElementsByTagName("input")[0];
  5.         b.onclick = function () {
  6.             var xhr = createXHR();  //实例化XMLHttpRequest对象
  7.             xhr.open("GET", "server.xml", true);  //建立连接，要求异步响应
  8.             xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
  9.                 if (xhr.readyState == 4) {  //监听readyState状态
  10.                     if (xhr.state == 200 || xhr.status == 0) {  //监听HTTP状态码
  11.                         var info = xhr.responseText;
  12.                         var o = eval("(" + info + ")");  //调用eval()把字符串转换为本地脚本
  13.                         console.log(info);  //显示JSON对象字符串
  14.                         console.log(o.user);  //读取对象属性值，返回字符串“css8”
  15.                     }
  16.                 }
  17.             }
  18.             xhr.send();  //发送请求
  19.         }
  20.     }
  21. </script>
eval() 方法在解析 JSON 字符串时存在安全隐患。如果 JSON 字符串中包含恶意代码，在调用回调函数时可能会被执行。解决方法：先对 JSON 字符串进行过滤，屏蔽掉敏感或恶意代码。不过，确信所响应的 JSON 字符串是安全的，没有被人恶意攻击，那么可以使用 eval() 方法解析 JSON 字符串。

获取纯文本

对于简短的信息，可以使用纯文本格式进行响应。但是纯文本信息在传递过程中容易丢失，且没有办法检测信息的完整性。

示例

服务器端响应信息为字符串“true”，则可以在客户端这样设计。 
  1. var xhr = createXHR();  //实例化XMLHttpRequest对象
  2. xhr.open("GET", "server.txt", true);  //建立连接，要求异步响应
  3. xhr.nreadystatechange = function () {  //绑定响应状态事件监听函数
  4.     if (xhr.readyState == 4) {  //监听readyState函数
  5.         if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
  6.             var info = xhr.responseText;
  7.             if (info == "true") console.log("文本信息传输完整");  //检测信息是否完整
  8.             else console.log("文本信息可能存在丢失");
  9.         }
  10.     }
  11. }
  12. xhr.send();  //发送请求

所有教程

优秀文章