`

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

阅读更多

请求状态

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

<!-- 页脚 -->
分享到:
评论

相关推荐

    深入理解ajax系列第一篇之XHR对象

    前面的话  ajax是asynchronous javascript and XML的简写...XHR为向服务器发送请求和解析服务器响应提供了流畅的接口,能够以异步方式从服务器取得更多信息,意味着用户单击后,可以不必刷新页面也能取得新数据  IE5

    深入理解JavaScript中Ajax

    XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。 在浏览器中创建对象(只支持IE7及更高的版本): var xhr = new XMLHttpRequest(); XHR的用法 首先要介绍的是open&#40;&#...

    完整购物网站,前端页面html+css+js(结合jquery)开发,使用ajax技术发起请求,后端ervlet对前端请求响应

    完整购物网站,前端页面使用html+css+js(结合jquery)进行开发,使用ajax技术发起请求,后端使用servlet进行对前端请求的响应;网站主要实现了基本的用户登录、注册、浏览商品、查看商品详情、搜索商品、管理员登录...

    [深入浅出Javascript].Head.First.Javascript.Jan.2008

    《深入浅出JavaScript(影印版)》覆盖了所有的JavaScript基本知识,从基本网络编程技巧,如变量、函数和循环语句,到高级一些的专题,如表单验证、DOM操作、客户端对象、脚本程序调试——甚至Ajax!赶快做好准备快速...

    PHP和MySQL WEB开发(第4版)

    12.1 深入理解权限系统 12.1.1 user表 12.1.2 db表和host表 12.1.3 tables_priv表,columns_priv表和procs_priv表 12.1.4 访问控制:MySQL如何使用Grant表 12.1.5 更新权限:修改什么时候生效 12.2 提高MySQL数据库...

    Grails 中文参考手册

    10.1 理解信息绑定 10.2 改变Locales 10.3 读取信息 11. 安全 11.1 预防攻击 11.2 字符串的编码和解码 11.3 身份验证 11.4 关于安全的插件 11.4.1 Acegi 11.4.2 JSecurity 12 插件 12.1 创建和安装插件 12.2 理解...

    PHP和MySQL Web开发第4版pdf以及源码

    12.1 深入理解权限系统 12.1.1 user表 12.1.2 db表和host表 12.1.3 tables_priv表,columns_priv表和procs_priv表 12.1.4 访问控制:MySQL如何使用Grant表 12.1.5 更新权限:修改什么时候生效 12.2 提高MySQL...

    PHP和MySQL Web开发第4版

    12.1 深入理解权限系统 12.1.1 user表 12.1.2 db表和host表 12.1.3 tables_priv表,columns_priv表和procs_priv表 12.1.4 访问控制:MySQL如何使用Grant表 12.1.5 更新权限:修改什么时候生效 12.2 提高MySQL...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。  ...

    java web技术开发大全(最全最新)

    提供完整的应用案例,使读者可以深入体会SSH开发模式的精髓 所有开发工具和框架均使用目前的最新版本,紧跟技术发展的趋势 提供230个实例和4个综合案例,可以作为案头必备的查询手册 一线开发人员全力打造,分享技术...

    ASP.NET4高级程序设计(第4版) 3/3

    此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。  ...

    java web开发技术大全

    4.7.4 实例:用AJAX技术发送和接收中文信息 4.7.5 实例:在请求消息头和响应消息头中转输中文 4.8 小结 第5章 JSP技术 5.1 用MyEclipse编写第一个JSP程序 5.1.1 实例:编写显示服务器当前时间的JSP...

    java必了解的六大问题

    *第十二阶段:AJAX开发:AJAX原理,请求响应处理,AJAX开发库; *第十三阶段:轻量级框架,三大框架之一Struts框架的学习,自此踏入java web开发的精华部分,包括Struts体系架构,各种组件,标签库和扩展性的学习...

    深入浅出Struts 2 .pdf(原书扫描版) part 1

    书中介绍了如何利用Struts 2 来解决Web 应用开发中的常见问题,同时还深入浅出地探讨了许多能帮助程序员编写Struts 2 应用程序的技巧,如管理页面导航活动、输入验证、国际化和本地化、对Ajax 的支持,等等。...

    Java毕业设计-基于ssm框架开发的电子竞技管理平台的设计与实现+jsp-毕业论文(附源代码).rar

    SpringMVC框架则负责处理前端请求和响应,提供了灵活的URL映射和视图解析机制。MyBatis作为持久层框架,简化了数据库操作,提高了数据访问的效率。 在实现上,系统采用了JSP作为前端展示技术,结合HTML、CSS和...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

    第一部分 深入理解DOM脚本编程  第1章 遵循最佳实践   1.1 不唐突和渐进增强   1.2 让JavaScript运行起来   1.2.1 把行为从结构中分离出来   1.2.2 不要版本检测   1.2.3 通过平稳退化保证可访问...

Global site tag (gtag.js) - Google Analytics