返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
Ajax入门当前位置:首页 > HTML教程 > Ajax入门 > 正文

[四天学会ajax] 学习Ajax教程第二天(1)

发布时间:2013-06-26 10:09:00   来源:   点击:

 多数 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 是什么?” 虽然很少听人提到 Web 1.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。这个小小的对象实际上已经在几种浏览器中存在一段时间了,它是本专栏今后几个月中要介绍的 Web 2.0、Ajax 和大部分其他内容的核心。为了让您快速地大体了解它,下面给出将要用于该对象的很少的几个 方法和属性。

·open():建立到服务器的新请求。
·send():向服务器发送请求。
·abort():退出当前请求。
·readyState:提供当前 HTML 的就绪状态。
·responseText:服务器返回的请求响应文本。

如果不了解这些(或者其中的任何 一个),您也不用担心,后面几篇文章中我们将介绍每个方法和属性。现在应该 了解的是,明确用 XMLHttpRequest 做什么。要注意这些方法和属性都与发送请求及处理响应有关。事实上,如果看到 XMLHttpRequest 的所有方法和属性,就会发现它们都 与非常简单的请求/响应模型有关。显然,我们不会遇到特别新的 GUI 对象或者创建用户交互的某种超极神秘的方法,我们将使用非常简单的请求和非常简单的响应。听起来似乎没有多少吸引力,但是用好该对象可以彻底改变您的应用程序。简单的 new

首先需要创建一个新变量并赋给它一个 XMLHttpRequest 对象实例。这在 JavaScript 中很简单,只要对该对象名使用 new 关键字即可,如 清单 1 所示。

清单 1. 创建新的 XMLHttpRequest 对象

<script language="javascript" type="text/javascript">
var request = new XMLHttpRequest();
</script>

不难吧?记住,JavaScript 不要求指定变量类型,因此不需要像 清单 2 那样做(在 Java 语言中可能需要这样)。

清单 2. 创建 XMLHttpRequest 的 Java 伪代码

XMLHttpRequest request = new XMLHttpRequest();

因此在 JavaScript 中用 var 创建一个变量,给它一个名字(如 “request”),然后赋给它一个新的 XMLHttpRequest 实例。此后就可以在函数中使用该对象了。

错误处理

在实际上各种事情都可能出错,而上面的代码没有提供任何错误处理。较好的办法是创建该对象,并在出现问题时优雅地退出。比如,任何较早的浏览器(不论您是否相信,仍然有人在使用老版本的 Netscape Navigator)都不支持 XMLHttpRequest,您需要让这些用户知道有些地方出了问题。清单 3 说明如何创建该对象,以便在出现问题的时候发出 JavaScript 警告。

清单 3. 创建具有错误处理能力的 XMLHttpRequest

 

<script language="javascript" type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (failed) {
request = false;
}

if (!request)
alert("Error initializing XMLHttpRequest!");
</script>

一定要理解这些步骤:

1、创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件,它表示还没有创建 XMLHttpRequest 对象。
2、增加 try/catch 块:
1)尝试创建 XMLHttpRequest 对象。
2)如果失败(catch (failed))则保证 request 的值仍然为 false。
3、检查 request 是否仍为 false(如果一切正常就不会是 false)。
4、如果出现问题(request 是 false)则使用 JavaScript 警告通知用户出现了问题。

代码非常简单,对大多数 JavaScript 和 Web 开发人员来说,真正理解它要比读写代码花更长的时间。现在已经得到了一段带有错误检查的 XMLHttpRequest 对象创建代码,还可以告诉您哪儿出了问题。

应付 Microsoft

看起来似乎一切良好,至少在用 Internet Explorer 试验这些代码之前是这样的。如果这样试验的话,就会看到 图 1 所示的糟糕情形。

显然有什么地方不对劲,而 Internet Explorer 很难说是一种过时的浏览器,因为全世界有 70% 在使用 Internet Explorer。换句话说,如果不支持 Microsoft 和 Internet Explorer 就不会受到 Web 世界的欢迎!因此我们需要采用不同的方法处理 Microsoft 浏览器。

经验证发现 Microsoft 支持 Ajax,但是其 XMLHttpRequest 版本有不同的称呼。事实上,它将其称为几种 不同的东西。如果使用较新版本的 Internet Explorer,则需要使用对象 Msxml2.XMLHTTP,而较老版本的 Internet Explorer 则使用 Microsoft.XMLHTTP。我们需要支持这两种对象类型(同时还要支持非 Microsoft 浏览器)。请看看 清单 4,它在前述代码的基础上增加了对 Microsoft 的支持。

版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814