快捷搜索:

Ajax 完整教程(2)

第 2 页 应用 JavaScript 和 Ajax 发出异步哀求

多半 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 工具

不难吧?记着,JavaScript 不要求指定变量类型,是以不必要像 清单 2 那样做(在 Java 说话中可能必要这样)。

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

XMLHttpRequest request = new XMLHttpRequest();

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

差错处置惩罚

在实际上各类工作都可能掉足,而上面的代码没有供给任何差错处置惩罚。较好的法子是创建该工具,并在呈现问题时优雅地退出。比如,任何较早的浏览器(不论您是否信托,仍旧有人在应用老版本的 Netscape Navigator)都不支持 XMLHttpRequest,您必要让这些用户知道有些地方出了问题。清单 3 阐明若何创建该工具,以便在呈现问题的时刻发出 JavaScript 警告。

清单 3. 创建具有差错处置惩罚能力的 XMLHttpRequest

必然要理解这些步骤:

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 所示的糟糕情形。

图 1. Internet Explorer 申报差错

显然有什么地方纰谬劲,而 Internet Explorer 很难说是一种逾期的浏览器,由于全天下有 70% 在应用 Internet Explorer。换句话说,假如不支持 Microsoft 和 Internet Explorer 就不会受到 Web 天下的迎接!是以我们必要采纳不合的措施处置惩罚 Microsoft 浏览器。

履历证发明 Microsoft 支持 Ajax,然则其 XMLHttpRequest 版本有不合的称呼。事实上,它将其称为几种 不合的器械。假如应用较新版本的 Internet Explorer,则必要应用工具 Msxml2.XMLHTTP,而较老版本的 Internet Explorer 则应用 Microsoft.XMLHTTP。我们必要支持这两种工具类型(同时还要支持非 Microsoft 浏览器)。请看看 清单 4,它在前述代码的根基上增添了对 Microsoft 的支持。

Microsoft 介入了吗?

关于 Ajax 和 Microsoft 对该领域赓续增长的兴趣和介入已经有很多文章进行了先容。事实上,听说 Microsoft 最新版本的 Internet Explorer —— version 7.0,将在 2006 年下半年推出 —— 将开始直接支持 XMLHttpRequest,让您应用 new 关键字代替所有的 Msxml2.XMLHTTP 创建代码。但不要太激动,仍旧必要支持旧的浏览器,是以跨浏览器代码不会很快消掉。

清单 4. 增添对 Microsoft 浏览器的支持

很轻易被这些花括号迷住了眼睛,是以下面分手先容每一步:

1、创建一个新变量 request 并赋值 false。应用 false 作为判断前提,它表示还没有创建 XMLHttpRequest 工具。

2、增添 try/catch 块:

1)考试测验创建 XMLHttpRequest 工具。

2)假如掉败(catch (trymicrosoft)):

1>考试测验应用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的工具(Msxml2.XMLHTTP)。

2> 假如掉败(catch (othermicrosoft))考试测验应用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的工具(Microsoft.XMLHTTP)。

2)假如掉败(catch (failed))则包管 request 的值仍旧为 false。

3、反省 request 是否仍旧为 false(假如统统顺利就不会是 false)。

4、假如呈现问题(request 是 false)则应用 JavaScript 警告看护用户呈现了问题。

这样改动代码之后再应用 Internet Explorer 试验,就应该看到已经创建的表单(没有差错消息)。我实验的结果如 图 2 所示。

图 2. Internet Explorer 正常事情

静态与动态

再看一看清单 1、3 和 4,留意,所有这些代码都直接嵌套在 script 标记中。像这种不放到措施或函数体中的 JavaScript 代码称为静态 JavaScript。便是说代码是在页面显示给用户之前的某个时刻运行。(虽然根据规范不能完全正确地 知道这些代码何时运行对浏览器有什么影响,然则可以包管这些代码在用户能够与页面交互之前运行。)这也是多半 Ajax 法度榜样员创建 XMLHttpRequest 工具的一样平常要领。

