电脑爱好者,提供IT资讯信息及各类编程知识文章介绍,欢迎大家来本站学习电脑知识。 最近更新 | 联系我们 RSS订阅本站最新文章
电脑爱好者
站内搜索: 
当前位置:首页>> AJAX技术>>利用AJAX技术开发应用程序实战之二:

利用AJAX技术开发应用程序实战之二

来源:www.cncfan.com | 2006-3-15 | (有1896人读过)

六、 定制加载和错误处理消息

   你为onreadystatechange方法创建的事件处理器正是集中进行加载和处理错误的场所。现在到了考虑用户并针对他们与之交互的内容的状态提供反馈的时候了。在这个实例中,我针对所有的装载状态代码提供反馈,并且也对最经常发生的错误处理状态代码提供一些基本的反馈。为了显示请求对象的当前状态,readyState属性包括显示在下表中的一些值。

值 描述
0 未初始化,对象没有用数据进行初始化。
1 装载中,对象正在装载它的数据。
2 装载结束,对象完成了它的数据的装载。
3 可交互,用户能与对象交互了,尽管它还没有装载结束。
4 完成,对象已经完全被初始化。

   W3C中有很长的一串有关HTTP状态代码的定义。我选择了两个状态代码:

   ·200:请求成功了。
   ·404:服务器没有找到与所请求的文件相匹配的任何东西。

   最后,我检查任何另外的状况代码-它们将生成一个错误并提供一个一般错误信息。下面是一个代码示例-你可以用之来处理这些情况。注意,我在定位我们前面在HTML文件的主体中创建的div ID并且对它应用装载和/或错误信息-通过innerHTML方法-这个方法用于设置在div对象的开始和结束标签之间的HTML:

if(obj.readyState == 0)
{ document.getElementById('copy').innerHTML = "Sending Request...";}
if(obj.readyState == 1)
{ document.getElementById('copy').innerHTML = "Loading Response...";}
if(obj.readyState == 2)
{ document.getElementById('copy').innerHTML = "Response Loaded...";}
if(obj.readyState == 3)
{ document.getElementById('copy').innerHTML = "Response Ready...";}
if(obj.readyState == 4){
if(obj.status == 200){ return true; }
else if(obj.status == 404)
{
// 添加一个定制消息或把用户重定向到另外一个页面
document.getElementById('copy').innerHTML = "File not found";
}
else
{document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
}

   当状况代码为200时,这意味着请求成功。下面开始进行响应了。

七、 分析响应

   当你准备好分析来自请求对象的响应时,真正的工作开始了。现在你可以用你请求的数据开始工作。仅为测试目的,在开发期间,可以使用responseText和responseXML属性来显示来自响应的原始数据。为了存取XML响应中的结点,首先使用你创建的请求对象,定位到responseXML属性以检索(你可能已经猜测出来)来自响应的XML。定位到documentElement-它检索一个到XML响应的根结点的参考。

var response = request.responseXML.documentElement;

   现在既然你有了到响应的根结点的参考,那么你可以使用getElementsByTagName()以结点名字来检索childNodes。下面一行用一个头部的nodeName来定位一个childNode:

response.getElementsByTagName('header')[0].firstChild.data;

   使用firstChild.data可以允许你存取该元素中的文本:

response.getElementsByTagName('header')[0].firstChild.data;

   下面是怎样创建这些代码的完整的例子:

var response = request.responseXML.documentElement;
var header = response.getElementsByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header;

八、 需求分析

   现在既然你知道怎样使用AJAX的基础知识,那么下一步就是决定是否在一工程使用它。须记住的最重要的事情是,在你还没有刷新页面时你无法使用"Back"按钮。为此,可以先专注于你的工程中的一小部分-它能够从使用这种类型的交互中受益。例如,你可以创建一个表单-它在用户每次输入一个输入字段或一个字母时查询一个脚本以便进行实时校验。你可以创建一个拖放页面-在释放一项时,它能够把数据发送到一个脚本中并把该页面的状态保存到一个数据库中。使用AJAX的理由毫无疑问是存在的;并且这种使用无论对开发者还是用户都会带来益处;这全依赖于具体的条件和执行情况。

   还有其它方法可用来解决"Back"按钮的问题,例如使用Google Gmail-它现在能够为你的操作提供一种撤消功能而不刷新该页面。以后还会出现许多更具创造性的例子-它们将通过提供给开发者创建独特实时的体验的手段给用户带来更大的好处。

九、 结论

   尽管AJAX允许我们构建新的和改进的方式来与一个WEB页面进行交互;但是作为开发者,我们需要牢记产品是不考虑技术的;它关心的是用户以及其如何与用户进行交互。没有了用户群,我们构建的工程毫无用处。基于这个标准,我们就能评估应该使用什么技术以及何时使用它们来创建对相应用户有用的应用软件。

AJAX技术热门文章排行
网站赞助商
购买此位置

 

关于我们 | 网站地图 | 文档一览 | 友情链接| 联系我们

Copyright © 2003-2024 电脑爱好者 版权所有 备案号:鲁ICP备09059398号