AJAX\掌握Ajax\掌握Ajax第3部分-Ajax中的高级请求和响应资源-CSDN文库

需积分: 10 181 浏览量 2008-12-20 10:18:16 上传评论收藏 362KB PDF 举报

资源详情

资源评论

资源推荐

掌握 Ajax，第 3 部分: Ajax 中的高级请求和响应

全面理解 HTTP 的状态代码、就绪状态和 XMLHttpRequest 对象

级别：初级

Brett McLaughlin

(brett@newInstance.com), 作家，编辑, O'Reilly Media Inc.

2006 年 3 月 23 日

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

对于希望掌握 Ajax 的开发人员来说，必须要全面理解 HTTP 状态代码、就绪状态和

XMLHttpRequest 对象。在本文中，Brett McLaughlin 将向您介绍各种状态代码，并

展示浏览器如何对其进行处理，本文还给出了在 Ajax 中使用的比较少见的 HTTP 请

求。

在本系列的上篇文章

中，我们将详细介绍 XMLHttpRequest 对象，它是 Ajax 应用程序的中

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

Ajax 应用程序都要使用

XMLHttpRequest 对象，因此您可能会希望熟悉这个对象，从而能够让

Ajax 执行得更好。

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

z HTTP 就绪状态

z HTTP 状态代码

z 可以生成的请求类型

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

如果您不仅仅是想了解 Ajax 编程的常识，而是希望了解更多内容，就需要熟悉就绪状态、状态代

码和请求本身的内容。当应用程序出现问题时 —— 这种问题总是存在 —— 那么如果能够正确

理解就绪状态、如何生成一个 HEAD 请求或者 400 的状态代码的确切含义，就可以在 5 分钟内

调试出问题，而不是在各种挫折和困惑中度过 5 个小时。

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

深入了解 HTTP 就绪状态

您应该还记得在上一篇文章中

XMLHttpRequest

对象有一个名为

readyState 的属性。这个属性

确保服务器已经完成了一个请求，通常会使用一

个回调函数从服务器中读出数据来更新 Web 表

单或页面的内容。清

单 1 给出了一个简单的例子

（这也是本系列的上一篇文章中的一个例子 —

— 请参见参

考资料）。

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

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

XMLHttpRequest 或 XMLHttp：换名玫瑰

Microsoft™ 和 Internet Explorer 使用了一个

名为

XMLHttp 的对象，而不是

XMLHttpRequest 对象，而 Mozilla、

Opera、Safari 和大部分非 Microsoft 浏览

器都使用的是后者。为了简单性起见，我将

这两个对象都简单地称为

XMLHttpRequest。这既符合我们在 Web 上

看到的情况，又符合 Microsoft 在 Internet

Explorer 7.0 中使用

XMLHttpRequest 作为

请求对象的意图。（有关这个问题的更多内

容，请参见第

2 部分。）

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(//g, "<br />");

} else

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

}

页码，1

14(W)w

2007/8/29http://www.ibm.com/developerworks/cn/xml/wa-a

axintro3

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

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

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

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

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

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

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

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

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

隐秘就绪状态

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

旦对请求对象调用

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

化之后就立即调用

open()，因此很少会看到 readyState == 0 的状态。另外，未初始化的就绪

状态在实际的应用程序中是没有真正的用处的。

不过为了满足我们的兴趣，请参见清

单 2 的内容，其中显示了如何在 readyState 被设置为 0 时

来获取这种就绪状态。

清单 2. 获取 0 就绪状态

在这个简单的例子中，

getSalesData() 是 Web 页面调用来启动请求（例如点击一个按钮时）所

使用的函数。注意您必须在调用

open()

之前

来查看就绪状态。图 1 给出了运行这个应用程序的

结果。

图 1. 就绪状态 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);

}

页码，2

14(W)w

2007/8/29http://www.ibm.com/developerworks/cn/xml/wa-a

axintro3

显然，这并不能为您带来多少好处；需要确保

尚未

调用 open() 函数的情况很少。在大部分

Ajax 编程的真实情况中，这种就绪状态的唯一用

法就是使用相同的