便是说,也可以像 清单 5 那样将这些代码放在一个措施中。

清单 5. 将 XMLHttpRequest 创建代码移动到措施中

假如按照这种要领编写代码,那么在处置惩罚 Ajax 之前必要调用该措施。是以还必要 清单 6 这样的代码。

清单 6. 应用 XMLHttpRequest 的创建措施

此代码惟一的问题是推迟了差错看护,这也是多半 Ajax 法度榜样员不采纳这一措施的缘故原由。假设一个繁杂的表单有 10 或 15 个字段、选择框等,当用户在第 14 个字段(按照表单顺序从上到下)输入文本时要激活某些 Ajax 代码。这时刻运行 getCustomerInfo() 考试测验创建一个 XMLHttpRequest 工具,但(对付本例来说)掉败了。然后向用户显示一条警告,明确地奉告他们不能应用该利用法度榜样。但用户已经花费了很多光阴在表单中输入数据!这是异常令人憎恶的,而憎恶显然不会吸引用户再次造访您的网站。

假如应用静态 JavaScript,用户在点击页面的时刻很快就会看履新错信息。这样也很烦人,是不是?可能令用户差错地觉得您的 Web 利用法度榜样不能在他的浏览器上运行。不过,当然要比他们花费了 10 分钟输入信息之后再显示同样的差错要好。是以,我建议编写静态的代码,让用户尽可能早地发明问题。

用 XMLHttpRequest 发送哀求

获得哀求工具之后就可以进入哀求/相应轮回了。记着,XMLHttpRequest 惟一的目的是让您发送哀乞降接管相应。其他统统都是 JavaScript、CSS 或页面中其他代码的事情:改变用户界面、切换图像、解释办事器返回的数据。筹备好 XMLHttpRequest 之后,就可以向办事器发送哀求了。

迎接应用沙箱

Ajax 采纳一种沙箱安然模型。是以,Ajax 代码(详细来说便是 XMLHttpRequest 工具)只能对所在的同一个域发送哀求。今后的文章中将进一步先容安然和 Ajax,现在只要知道在本地机械上运行的代码只能对本地机械上的办事器端脚本发送哀求。假如让 Ajax 代码在 www.breakneckpizza.com 上运行,则必须 www.breakneck.com 中运行的脚本发送哀求。

设置办事器 URL

首先要确定连接的办事器的 URL。这并不是 Ajax 的特殊要求,但仍旧是建立连接所必需的,显然现在您应该知道若何构造 URL 了。多半利用法度榜样中都邑结合一些静态数据和用户处置惩罚的表单中的数据来构造该 URL。比如,清单 7 中的 JavaScript 代码获取电话号码字段的值并用其构造 URL。

清单 7. 建立哀求 URL

这里没有难解的地方。首先,代码创建了一个新变量 phone,并把 ID 为 “phone” 的表单字段的值赋给它。清单 8 展示了这个表单的 XHTML,此中可以看到 phone 字段及其 id 属性。

清单 8. Break Neck Pizza 表单

Enter your phone number:

Your order will be delivered to:

Type your order in here:

还要留意,当用户输入电话号码或者改变电话号码时,将触发 清单 8 所示的 getCustomerInfo() 措施。该措施取得电话号码并构造存储在 url 变量中的 URL 字符串。记着,因为 Ajax 代码是沙箱型的,因而只能连接到同一个域,实际上 URL 中不必要域名。该例中的脚本名为 /cgi-local/lookupCustomer.php。着末,电话号码作为 GET 参数附加到该脚本中:"phone=" + escape(phone)。

假如曩昔没用见过 escape() 措施,它用于转义不能用明文精确发送的任何字符。比如,电话号码中的空格将被转换成字符 %20,从而能够在 URL 中通报这些字符。

可以根据必要添加随意率性多个参数。比如,假如必要增添另一个参数,只必要将其附加到 URL 中并用 “与”(&)字符分开 [第一个参数用问号(?)和脚本名分开]。

