`
zendj
  • 浏览: 122173 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

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

阅读更多

深入理解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实战——深入理解AJAX

    【Ajax实战——深入理解AJAX】 Ajax,全称为"Asynchronous JavaScript and XML",是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。Ajax的核心在于利用JavaScript与服务器进行异步数据交换,结合XML...

    《深入理解Ajax基于JavaScript的RIA开发》配书源码

    《深入理解Ajax基于JavaScript的RIA开发》是一本专注于Web开发技术的专业书籍,其配书源码包含了一系列实际的示例和实践项目,旨在帮助读者深入掌握Ajax和基于JavaScript的富互联网应用(Rich Internet Applications...

    ajaxajaxajaxajax

    **Ajax技术详解** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够...同时,对`Notimeout.aspx`和`Notimeout.aspx.cs`的深入理解,有助于我们构建稳定、高效的服务端Ajax处理逻辑。

    深入浅出Ajax(Head Rush Ajax) 源码 书中代码

    "深入浅出Ajax"这本书通过丰富的实例和源码,旨在帮助读者理解Ajax的核心原理并学会在实际项目中应用。通过阅读和研究这些源码,不仅可以深化理论知识,还能提高实际编程能力,为成为精通Ajax的开发者打下坚实基础。

    深入浅出AJAX源码

    **深入浅出AJAX源码**,这是一份与AJAX技术密切相关的源代码资源,源自书籍《深入浅出AJAX》的配套光盘。AJAX(Asynchronous ...通过实践这些代码,你可以更深入地理解AJAX的工作原理,提升你的前端开发技能。

    Ajax 中的高级请求和响应

    在深入探讨Ajax的高级请求和响应之前,我们需要先理解几个核心概念,包括HTTP状态代码、就绪状态以及XMLHttpRequest对象。 **HTTP状态代码**是服务器向客户端返回的一种状态信息,它反映了服务器处理请求的结果。...

    图书馆添加删除判断 ajax.get 请求 ajax.post响应 考试专用

    前端提交数据后,服务器处理请求,返回响应信息(如操作成功与否,或错误消息)。前端需要处理这些响应,更新用户界面或显示错误提示。 为了实现以上功能,我们需要熟练掌握JavaScript和ECMAScript,这是编写前端...

    Ajax验证登录信息源码

    通过学习和分析这些源码,初学者可以深入理解Ajax验证登录信息的实现过程,掌握如何使用Ajax进行数据交互,从而提升Web应用的用户体验。同时,这也是一次了解前后端通信机制的好机会,对于进一步学习Web开发有着重要...

    Ajax 设置事件处理程序

    ### Ajax 设置事件处理程序:深入理解与实践 在探讨如何设置事件处理程序之前,我们首先应当明确何为事件处理程序及其在Ajax环境中的作用。事件处理程序是指在Web开发中,用于响应用户交互或其他特定事件的函数。在...

    Ajax技术原理深入解析

    Ajax 技术是一种在不刷新整个网页的情况下,能够更新部分网页...在未来的学习中,深入探索每个组成部分,如 JavaScript 事件处理、DOM 操作和服务器端接口设计,将有助于你更好地运用 Ajax 实现更复杂、更高效的应用。

    Ajax Ajax本质 Ajax本质源码

    Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是现代网页开发中的核心技术,它使得网页可以在不...对于初学者,通过阅读和分析给出的源码,可以深入理解Ajax的工作机制,并提高实际编程能力。

    ajax代码 ajax代码

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...通过深入理解Ajax的基本原理和实践技巧,开发者可以构建出更加用户友好的Web应用。

    深入浅出ajax书中源码

    在"深入浅出Ajax"这本书的源码中,你将看到各种Ajax技术的实际应用示例,包括上述知识点的实践,这将有助于你更全面地理解和掌握Ajax技术。通过学习和实践这些代码,你可以提升自己在Web开发中的Ajax运用能力,构建...

    AJAX异步处理原理分析

    在本文中,我们将深入探讨AJAX的核心原理,包括其工作流程、主要组成部分以及实际应用。 **1. AJAX工作流程** AJAX的工作流程可以分为以下几个关键步骤: 1. **创建XMLHttpRequest对象**:这是AJAX的核心,所有与...

    ajax.dll源码

    通过研究这些文件,我们可以深入理解ajax.dll的工作原理,包括它如何集成到ASP.NET框架中,如何处理前端AJAX请求,以及如何在后台执行相应的操作并返回结果。这不仅有助于优化现有的AJAX应用,还能够启发我们构建...

    Ajax chm pdf

    这本书涵盖了Ajax的基础概念、工作原理以及如何在实际项目中应用Ajax,是初学者入门和专业人士深入理解Ajax的理想资源。 XMLHttpRequest(XHR)是Ajax技术的核心组件,它允许JavaScript在不刷新页面的情况下与...

Global site tag (gtag.js) - Google Analytics