XMLHttpRequest 对象在多个

函数之间生成多个请求。在这种（不常见的）情

况中，您可能会在生成新请求之前希望确保请求

对象是处于未初始化状态（

readyState ==

）。这实际上是要确保另外一个函数没有同时

使用这个对象。

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

除了 0 就绪状态之外，请求对象还需要依次经历

典型的请求和响应的其他几种就绪状态，最后才

以就绪状态 4 的形式结束。这就是为什么您在大

部分回调函数中都可以看到

(request.readyState == 4)

这行代码；它确

保服务器已经完成对请求的处理，现在可以安全

地更新 Web 页面或根据从服务器返回来的数据来进行操作了。

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

而且还要在每次调用回调函数时都输出就绪状态。清

单 3 给出了一个实现这种功能的例子。

清单 3. 查看就绪状态

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

它向服务器端的组件发送一个请求（例如清

单 2 给出的函数，或本系列文章的第 1 部分和第 2

部分中给出的例子）。确保在建立请求时，将回调函数设置为

updatePage()；要实现这种设

置，可以将请求对象的

onreadystatechange 属性设置为 updatePage()。

这段代码就是

onreadystatechange 意义的一个确切展示 —— 每次请求的就绪状态发生变化

时，就调用

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

例子，其中就绪状态为 1。

图 2. 就绪状态 1

当 0 等于 4 时

在多个 JavaScript 函数都使用相同的请求对

象时，您需要检查就绪状态 0 来确保这个请

求对象没有正在使用，这种机制会产生问

题。由于

readyState == 4 表示一个已完

成的请求，因此您经常会发现那些目前没在

使用的处于就绪状态的请求对象仍然被设置

成了 4 —— 这是因为从服务器返回来的数

据已经使用过了，但是从它们被设置为就绪

状态之后就没有进行任何变化。有一个函数

abort() 会重新设置请求对象，但是这个函

数却不是真正为了这个目的而使用的。如果

您

必须

使用多个函数，最好是为每个函数

都创建并使用一个函数，而不是在多个函数

之间共享相同的对象。

function updatePage() {

// Output the current ready state

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

}

页码，3

14(W)w

2007/8/29http://www.ibm.com/developerworks/cn/xml/wa-a

axintro3

剩余13页未读，继续阅读

评论收藏

内容反馈

juone929

粉丝: 8
资源: 74

AJAX\掌握 Ajax\掌握 Ajax第 3 部分-Ajax 中的高级请求和响应

评论0

最新资源

AJAX\掌握 Ajax\掌握 Ajax第 3 部分-Ajax 中的高级请求和响应

评论0

掌握Ajax系列3：Ajax中的高级请求和响应

掌握 Ajax 在请求和响应中使用 XML

掌握Ajax系列8：在请求和响应中使用XML（下）

掌握Ajax系列7：在请求和响应中使用XML（上）

AJAX\掌握 Ajax\掌握 Ajax第 6 部分-建立基于 DOM 的 Web 应用程序.pdf

Ajax\掌握 Ajax第 7 部分-在请求和响应中使用 XML

掌握Ajax 学习资料pdf

掌握 Ajax第 8 部分-在请求和响应中使用 XML.pdf

掌握 Ajax\掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应

掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求

掌握Ajax，第7部分:在请求和响应中使用XML

掌握Ajax，第2部分:使用JavaScript和Ajax发出异步请求

Ajax 中的高级请求和响应

掌握AJAX技术

掌握 Ajax\掌握 Ajax第 5 部分-操纵 DOM

jQuery-ajax-用户名异步请求

Ajax\掌握Ajax全书CHM版-Ajax\掌握Ajax全书CHM版-

Ajax异步请求响应.java

Ajax请求过程中显示“进度”的简单实现

实例详解Android Webview拦截ajax请求

Js拦截全局ajax请求

chrome扩展插件获取ajax请求记录

掌握 Ajax第 11 部分--服务器端的 JSON.pdf

微信小程序源码-合集6.rar

微信小程序源码-合集5.rar

微信小程序源码-合集4.rar

微信小程序源码-合集3.rar

最新资源