打开哀求

有了要连接的 URL 后就可以设置设置设备摆设摆设哀求了。可以用 XMLHttpRequest 工具的 open() 措施来完成。该措施有五个参数:

request-type:发送哀求的类型。范例的值是 GET 或 POST,但也可以发送 HEAD 哀求。

url:要连接的 URL。

asynch:假如盼望应用异步连接则为 true,否则为 false。该参数是可选的,默觉得 true。

username:假如必要身份验证,则可以在此指定用户名。该可选参数没有默认值。 password:假如必要身份验证,则可以在此指定口令。该可选参数没有默认值。

open() 是打开吗?

Internet 开拓职员对 open() 措施到底做什么没有杀青同等。但它实际上并不是 打开一个哀求。假如监控 XHTML/Ajax 页面及其连接脚本之间的收集和数据通报,当调用 open() 措施时将看不到任何通信。不清楚为何选用了这个名字,但显然不是一个好的选择。

平日应用此中的前三个参数。事实上,纵然必要异步连接,也应该指定第三个参数为 “true”。这是默认值,但坚持明确指定哀求是异步的照样同步的更轻易理解。

将这些结合起来,平日会获得 清单 9 所示的一行代码。

清单 9. 打开哀求

function getCustomerInfo() {

var phone = document.getElementById("phone").value;

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

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

}

一旦设置好了 URL,其他就简单了。多半哀求应用 GET 就够了(后面的文章中将看到必要应用 POST 的环境),再加上 URL,这便是应用 open() 措施必要的整个内容了。

寻衅异步性

本系列的后面一篇文章中,我将用很多光阴编写和应用异步代码,然则您应该明白为什么 open() 的着末一个参数这么紧张。在一样平常的哀求/相应模型中,比如 Web 1.0,客户机(浏览器或者本地机械上运行的代码)向办事器发出哀求。该哀求是同步的,换句话说,客户机等待办事器的相应。当客户机等待的时刻,至少会用某种形式看护您在等待:

·沙漏(分外是 Windows 上)。

·扭转的皮球(平日在 Mac 机械上)。

·利用法度榜样基础上冻结了,然后过一段光阴光标变更了。

这恰是 Web 利用法度榜样让人认为愚蠢或迟钝的缘故原由 —— 短缺真正的交互性。按下按钮时,利用法度榜样实际上变得不能应用,直到刚刚触发的哀求获得相应。假如哀求必要大年夜量办事器处置惩罚,那么等待的光阴可能很长(至少在这个多处置惩罚器、DSL 没有等待的天下中是如斯)。

而异步哀求不 等待办事器相应。发送哀求后利用法度榜样继承运行。用户仍旧可以在 Web 表单中输入数据,以致脱离表单。没有扭转的皮球或者沙漏,利用法度榜样也没有显着的冻结。办事器悄然默默地相应哀求,完成后奉告原本的哀求者事情已经停止(详细的法子很快就会看到)。结果是,利用法度榜样感到不 那么痴钝或者迟钝,而是相应迅速、交互性强,感到快多了。这仅仅是 Web 2.0 的一部分,但它是很紧张的一部分。所有老套的 GUI 组件和 Web 设计范型都不能降服迟钝、同步的哀求/相应模型。

发送哀求

一旦用 open() 设置设置设备摆设摆设好之后,就可以发送哀求了。幸运的是,发送哀求的措施的名称要比 open() 适当,它便是 send()。

send() 只有一个参数,便是要发送的内容。然则在斟酌这个措施之前,回顾一下前面已经经由过程 URL 本身发送过数据了:

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

虽然可以应用 send() 发送数据,但也能经由过程 URL 本身发送数据。事实上,GET 哀求(在范例的 Ajax 利用中大年夜约占 80%)中,用 URL 发送数据要轻易得多。假如必要发送安然信息或 XML,可能要斟酌应用 send() 发送内容(本系列的后续文章中将评论争论安然数据和 XML 消息)。假如不必要经由过程 send() 通报数据,则只要通报 null 作为该措施的参数即可。是以您会发明在本文中的例子中只必要这样发送哀求(拜见 清单 10)。

