4天学会ajaxXMLHttpRequest资源-CSDN文库

共4个文件

docx：4个

ajax教程

ajax

需积分: 9 147 浏览量 2011-04-20 14:10:51 上传评论收藏 451KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

四天学会ajax.rar （4个子文件）

四天学会ajax

第三天.docx 223KB

第一天.docx 30KB

第四天.docx 82KB

第二天.docx 223KB

 学习 Ajax 教程第三天,Ajax 中的

高级请求和响应

对于很多 Web 开发人员来说，只需要生成简单的请求并接收简单的响应即可；但是对于希望掌握 Ajax

的开发人员来说，必须要全面理解 HTTP 状态代码、就绪状态和 XMLHttpRequest 对象。在本文中，

Brett McLaughlin 将向您介绍各种状态代码，并展示浏览器如何对其进行处理，本文还给出了在 Ajax

中使用的比较少见的 HTTP 请求。

在本系列的上篇文章中，我们将详细介绍 XMLHttpRequest 对象，它是 Ajax 应用程序的中心，负责

处理服务器端应用程序和脚本的请求，并处理从服务器端组件返回的数据。由于所有的 Ajax 应用程序都

要使用 XMLHttpRequest 对象，因此您可能会希望熟悉这个对象，从而能够让 Ajax 执行得更好。

在本文中，我将在上一篇文章的基础上重点介绍这个请求对象的 3 个关键部分的内容：

·HTTP 就绪状态

·HTTP 状态代码

·可以生成的请求类型

这三部分内容都是在构造一个请求时所要考虑的因素；但是介绍这些主题的内容太少了。然而，如果您不

仅仅是想了解 Ajax 编程的常识，而是希望了解更多内容，就需要熟悉就绪状态、状态代码和请求本身的

内容。当应用程序出现问题时 —— 这种问题总是存在 —— 那么如果能够正确理解就绪状态、如何生成

一个 HEAD 请求或者 400 的状态代码的确切含义，就可以在 5 分钟内调试出问题，而不是在各种挫折

和困惑中度过 5 个小时。

下面让我们首先来看一下 HTTP 就绪状态。

深入了解 HTTP 就绪状态

您应该还记得在上一篇文章中 XMLHttpRequest 对象有一个名为 readyState 的属性。这个属性确保服

务器已经完成了一个请求，通常会使用一个回调函数从服务器中读出数据来更新 Web 表单或页面的内容。

清单 1 给出了一个简单的例子（这也是本系列的上一篇文章中的一个例子 —— 请参见参考资料）。

XMLHttpRequest 或 XMLHttp：换名玫瑰

Microsoft™ 和 Internet Explorer 使用了一个名为 XMLHttp 的对象，而不是 XMLHttpRequest 对象，

而 Mozilla、Opera、Safari 和大部分非 Microsoft 浏览器都使用的是后者。为了简单性起见，我将这

两个对象都简单地称为 XMLHttpRequest。这既符合我们在 Web 上看到的情况，又符合 Microsoft 在

Internet Explorer 7.0 中使用 XMLHttpRequest 作为请求对象的意图。（有关这个问题的更多内容，

请参见第 2 部分。）

清单 1. 在回调函数中处理服务器的响应

