用户的交互操作（interaction）驱动着Web站点。理解如何处理响应信息，特别是在使用新的交互操作形式（例如AJAX）的时候，这一点非常重要的。Kris Hadloc解释了AJAX请求－响应过程的本质，你应该了解这些内容，更好地为用户交互操作服务。
请求和响应
AJAX引擎分很多个方面，每个方面都很重要。如果引擎执行发送请求和接收响应信息的事务，那么它就有很多的处理响应信息的方法。响应信息是处理过程中的一个重要的部分，这是因为用户最终会与响应信息交互操作。本文详细解释了如何处理AJAX响应信息，并为用户提供反馈信息，根据需要进行更新。我们从请求的就绪状态开始，接着解释响应信息的状态、回调（callback）和分析响应信息。本文还解释了响应信息的其它一些方面，例如加载消息、错误处理和显示响应信息。
我建立了一个示例可供大家下载。这个示例包含了一个面向对象的AJAX引擎，你可以在任何AJAX应用程序中再次使用它。在讨论响应信息之前，我要指出如何建立AJAX引擎并发出请求。首先，让我们来看看AJAX引擎的代码（没有带上响应信息处理部分）：
document.write("script type="text/javascript" src="js/HTTP.js"/script");
function Ajax()
{
this.toString = function() { return "Ajax"; }
this.http = new HTTP();
this.makeRequest = function(_method, _url, _callbackMethod)
{
this.request = (window.XMLHttpRequest)？ new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP");
this.request.onreadystatechange = _callbackMethod;
this.request.open(_method, _url, true);
this.request.send(_url);
}
}
为了建立这个对象并发出请求，你只需要使用下面两行代码：
var ajax = new Ajax();
ajax.makeRequest('GET', 'xml/content.xml', onResponse);
上面的第二行代码反映了你选择的请求方法、XML的路径或请求的服务器端脚本、当接收到响应信息时你希望调用的回调方法。现在你对AJAX引擎和如何发出请求已经有了一定的了解，我们来看看如何处理请求。
就绪（Ready）状态
就绪状态由回调方法来处理，当我们做出请求的时候，回调方法就已经设置好了。在例子中，onResponse被设置为回调方法，它在本文中被用于处理所有的分析代码的操作。我们将使用下面的代码来检测回调方法中的AJAX对象的就绪状态：
function onResponse()
{
if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK")
{
// 此处是分析代码
}
}
上面的代码显示，我们将向checkReadyState方法传递四个参数。第一个参数是我们希望显示的加载（loading）消息div的ID、其它三个参数都是自定义的对应于不同状态的加载消息。我选择的用于加载消息的div的名字是body，它使得新数据在被载入的时候，内容和加载消息是合并在一起的。下面是实际的checkReadyState方法，它处理了我们刚才讨论的代码，并在div中向我们传递进去的参数来显示它。这个方法也被包含在示例AJAX引擎中了。
this.checkReadyState = function(_id, _1, _2, _3)
{
switch(this.request.readyState)
{
case 1:
document.getElementById(_id).innerHTML = _1;
break;
case 2:
document.getElementById(_id).innerHTML = _2;
break;
case 3:
document.getElementById(_id).innerHTML = _3;
break;
case 4:
document.getElementById(_id).innerHTML = "";
return this.http.status(this.request.status);
}
}
checkReadyState方法为用户提供页面状态的反馈信息是有用处的。下表显示了它检测的值：
值 状态
0 Uninitialized（未初始化）
1 Loading（正在载入）
2 Loaded（已经载入）
3 Interactive（交互）
4 Complete（完成）
你可以为每种加载状态添加一个自定义的消息--它可以是一个简单的字符串，也可以是字符串格式的图片标签（例如显示一个动画的加载GIF）。下面就是一个例子：
var loader = "img src='images/loader.gif'";
ajax.checkReadyState('body', loader, loader, loader);
不仅checkReadyState方法处理请求状态，它所包含的HTTP对象也会检测和返回请求的状态。
请求状态
该AJAX对象的请求状态与被请求文件的HTTP状态是一样的。包含在AJAX文件中的HTTP对象处理了所有的W3C描述的HTTP状态代码定义，并把它们返回给请求方法。状态代码被分成了五个部分：
· 信息的 1xx
· 成功的 2xx
· 重定向 3xx
· 客户端错误 4xx
· 服务器错误 5xx
上面的数字中的最前面一位表示某种类别的状态代码。例如，成功的是2xx，它的意思是包含了200－299之间的所有状态代码。HTTP对象检查状态代码的第一位数字，并根据代码所属的类别，执行一次转换。在检测出类别之后，HTTP对象把它发送给响应方法，该方法把状态代码作为字符串的形式返回。这就是HTTP状态方法：
this.status = function(_status)
{
var s = _status.toString().split("");
switch(s[0])
{
case "1":
return this.getInformationalStatus(_status);
break;
case "2":
return this.getSuccessfulStatus(_status);
break;
case "3":
return this.getRedirectionStatus(_status);
break;
case "4":
return this.getClientErrorStatus(_status);
break;
case "5":
return this.getServerErrorStatus(_status);
break;
}
}
状态代码是通过检测该代码的第一位数字来处理的。一旦完成了代码检测，原始的状态代码就被发送到一个适当的方法中，该方法给onResponse方法发送一个字符串形式的状态代码。接着我们就可以把这条消息显示给用户，如果遇到了什么错误，她/他就知道发生了什么情况。另一方面，如果请求是成功的，那么就显示数据。
ResponseText和ResponseXML
响应信息的内容可能有多种不同的形式，例如XML、纯文本、（X）HTML或JavaScript对象符号（JSON）。我们可以根据所接收到的数据格式的不同，用两种不同的方法来处理：使用responseText或者responseXML。responseText方法用于那些并非基于XML的格式。它把响应信息作为字符串，返回精确的内容。纯文本、（X）HTML和JSON都使用responseText。在纯文本或HTML上使用这个方法是很简单的：
if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK")
{
document.getElementById('body').innerHTML = ajax.request.responseText;
}
它最简单不过了！一旦载入响应信息完成，我们就调用AJAX对象，用responseText来检索它的值，并把它添加到页面上。
处理JSON响应信息比处理纯文本或（X）HTML需要多一点技巧。下面是我们分析一个JSON文件的示例：
{ 'header' : 'How to Handle the Ajax Response',
'description' : 'An in-depth explanation of how to handle the Ajax response.',
'sourceUrl' : 'http://www.krishadlock.com/clients/informit/AjaxResponse/AjaxResponse.zip'}
数据被冒号（:）分成了两个部分：标签名称和值。附加的数据被逗号（,）分成新的名称/值对。现在我们知道了JSON的样子了，下面是我们分析它的方法：
if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK")
{
eval("var response = ("+ajax.request.responseText+")");
document.getElementById('body').innerHTML = "b" + response.header + "/bbr/"
+ response.description + "br/br/"
+ "a href='" + response.sourceUrl + "'Download the source files/a";
}
JSON数据首先由JavaScript来分析（使用简单的eval()过程）。一旦数据被分析好了并建立了响应信息对象，我们就可以简单地通过名字来获取它们的响应信息值。
responseText不仅可以给页面添加内容，它在调试AJAX请求的时候也有用处。例如，你可能还没有准备好分析数据，因为你还不知道所有的标签是什么样的，是XML格式的还是JSON文件。这就要求有一种用于检测被分析数据的途径。一旦你知道了所有的标签名称，所需要做的事情就只是编写代码了。
responseXML的使用也相当简单。但是与JSON格式类似，XML要求进行数据分析。我们需要执行的第一项事务是识别出XML响应信息中的根节点。
var response = ajax.request.responseXML.documentElement;
下一步，我们通过名称获取所有的元素并得到它们的值：
var header = response.getElementsByTagName('header')[0].firstChild.data;
var description = response.getElementsByTagName('description')[0].firstChild.data;
var sourceUrl = response.getElementsByTagName('sourceUrl')[0].firstChild.data;
最后，我们把响应信息显示在相应的div标记中：
document.getElementById('body').innerHTML = "b" + header + "/bbr/"
+ description + "br/br/"
+ "a href='" + sourceUrl + "'Download the source files/a";
用JavaScript的时候，JSON比XML要快一些，这是因为JSON所需要的分析代码比XML少很多，直接导致在分析大量数据的时候，JSON的速度较快。JSON不如XML的地方在于XML受到的支持更大、服务器端开发选项更多。你可以根据环境和请求的用途来做出选择。
（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）AJAX响应信息是AJAX通讯中的一个重要的部分。你需要处理很多方面的信息，包括就绪状态、错误处理和加载状态，并最终显示出来。有了这些信息之后，你就可以把注意力集中在响应信息上，为用户提供更多的信息。