清单 10. 发送哀求

function getCustomerInfo() {

var phone = document.getElementById("phone").value;

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

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

request.send(null);

}

指定回调措施

现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认,open() 措施中 “true” 这个小小的关键字建立了异步哀求。然则除此之外,这些代码与用 Java servlet 及 JSP、PHP 或 Perl 编程没有什么两样。那么 Ajax 和 Web 2.0 最大年夜的秘密是什么呢?秘密就在于 XMLHttpRequest 的一个简单属性 onreadystatechange。

首先必然要理解这些代码中的流程(假如必要请回首 清单 10)。建立其哀求然后发出哀求。此外,由于是异步哀求,以是 JavaScript 措施(例子中的 getCustomerInfo())不会等待办事器。是以代码将继承履行,便是说,将退出该措施而把节制返回给表单。用户可以继承输入信息,利用法度榜样不会等待办事器。

这就提出了一个有趣的问题:办事器完成了哀求之后会发生什么?谜底是什么也不发生,至少对现在的代码而言如斯!显然这样不可,是以办事器在完成经由过程 XMLHttpRequest 发送给它的哀求处置惩罚之后必要某种唆使阐明怎么做。

在 JavaScript 中引用函数:

JavaScript 是一种弱类型的说话,可以用变量引用任何器械。是以假如声清楚明了一个函数 updatePage(),JavaScript 也将该函数名看作是一个变量。换句话说,可用变量名 updatePage 在代码中引用函数。

清单 11. 设置回调措施

function getCustomerInfo() {

var phone = document.getElementById("phone").value;

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

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

request.onreadystatechange = updatePage;

request.send(null);

}

必要分外留意的是该属性在代码中设置的位置 —— 它是在调用 send() 之前 设置的。发送哀求之前必须设置该属性,这样办事器在回答完成哀求之后才能查看该属性。现在剩下的就只有编写 updatePage() 措施了,这是本文着末一节要评论争论的重点。

处置惩罚办事器相应

发送哀求,用户痛快地应用 Web 表单(同时办事器在处置惩罚哀求),而现在办事器完成了哀求处置惩罚。办事器查看 onreadystatechange 属性确定要调用的措施。除此以外,可以将您的利用法度榜样看作其他利用法度榜样一样,无论是否异步。换句话说,不必然要采取特殊的动作编写相应办事器的措施,只必要改变表单,让用户造访另一个 URL 或者做相应办事器必要的任何工作。这一节我们重点评论争论对办事器的相应和一种范例的动作 —— 即时改变用户看到的表单中的一部分。

回调和 Ajax

现在我们已经看到若何奉告办事器完成后应该做什么:将 XMLHttpRequest 工具的 onreadystatechange 属性设置为要运行的函数名。这样,当办事器处置惩罚完哀求后就会自动调用该函数。也不必要担心该函数的任何参数。我们从一个简单的措施开始,如 清单 12 所示。

清单 12. 回调措施的代码

它仅仅发出一些简单的警告,奉告您办事器什么时刻完成了义务。在自己的网页中试验这些代码,然后在浏览器中打开(假如盼望查看该例中的 XHTML,请参阅 清单 8)。输入电话号码然后脱离该字段,将看到一个弹出的警告窗口(如 图 3 所示),然则点击 OK 又呈现了……

图 3. 弹出警告的 Ajax 代码

根据浏览器的不合,在表单竣事弹出警告之前会看到两次、三次以致四次警告。这是怎么回事呢?原本我们还没有斟酌 HTTP 就绪状态,这是哀求/相应轮回中的一个紧张部分。

HTTP 就绪状态

前面提到,办事器在完成哀求之后会在 XMLHttpRequest 的 onreadystatechange 属性中查找要调用的措施。这是真的,但还不完备。事实上,每当 HTTP 就绪状态改变时它都邑调用该措施。这意味着什么呢?首先必须理解 HTTP 就绪状态。

