当前位置: 网学 > 编程文档 > Ajax > 正文

使用AJAX进行WEB应用程序开发的方法

来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 13/07/11
状态发生变化时作出响应。一旦我们完成请求,我们就开始创建这个方法。打开连接以GET或 POST一个定制的URL-在此是一个content.xml,并且设置一个布尔定义-是否你想要进行异步调用。

现在到了发出请求的时间了。在这个示例中,我使用了null,因为我们使用的是GET; 为了使用 POST,你需要使用下面这个方法发出一个查询串:

request.onreadystatechange = onResponse;

request.open("GET". url, true);

request.send (null);

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

你为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实现(HELLO AJAX)
  • 网学推荐

    免费论文

    原创论文

    设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
    版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号