没有合适的资源?快使用搜索试试~ 我知道了~
如何使用Ajax技术开发Web应用程序
需积分: 9 3 下载量 149 浏览量
2014-11-26
11:13:09
上传
评论
收藏 83KB DOC 举报
温馨提示
试读
11页
如何使用Ajax技术开发Web应用程序如何使用Ajax技术开发Web应用程序
资源推荐
资源详情
资源评论
在过去,由于为了获得新数据而不得不重新加载 页面(或者加载其他页面)导致 应用程序发展
被限制。虽然有其他方法可用(不加载其他页面),但是这些技术都没有被很好地支持而且有 成灾
的趋向。在过去的几个月里,一个过去并不被广泛支持的技术已经被越来越多的 冲浪者(
是指浏览器还是浏览者?)所接受,它给了开发者更多的自由开发先进的 应用程序。这些
通过 来异步取得 数据的应用程序,被亲切的称为“ 应用程序”(
)。在这篇文章中,我将会解释如何通过 来取回一个远程的
文件并更新一个 ,并且随着这个系列的继续,我将讨论更多的方法,使用 技术将你
的 应用程序提升到一个新的层次
这第一步就是创建一个带一些数据的 文件。我们将这个文件命名为 。它是一个简单的
文件,而在一个真实的程序中,它会复杂许多,但对于我们的例子来说,简单明了是最合适地。
!"#$"!"%&'()"* * *这是一些示例数据,它被保存在一个
文件中,并被 + 取回。 ,* ,*
现在让我们创建一个简单的 页面包含一些示例数据。这个页面将是我们的 脚本所在,并且这
个页面将会让用户们访问柄看到 脚本的运行。我们把它命名为
-./0&1232%450"(,,670,,.&.8&9$#,,3:"
";,,7,&<,9,"*
!"="!""*
*
(>!"0(&"!",?!@7#@"*
*使用 开发 应用程序 (示例 ,*
,*
*
#*使用 开发 应用程序 ,#*
*这个页面演示了 技术如何通过动态读取一个远程文件来更新一个网页的内容--不需要任
何网页的重新加载。注意:这个例子对于禁止 的用户来说没有效果。 ,*
!"/"*
这是一些示例数据,它是这个网页的默认数据 !""
!"查看这个 数据"A!"<BCCD?!CC?
"*查看 数据 ,*
,*
,*
,*
注意,对于那些没有 的用户,我们直接链接到 文件。对于那些允许运行
的用户,函数“<E将被运行,这个链接被隐藏,并不会被转向到那个 文件。
函数“<E现在还没定义。所以如果你要检验上面的示例代码,你会得到一个 错误。让
我们继续并定义这个函数(还有其他的),让你能够看到 是如何工作的,下面的脚本要放到你的
标签里:
!","* -((
<BFDG
/!?
B8<>DG
/!8<>BD?
HB/DG
/!/B"8&&2"D?
HG
?
H
/!BDG
B/+!!9DG
/BC/CI /34&:BCCD
J$KF0D?
H
H
/BCL3&CIFID?
/BCCD?
H
/BIDG
345BDF0!?
H
,,((* ,*
这堆代码有点多,让我们一点点的进行。第一个函数叫做“ <E-也就是我们在页面的“查看
数据”链接中调用的函数,我们定义了一个“/E变量-这将作为客户端(用户正在查看的这个
页面)以及服务端( 站点本身)之间的中间件。我们在一个 , 块中定义这个对象:
B8<>DG
/!8<>BD?
HB/DG
/!/B"8&&2"D?
HG
?
H
这只是一个对不同对象是否可用的测试-某些浏览器实现了不同的 8<> 对象,所以当
我们定义“/E作为我们的 8<> 对象时,我们不得不根据浏览器所实现的来定义它。如
果没有可用的 8<> 对象,我们将执行“E语句结束这个函数以避免脚本错误。在大部
分情况下,这个检验将返回一个 8<> 对象-这部分代码应该能够在绝大部分的浏览器上工
作,除了少部分比较老的浏览器的异常情况(它能够工作在 M$# 上,但是在 9 上会使函数终
止)。
接下来是这些代码块;
/!BDG
B/+!!9DG
/BC/CI /34&:BCCD
J$KF0D?
H
H
每次 8<> 的状态发生变化,事件“E就会被触发。通过使用
“ / ! BDGHE 我 们 能 够 创 建 一 个 函 数 并 让 它 在 这 个
8<> 对象的状态每次发生改变的时候立刻运行。这里总共有五个状态,由 $ 走到 9。
$N尚未初始化(在这个 8<> 开始前)
#N加载(8<> 初始化一结束)
@N加载结束(8<> 一从服务器上获得一个回应)
7N交互(当 8<> 对象和服务器连接中)
9N结束(当 8<> 被告知它已经完成了所有人物并结束运行)
这 第 五 个 状 态 ( 数 字 9 ) 就 是 我 们 能 够 确 定 数 据 已 经 可 用 的 标 志 , 所 以 我 们 检 验 这 个
/+ 是否等于“9E来确定数据是否可用,如果是 9,我们运行 / 函数。这个函
数带两个参数:一个当前 页面的元素 5.(当前 页面中要更新的元素)以及用于填充这个元素
的数据。这个函数的运行方式在稍后将更详细地解释。
我们的 页面的 元素有一个 O.E,这就是我们准备更新的段落。我们正在取得的数据
来自于 文件,但它有点复杂。这里是它如何工作的原理。
/ 属性是一个 ./ 对象 - 它很象“E对象,除了它来自远程的
文 件 。 换 句 话 说 , 如 果 你 在 中 运 行 脚 本 , 那 / 就 是 一 个
“E对象。因为我们知道这些,我们能够通过“34&:E方法取得任何
节点。数据包含在一个命名为“ *E的 节点中,所以我们的任务很简单:取得第一个(而且只
有这一个)数据节点。因而,/34&:B""DJ$K返回
文件中的第一个 *节点。
注意:它返回的是 节点,而不是节点中的数据-这个数据必须通过访问 节点的属性取得,
这就是下一步要说的。
接下来,取得数据只需要简单的指定“F0E(F0 指向了那个被 *节点包含
的文本节点,而这个“E属性则是这个文本节点的实际文本)。
/BCL3&CIFID?
/BCCD?
这是我们的 < 函数的最后一个部分。它说了些什么?嗯,/ 的这个“E方法打开了
一个到服务器(通过一个指定的协议,这里指定的是“L3&E-你可以使用“%+3E或者其他别的协议)的连
接,去请求一个文件(在我们的例子里,变量“FE被作为一个参数赋给 < 函数-),
而且 可以同步()或者异步(,默认值)的处理请求。由于这是异步的
和 (),我们将使用默认的异步方式-在这个例子中,使用同步方式将不起作用。
这是我们函数中的最后一行,它简单的发送一个空字符串回服务器。如果没有这行, / 的
+ 永远不会到 9,所以你的页面永远不会更新。这个 方法能够用于作其他事情,但今天
我只是用来从服务器上取得数据-并不发送它-所以在这篇文章中我不准备介入任何关于 方法的细
节。
/BIDG
345BDF0!?
H
现在再稍微解释一下 / 函数:这个函数使用一个新的值来更新当前页面上任何指定的元素。
他的第一个参数,“E是当前页面中元素的 5.-那个要被更新的对象;它的第二个参数,“E是用来
将那个将被替换值的对象(“E)的内容替换掉。一般来说,检验一下并确定当前页面上确实有一个元
素的 5. 是“E是比较明智的,但对我们的脚本的这个隔离级别来说校验并不必要。这个函数更新的方式
和我们之前从 文件的“E节点取得数据的方式类似-它定位它要更新的元素(这时候这个元素的
5. 代替了它的标签名和在页面中的索引)并设置这个元素的第一个子节点(文本节点)的 属性为新
的值。如果你需要使用 8& 而不是纯文本来更新一个元素,你也可以使用
345BD8&!
这就是全部了
这个概念很简单,而且代码也不是很难。你能够从某个地方读取一个文件并且不需要重新加载这个
剩余10页未读,继续阅读
资源评论
sherrydjj123
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功