HTTP 就绪状态表示哀求的状态或情形。它用于确定该哀求是否已经开始、是否获得了相应或者哀求/相应模型是否已经完成。它还可以赞助确定读取办事器供给的相应文本或数据是否安然。在 Ajax 利用法度榜样中必要懂得五种就绪状态:

·0:哀求没有发出(在调用 open() 之前)。

·1:哀求已经建立但还没有发出(调用 send() 之前)。

·2:哀求已经发出正在处置惩罚之中(这里平日可以从相应获得内容头部)。

·3:哀求已经处置惩罚,相应中平日有部分数据可用,然则办事器还没有完成相应。

·4:相应已完成,可以造访办事器相应并应用它。

与大年夜多半跨浏览器问题一样,这些就绪状态的应用也不尽同等。您大概期望义务就绪状态从 0 到 1、2、3 再到 4,但实际上很少是这种环境。一些浏览器从不申报 0 或 1 而直接从 2 开始,然后是 3 和 4。其他浏览器则申报所有的状态。还有一些则多次申报就绪状态 1。在上一节中看到,办事器多次调用 updatePage(),每次调用都邑弹出警告框 —— 可能和预期的不合!

对付 Ajax 编程,必要直接处置惩罚的惟一状态便是就绪状态 4,它表示办事器相应已经完成,可以安然地应用相应数据了。基于此,回调措施中的第一行应该如 清单 13 所示。

清单 13. 反省就绪状态

function updatePage() {

if (request.readyState == 4)

alert("Server is done!");

}

改动后就可以包管办事器的处置惩罚已经完成。考试测验运行新版本的 Ajax 代码,现在就会看到与预期的一样,只显示一次警告信息了。

HTTP 状态码

虽然 清单 13 中的代码看起来彷佛不错,然则还有一个问题 —— 假如办事器相应哀求并完成了处置惩罚然则申报了一个差错怎么办?要知道,办事器端代码应该明白它是由 Ajax、JSP、通俗 HTML 表单或其他类型的代码调用的,但只能应用传统的 Web 专用措施申报信息。而在 Web 天下中,HTTP 代码可以处置惩罚哀求中可能发生的各类问题。

比方说,您肯定碰到过输入了差错的 URL 哀求而获得 404 差错码的情形,它表示该页面不存在。这仅仅是 HTTP 哀求能够收到的浩繁差错码中的一种(完备的状态码列表请参阅 参考资料 中的链接)。表示所造访数据受到保护或者禁止造访的 403 和 401 也很常见。无论哪种环境,这些差错码都是从完成的相应 获得的。换句话说,办事器实行了哀求(即 HTTP 就绪状态是 4)然则没有返回客户机预期的数据。

是以除了就绪状态外,还必要反省 HTTP 状态。我们期望的状态码是 200,它表示统统顺利。假如就绪状态是 4 而且状态码是 200,就可以处置惩罚办事器的数据了,而且这些数据应该便是要求的数据(而不是差错或者其他有问题的信息)。是以还要在回调措施中增添状态反省,如 清单 14 所示。

清单 14. 反省 HTTP 状态码

function updatePage() {

if (request.readyState == 4)

if (request.status == 200)

alert("Server is done!");

}

为了增添更壮实的差错处置惩罚并只管即便避免过于繁杂,可以增添一两个状态码反省,请看一看 清单 15 中改动后的 updatePage() 版本。

清单 15. 增添一点差错反省

function updatePage() {

if (request.readyState == 4)

if (request.status == 200)

alert("Server is done!");

else if (request.status == 404)

alert("Request URL does not exist");

else

alert("Error: status code is " + request.status);

}

现在将 getCustomerInfo() 中的 URL 改为不存在的 URL 看看会发生什么。应该会看到警告信息阐明要求的 URL 不存在 —— 好极了!很难处置惩罚所有的差错前提,然则这一小小的改变能够涵盖范例 Web 利用法度榜样中 80% 的问题。

