请求和响应
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); |
function onResponse() { if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK") { // 此处是分析代码 } } |
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); } } |
值 | 状态 |
0 | Uninitialized(未初始化) |
1 | Loading(正在载入) |
2 | Loaded(已经载入) |
3 | Interactive(交互) |
4 | Complete(完成) |
var loader = "<img src='images/loader.gif'>"; ajax.checkReadyState('body', loader, loader, loader); |
请求状态
该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; } } |
if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK") { document.getElementById('body').innerHTML = ajax.request.responseText; } |
{ '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'} |
if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK") { eval("var response = ("+ajax.request.responseText+")"); document.getElementById('body').innerHTML = "<b>" + response.header + "</b><br/>" + response.description + "<br/><br/>" + "<a href='" + response.sourceUrl + "'>Download the source files</a>"; } |
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; |
document.getElementById('body').innerHTML = "<b>" + header + "</b><br/>" + description + "<br/><br/>" + "<a href='" + sourceUrl + "'>Download the source files</a>"; |