function updatePage() {

if (request.readyState == 4) {

if (request.status == 200) {

var response = request.responseText.split("|");

document.getElementById("order").value = response[0];

document.getElementById("address").innerHTML =

response[1].replace(/\n/g, "<br />");

} else

alert("status is " + request.status);

}

这显然是就绪状态最常见（也是最简单）的用法。正如您从数字 "4" 中可以看出的一样，还有其他几个

就绪状态（您在上一篇文章中也看到过这个清单 —— 请参见参考资料）：

·0：请求未初始化（还没有调用 open()）。

·1：请求已经建立，但是还没有发送（还没有调用 send()）。

·2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

·3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

·4：响应已完成；您可以获取并使用服务器的响应了。

如果您希望不仅仅是了解 Ajax 编程的基本知识，那么就不但需要知道这些状态，了解这些状态是何时出

现的，以及如何来使用这些状态。首先，您需要学习在每种就绪状态下可能碰到的是哪种请求状态。不幸

的是，这一点并不直观，而且会涉及几种特殊的情况。

隐秘就绪状态

第一种就绪状态的特点是 readyState 属性为 0（readyState == 0），表示未初始化状态。一旦对请

求对象调用 open() 之后，这个属性就被设置为 1。由于您通常都是在一对请求进行初始化之后就立即调

用 open()，因此很少会看到 readyState == 0 的状态。另外，未初始化的就绪状态在实际的应用程序

中是没有真正的用处的。

不过为了满足我们的兴趣，请参见清单 2 的内容，其中显示了如何在 readyState 被设置为 0 时来获取

这种就绪状态。

清单 2. 获取 0 就绪状态

function getSalesData() {

// Create a request object

createRequest();

alert("Ready state is: " + request.readyState);

// Setup (initialize) the request

var url = "/boards/servlet/UpdateBoardSales";

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

request.onreadystatechange = updatePage;

request.send(null);

}

在这个简单的例子中，getSalesData() 是 Web 页面调用来启动请求（例如点击一个按钮时）所使用的

函数。注意您必须在调用 open()之前来查看就绪状态。图 1 给出了运行这个应用程序的结果。

图 1. 就绪状态 0

显然，这并不能为您带来多少好处；需要确保尚未调用 open() 函数的情况很少。在大部分 Ajax 编程

的真实情况中，这种就绪状态的唯一用法就是使用相同的 XMLHttpRequest 对象在多个函数之间生成多

个请求。在这种（不常见的）情况中，您可能会在生成新请求之前希望确保请求对象是处于未初始化状态

（readyState == 0）。这实际上是要确保另外一个函数没有同时使用这个对象。

查看正在处理的请求的就绪状态

除了 0 就绪状态之外，请求对象还需要依次经历典型的请求和响应的其他几种就绪状态，最后才以就绪

状态 4 的形式结束。这就是为什么您在大部分回调函数中都可以看到 if (request.readyState == 4)

这行代码；它确保服务器已经完成对请求的处理，现在可以安全地更新 Web 页面或根据从服务器返回来

的数据来进行操作了。

要查看这种状态发生的过程非常简单。如果就绪状态为 4，我们不仅要运行回调函数中的代码，而且还要

在每次调用回调函数时都输出就绪状态。清单 3 给出了一个实现这种功能的例子。

当 0 等于 4 时

在多个 JavaScript 函数都使用相同的请求对象时，您需要检查就绪状态 0 来确保这个请求对象没有正在

使用，这种机制会产生问题。由于 readyState == 4 表示一个已完成的请求，因此您经常会发现那些目

前没在使用的处于就绪状态的请求对象仍然被设置成了 4 —— 这是因为从服务器返回来的数据已经使用

过了，但是从它们被设置为就绪状态之后就没有进行任何变化。有一个函数 abort() 会重新设置请求对象，

但是这个函数却不是真正为了这个目的而使用的。如果您必须使用多个函数，最好是为每个函数都创建

并使用一个函数，而不是在多个函数之间共享相同的对象。

清单 3. 查看就绪状态

function updatePage() {

// Output the current ready state

alert("updatePage() called with ready state of " + request.readyState);

}

如果您不确定如何运行这个函数，就需要创建一个函数，然后在 Web 页面中调用这个函数，并让它向服

务器端的组件发送一个请求（例如清单 2 给出的函数，或本系列文章的第 1 部分和第 2 部分中给出的例

子）。确保在建立请求时，将回调函数设置为 updatePage()；要实现这种设置，可以将请求对象的

onreadystatechange 属性设置为 updatePage()。

这段代码就是 onreadystatechange 意义的一个确切展示 —— 每次请求的就绪状态发生变化时，就调

用 updatePage()，然后我们就可以看到一个警告了。图 2 给出了一个调用这个函数的例子，其中就绪

状态为 1。

图 2. 就绪状态 1

您可以自己尝试运行这段代码。将其放入 Web 页面中，然后激活事件处理程序（单击按钮，在域之间按

tab 键切换焦点，或者使用设置的任何方法来触发请求）。这个回调函数会运行多次 —— 每次就绪状态

都会改变 —— 您可以看到每个就绪状态的警告。这是跟踪请求所经历的各个阶段的最好方法。

浏览器的不一致性

在对这个过程有一个基本的了解之后，请试着从几个不同的浏览器中访问您的页面。您应该会注意到各个

浏览器如何处理这些就绪状态并不一致。例如，在 Firefox 1.5 中，您会看到以下就绪状态：

·1

·2

·3

·4

这并不奇怪，因为每个请求状态都在这里表示出来了。然而，如果您使用 Safari 来访问相同的应用程序，

就应该看到 —— 或者看不到 —— 一些有趣的事情。下面是在 Safari 2.0.1 中看到的状态：

·2

·3

·4

Safari 实际上把第一个就绪状态给丢弃了，也并没有什么明显的原因说明为什么要这样做；不过这就是

Safari 的工作方式。这还说明了一个重要的问题：尽管在使用服务器上的数据之前确保请求的状态为 4

是一个好主意，但是依赖于每个过渡期就绪状态编写的代码的确会在不同的浏览器上得到不同的结果。

例如，在使用 Opera 8.5 时，所显示的就绪状态情况就更加糟糕了：

·3

·4

最后，Internet Explorer 会显示如下状态：

·1

·2

·3

·4

如果您碰到请求方面的问题，这就是用来发现问题的首要之处。最好的方式是在 Internet Explorer 和

Firefox 都进行一下测试 —— 您会看到所有这 4 种状态，并可以检查请求的每个状态所处的情况。

接下来我们再来看一下响应端的情况。

显微镜下的响应数据

评论收藏

内容反馈

LZG0321

粉丝: 6
资源: 7

4天学会ajax XMLHttpRequest

最新资源

4天学会ajax XMLHttpRequest

四天学会ajax

XMLHttpRequest of ajax

ajax --XMLHttpRequest

《4天学会Ajax》教程 pdf

Ajax基础教程（扫描版）

ajax基础教程（4）

【卷一/共两卷】AJAX实战pdf高清版90M

教你学会使用ajax

XMLHttpRequest实现的简单ajax登录

js ajax XMLHttpRequest的使用

ajax 入门基础之 XMLHttpRequest对象总结

JavaScript的100天：编码100天

Dojo入门手册.rar

基于J2EE框架的个人博客系统项目毕业设计论文(源码和论文）

乐优商城.xmind

基于J2EE框架的个人博客系统项目毕业设计论...

js-ajax:XMLHttpRequest的一个小包装

如何用ajax来创建一个XMLHttpRequest对象

ajax工具，XMLHttpRequest调试工具

ajax客户端XMLHttpRequest 实例

用法 XMLHttpRequest的用法 ajax同步和异步的区别

ajax 对象池，一个页面多个XMLHttpRequest对象

ajax之核心XMLHttpRequest中文参考手册

最新资源