读取相应文本

现在可以确保哀求已经处置惩罚完成(经由过程就绪状态),办事器给出了正常的相应(经由过程状态码),着末我们可以处置惩罚办事器返回的数据了。返回的数据保存在 XMLHttpRequest 工具的 responseText 属性中。

关于 responseText 中的文本内容,比如款式和长度,故意维持暧昧。这样办事器就可以将文本设置成任何内容。比方说,一种脚本可能返回逗号分隔的值,另一种则应用管道符(即 | 字符)分隔的值,还有一种则返回长文本字符串。何去何从由办事器抉择。

在本文应用的例子中,办事器返回客户的上一个订单和客户地址,中心用管道符分开。然后应用订单和地址设置表单中的元素值,清单 16 给出了更新显示内容的代码。

清单 16. 处置惩罚办事器相应

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, "");

} else

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

}

}

首先,获得 responseText 并应用 JavaScript split() 措施从管道符分开。获得的数组放到 response 中。数组中的第一个值 —— 上一个订单 —— 用 response[0] 造访,被设置为 ID 为 “order” 的字段的值。第二个值 response[1],即客户地址,则必要更多一点处置惩罚。由于地址中的行用一样平常的行分隔符(“\n”字符)分隔,代码中必要用 XHTML 风格的行分隔符

来代替。调换历程应用 replace() 函数和正则表达式完成。着末,改动后的文本作为 HTML 表单 div 中的内部 HTML。结果便是表单忽然用客户信息更新了,如图 4 所示。

图 4. 收到客户数据后的 Break Neck 表单

停止本文之前,我还要先容 XMLHttpRequest 的另一个紧张属性 responseXML。假如办事器选择应用 XML 相应则该属性包孕(大概您已经猜到)XML 相应。处置惩罚 XML 相应和处置惩罚通俗文本有很大年夜不合,涉及到解析、文档工具模型(DOM)和其他一些问题。后面的文章中将进一步先容 XML。然则由于 responseXML 平日和 responseText 一路评论争论,这里有需要提一提。对付很多简单的 Ajax 利用法度榜样 responseText 就够了,然则您很快就会看到经由过程 Ajax 利用法度榜样也能很好地处置惩罚 XML。

停止语

您可能对 XMLHttpRequest 认为有点厌倦了,我很少看到一整篇文章评论争论一个工具,分外是这种简单的工具。然则您将在应用 Ajax 编写的每个页面和利用法度榜样中反复应用该工具。坦白地说,关于 XMLHttpRequest 还真有一些可说的内容。下一期文章中将先容若何在哀求中应用 POST 及 GET,来设置哀求中的内容头部和从办事器相应读取内容头部,理解若何在哀求/相应模型中编码哀乞降处置惩罚 XML。

再以后我们将先容常见 Ajax 对象箱。这些对象箱实际上暗藏了本文所述的很多细节,使得 Ajax 编程更轻易。您大概会想,既然有这么多对象箱为何还要对底层的细节编码。谜底是,假如不知道利用法度榜样在做什么,就很难发明利用法度榜样中的问题。

是以不要轻忽这些细节或者简单地浏览一下,假如便捷富丽的对象箱呈现了差错,您就不必挠头或者发送邮件哀求支持了。假如懂得若何直接应用 XMLHttpRequest,就会发明很轻易调试和办理最稀罕的问题。只有让其办理您的问题,对象箱才是好器械。

是以请认识 XMLHttpRequest 吧。事实上,假如您有应用对象箱的 Ajax 代码,可以考试测验应用 XMLHttpRequest 工具及其属性和措施从新改写。这是一种不错的演习,可以赞助您更好地舆解此中的道理。

下一期文章中将进一步评论争论该工具,探究它的一些更有趣的属性(如 responseXML),以及若何应用 POST 哀乞降以不合的款式发送数据。请开始编写代码吧,一个月后我们再继承评论争论。

您可能还会对下面的文章感兴趣: