服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > 专题栏目 > WEB2.0新技术 > 查看文档

深入理解ajax响应信息的处理


  用户的交互操作(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='http://www.itus.cnimages/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 + "</b><br/>"
+ 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 + "</b><br/>"
+ description + "<br/><br/>"
+ "<a href='" + sourceurl + "'>download the source files</a>";

  用javascript的时候,json比xml要快一些,这是因为json所需要的分析代码比xml少很多,直接导致在分析大量数据的时候,json的速度较快。json不如xml的地方在于xml受到的支持更大、服务器端开发选项更多。你可以根据环境和请求的用途来做出选择。

  ajax响应信息是ajax通讯中的一个重要的部分。你需要处理很多方面的信息,包括就绪状态、错误处理和加载状态,并最终显示出来。有了这些信息之后,你就可以把注意力集中在响应信息上,为用户提供更多的信息。

扫描关注微信公众号