AJAX学习捷径 (二)
来源:互联网 发布:mac持久哑光液体唇膏 编辑:程序博客网 时间:2024/05/16 08:26
多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML页面。常常是点击一个按钮,等待服务器响应,再点击另一个按钮,然后再等待,这样一个反复的过程。有了 Ajax 和XMLHttpRequest 对象,就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中,Brett McLaughlin介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例,建立和发送请求,并响应服务器。
本系列的上一期文章(请参阅 参考资料 中的链接),我们介绍了 Ajax 应用程序,考察了推动 Ajax应用程序的基本概念。其中的核心是很多您可能已经了解的技术:JavaScript、HTML 和 XHTML、一点动态 HTML 以及DOM(文档对象模型)。本文将放大其中的一点,把目光放到具体的 Ajax 细节上。
本文中,您将开始接触最基本和基础性的有关 Ajax 的全部对象和编程方法:XMLHttpRequest对象。该对象实际上仅仅是一个跨越所有 Ajax应用程序的公共线程,您可能已经预料到,只有彻底理解该对象才能充分发挥编程的潜力。事实上,有时您会发现,要正确地使用XMLHttpRequest,显然不能使用XMLHttpRequest。这到底是怎么回事呢?
Web 2.0 一瞥
在深入研究代码之前首先看看最近的观点 —— 一定要十分清楚 Web 2.0这个概念。听到 Web 2.0 这个词的时候,应该首先问一问 “Web 1.0 是什么?” 虽然很少听人提到 Web1.0,实际上它指的就是具有完全不同的请求和响应模型的传统 Web。比如,到 Amazon.com网站上点击一个按钮或者输入搜索项。就会对服务器发送一个请求,然后响应再返回到浏览器。该请求不仅仅是图书和书目列表,而是另一个完整的HTML 页面。因此当 Web 浏览器用新的 HTML页面重绘时,可能会看到闪烁或抖动。事实上,通过看到的每个新页面可以清晰地看到请求和响应。
Web 2.0(在很大程度上)消除了这种看得见的往复交互。比如访问Google Maps 或 Flickr 这样的站点(到这些支持 Web 2.0 和 Ajax 站点的链接请参阅 参考资料)。比如在 Google Maps上,您可以拖动地图,放大和缩小,只有很少的重绘操作。当然这里仍然有请求和响应,只不过都藏到了幕后。作为用户,体验更加舒适,感觉很像桌面应用程序。这种新的感受和范型就是当有人提到Web 2.0 时您所体会到的。
需要关心的是如何使这些新的交互成为可能。显然,仍然需要发出请求和接收响应,但正是针对每 次请求/响应交互的 HTML重绘造成了缓慢、笨拙的 Web 交互的感受。因此很清楚,我们需要一种方法使发送的请求和接收的响应只包含需要的数据而不是整个 HTML页面。惟一需要获得整个新 HTML 页面的时候就是希望用户看到 新页面的时候。
但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下,Ajax 和 Web 2.0 方法允许在不更新整个HTML页面的情况下发送和接收数据。对于那些经常上网的人,这种能力可以让您的应用程序感觉更快、响应更及时,让他们不时地光顾您的网站。
XMLHttpRequest 简介
要真正实现这种绚丽的奇迹,必须非常熟悉一个JavaScript对象,即XMLHttpRequest。这个小小的对象实际上已经在几种浏览器中存在一段时间了,它是本专栏今后几个月中要介绍的 Web2.0、Ajax 和大部分其他内容的核心。为了让您快速地大体了解它,下面给出将要用于该对象的很少的几个方法和属性。
·open():建立到服务器的新请求。
如果不了解这些(或者其中的任何一个),您也不用担心,后面几篇文章中我们将介绍每个方法和属性。现在应该了解的是,明确用XMLHttpRequest做什么。要注意这些方法和属性都与发送请求及处理响应有关。事实上,如果看到 XMLHttpRequest的所有方法和属性,就会发现它们都与非常简单的请求/响应模型有关。显然,我们不会遇到特别新的 GUI对象或者创建用户交互的某种超极神秘的方法,我们将使用非常简单的请求和非常简单的响应。听起来似乎没有多少吸引力,但是用好该对象可以彻底改变您的应用程序。
简单的 new
首先需要创建一个新变量并赋给它一个 XMLHttpRequest对象实例。这在 JavaScript 中很简单,只要对该对象名使用 new 关键字即可,如 清单 1 所示。
<script language="javascript"type="text/javascript">
var request = new XMLHttpRequest();
</script>
错误处理
<script language="javascript"type="text/javascript">
var request = false;
try {
} catch (failed) {
}
if (!request)
</script>
一定要理解这些步骤:
图 1. Internet Explorer 报告错误
<script language="javascript"type="text/javascript">
var request = false;
try {
} catch (trymicrosoft) {
}
if (!request)
</script>
很容易被这些花括号迷住了眼睛,因此下面分别介绍每一步:
1、创建一个新变量 request 并赋值 false。使用 false作为判断条件,它表示还没有创建 XMLHttpRequest 对象。
2、增加 try/catch 块:
3、检查 request 是否仍然为 false(如果一切顺利就不会是 false)。
4、如果出现问题(request 是 false)则使用 JavaScript 警告通知用户出现了问题。
这样修改代码之后再使用 Internet Explorer试验,就应该看到已经创建的表单(没有错误消息)。我实验的结果如图 2 所示。
- AJAX学习捷径 (二)
- Java新手必读:Java学习捷径二
- C++ 学习 二
- JAVA学习之路:不走弯路,就是捷径(二)
- JAVA学习之路:不走弯路,就是捷径(二)
- 学习笔记 二
- C++捷径之二
- 学习Java的捷径
- Java学习的捷径
- iOS学习无捷径
- 学习嵌入式的捷径
- 学习没有捷径
- Ajax学习笔记(二)
- AJAX学习(二)
- Ajax控件学习(二)
- Ajax学习(二)
- ajax学习笔记二
- 学习AJAX(二)
- 站长必看的SEO的七大忌讳以及超实…
- SEO研究:百度能Hi起来么?
- 四步迅速提高网站百度排名
- Notepad++ 快捷键 大全
- AJAX入门 (一)
- AJAX学习捷径 (二)
- 什么是泛型编程思想?及其简单的应…
- C#泛型学习
- c#中的ArrayList属性祥解及其语法…
- C#中的反射原理及应用
- 黑客技术之知道对方IP入侵别人的电…
- 关于免费打电话
- Petshop3.0-web.config文档分析(一…
- Petshop3.0--web.config文档分析(…