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

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

获取 XML 数据

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

the XML 数据 /the

然后，在客户端进行如下请求。createXHR() 方法在创建 XMLHttpRequest 对象中讲解过。

 input name= submit type= button id= submit value= 向服务器发出请求 / 

 script 

 window.onload = function () { //页面初始化

 var b = document.getElementsByTagName( input )[0];

 b.onclick = function () {

 var xhr = createXHR(); //实例化XMLHttpRequest对象

 xhr.open( GET , server.xml , true); //建立连接，要求异步响应

 xhr.onreadystatechange = function () { //绑定响应状态事件监听函数

 if (xhr.readyState == 4) { //监听readyState状态

 if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码

 var info = xhr.responseXML;

 console.log(info.getElementsByTagName( the )[0].firstChild.data); //返回元信息字符串 XML 数据 

 xhr.send(); //发送请求

 /script 

在上面代码中，使用 XML DOM 的 getElementsByTagName() 方法获取 the 节点，然后再定位第一个 the 节点的子节点内容。此时如果继续使用 responseText 属性来读取数据，则会返回 XML 源代码字符串。

以示例 1 为例，使用服务器端脚本生成 XML 结构数据。

 ?php

 header( Content-Type: text/html; 

 echo ?xml version= 1.0 encoding= utf-8 ? the XML 数据 /the //输出XML

? 

获取 HTML 字符串

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

在服务器端设计响应信息为 HTML 结构代码。

 table border= 1 width= 100% 

 tr td RegExp.exec() /td td 通用的匹配模式 /td /tr 

 tr td RegExp.test() /td td 检测一个字符串是否匹配某个模式 /td /tr 

 /table 

然后在客户端可以这样接收响应信息。

 input name= submit type= button id= submit value= 向服务器发出请求 / 

 script 

 window.onload = function () { //页面初始化

 var b = document.getElementsByTagName( input )[0];

 b.onclick = function () {

 var xhr = createXHR(); //实例化XMLHttpRequest对象

 xhr.open( GET , server.xml , true); //建立连接，要求异步响应

 xhr.onreadystatechange = function () { //绑定响应状态事件监听函数

 if (xhr.readyState == 4) { //监听readyState状态

 if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码

 var o = document.getElementById( grid 

 o.innerHTML = xhr.responseText; //直接插入到页面中

 xhr.send(); //发送请求

 /script 

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

响应信息中包含大量无用的字符，响应数据会变得很臃肿。因为 HTML 标记不含有信息，完全可以把它们放置在客户端，由 JavaScript 脚本负责生成。 响应信息中包含的 HTML 结构无法有效利用，对于 JavaScript 脚本来说，它们仅仅是一堆字符串。同时结构和信息混合在一起，也不符合标准化设计原则。
获取 JavaScript 脚本

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

在服务器端请求文件中包含下面一个函数。

function () {

 var d = new Date();

 return d.toString();

}

然后在客户端执行下面的请求。

 input name= submit type= button id= submit value= 向服务器发出请求 / 

 script 

 window.onload = function () { //页面初始化

 var b = document.getElementsByTagName( input )[0];

 b.onclick = function () {

 var xhr = createXHR(); //实例化XMLHttpRequest对象

 xhr.open( GET , server.xml , true); //建立连接，要求异步响应

 xhr.onreadystatechange = function () { //绑定响应状态事件监听函数

 if (xhr.readyState == 4) { //监听readyState状态

 if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码

 var info = xhr.responseText;

 var o = eval( ( + info + ) + () //用eval()把字符串转换为脚本

 console.log(o); //返回客户端当前信息

 xhr.send(); //发送请求

 /script 

使用 eval() 方法时，在字符串前后附加两个小括号：一个是包含函数结构体的，一个是表示调用函数的。不建议直接使用 JavaScript 代码作为响应格式，因为它不能传递更丰富的信息，同时 JavaScript 脚本极易引发安全隐患。

获取 JSON 数据

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

在服务器端请求文件中包含下面 JSON 数据。

{ user : css8 , pass : 123456 , email : css8@123.cn }

然后在客户端执行下面的请求。把返回 JSON 字符串转换为对象，然后读取属性值。

 input name= submit type= button id= submit value= 向服务器发出请求 / 

 script 

 window.onload = function () { //页面初始化

 var b = document.getElementsByTagName( input )[0];

 b.onclick = function () {

 var xhr = createXHR(); //实例化XMLHttpRequest对象

 xhr.open( GET , server.xml , true); //建立连接，要求异步响应

 xhr.onreadystatechange = function () { //绑定响应状态事件监听函数

 if (xhr.readyState == 4) { //监听readyState状态

 if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码

 var info = xhr.responseText;

 var o = eval( ( + info + ) //调用eval()把字符串转换为本地脚本

 console.log(info); //显示JSON对象字符串

 console.log(o.user); //读取对象属性值，返回字符串 css8 

 xhr.send(); //发送请求

 /script 

eval() 方法在解析 JSON 字符串时存在安全隐患。如果 JSON 字符串中包含恶意代码，在调用回调函数时可能会被执行。解决方法：先对 JSON 字符串进行过滤，屏蔽掉敏感或恶意代码。不过，确信所响应的 JSON 字符串是安全的，没有被人恶意攻击，那么可以使用 eval() 方法解析 JSON 字符串。

获取纯文本

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

服务器端响应信息为字符串 true ，则可以在客户端这样设计。

var xhr = createXHR(); //实例化XMLHttpRequest对象

xhr.open( GET , server.txt , true); //建立连接，要求异步响应

xhr.nreadystatechange = function () { //绑定响应状态事件监听函数

 if (xhr.readyState == 4) { //监听readyState函数

 if (xhr.status == 200 || xhr.status == 0) { //监听HTTP状态码

 var info = xhr.responseText;

 if (info == true ) console.log( 文本信息传输完整 //检测信息是否完整

 else console.log( 文本信息可能存在丢失 

xhr.send(); //发送请求

23332.html

CSShtmljavaJavaScriptphp