快捷搜索:

Ajax 完整教程(1)

第 1 页 Ajax 简介

Ajax 由 HTML、JavaScript™ 技巧、DHTML 和 DOM 组成,这一精彩的措施可以将愚蠢的 Web 界面转化成交互性的 Ajax 利用法度榜样。本文的作者是一位 Ajax 专家,他演示了这些技巧若何协同事情 —— 从总体概述到细节的评论争论 —— 使高效的 Web 开拓成为现实。他还揭开了 Ajax 核心观点的神秘面纱,包括 XMLHttpRequest 工具。

五年前,假如不知道 XML,您便是一只无人注重的丑小鸭。十八个月前,Ruby 成了关注的中间,不知道 Ruby 的法度榜样员只能坐冷板凳了。本日,假如想跟上最新的技巧时尚,那您的目标便是 Ajax。

然则,Ajax 不仅仅 是一种时尚,它是一种构建网站的强大年夜措施,而且不像进修一种全新的说话那样艰苦。

但在具体探究 Ajax 是什么之前,先让我们花几分钟懂得 Ajax 做 什么。今朝,编写利用法度榜样时有两种基础的选择:

·桌面利用法度榜样

·Web 利用法度榜样

两者是类似的,桌面利用法度榜样平日以 CD 为介质(无意偶尔候可从网站下载)并完全安装到您的谋略机上。桌面利用法度榜样可能应用互联网下载更新,但运行这些利用法度榜样的代码在桌面谋略机上。Web 利用法度榜样运行在某处的 Web 办事器上 —— 绝不稀罕,要经由过程 Web 浏览器造访这种利用法度榜样。

不过,比这些利用法度榜样的运行代码放在何处更紧张的是,利用法度榜样若何运转以及若何与其进行交互。桌面利用法度榜样一样平常很快(就在您的谋略机上运行,不用等待互联网连接),具有漂亮的用户界面(平日和操作系统有关)和不凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游,基础上不必要等待。

另一方面,Web 利用法度榜样是最新的潮流,它们供给了在桌面上不能实现的办事(比如 Amazon.com 和 eBay)。然则,伴跟着 Web 的强大年夜而呈现的是等待,等待办事器相应,等待屏幕刷新,等待哀求返回和天生新的页面。

显然这样说过于大略了,但基础的观点便是如斯。您可能已经猜到,Ajax 考试测验建立桌面利用法度榜样的功能和交互性,与赓续更新的 Web 利用法度榜样之间的桥梁。可以应用像桌面利用法度榜样中常见的动态用户界面和漂亮的控件,不过是在 Web 利用法度榜样中。

还等什么呢?我们来看看 Ajax 若何将愚蠢的 Web 界面转化成能迅速相应的 Ajax 利用法度榜样吧。

老技巧,新技术

在谈到 Ajax 时,实际上涉及到多种技巧,要机动地运用它必须深入懂得这些不合的技巧(本系列的头几篇文章将分手评论争论这些技巧)。好消息是您可能已经异常认识此中的大年夜部分技巧,更好的是这些技巧都很轻易进修,并不像完备的编程说话(如 Java 或 Ruby)那样艰苦。

下面是 Ajax 利用法度榜样所用到的基础技巧:

·HTML 用于建立 Web 表单并确定利用法度榜样其他部分应用的字段。

·JavaScript 代码是运行 Ajax 利用法度榜样的核心代码,赞助改进与办事器利用法度榜样的通信。

·DHTML 或 Dynamic HTML,用于动态更新表单。我们将应用 div、span 和其他动态 HTML 元向来标记 HTML。

·文档工具模型 DOM 用于(经由过程 JavaScript 代码)处置惩罚 HTML 布局和(某些环境下)办事器返回的 XML。

Ajax 的定义

顺便说一下,Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。这个短语是 Adaptive Path 的 Jesse James Garrett 发现的(请参阅 参考资料),按照 Jesse 的解释,这不是 个首字母缩写词。

我们来进一步阐发这些技巧的职责。今后的文章中我将深入评论争论这些技巧,今朝只要认识这些组件和技巧就可以了。对这些代码越认识,就越轻易从对这些技巧的琐屑懂得转变到真正把握这些技巧(同时也真正打开了 Web 利用法度榜样开拓的大年夜门)。

XMLHttpRequest 工具

要懂得的一个工具可能对您来说也是最陌生的,即 XMLHttpRequest。这是一个 JavaScript 工具,创建该工具很简单,如清单 1 所示。

清单 1. 创建新的 XMLHttpRequest 工具

下一期文章中将进一步评论争论这个工具,现在要知道这是处置惩罚所有办事器通信的工具。继承涉猎之前,先停下来想一想:经由过程 XMLHttpRequest 工具与办事器进行对话的是 JavaScript 技巧。这不是一样平常的利用法度榜样流,这恰好是 Ajax 的强大年夜功能的滥觞。

在一样平常的 Web 利用法度榜样中,用户填写表单字段并单击 Submit 按钮。然后全部表单发送到办事器,办事器将它转发给处置惩罚表单的脚本(平日是 PHP 或 Java,也可能是 CGI 进程或者类似的器械),脚本履行完成后再发送回全新的页面。该页面可能是带有已经添补某些数据的新表单的 HTML,也可能是确认页面,或者是具有根据原本表单中输入数据选择的某些选项的页面。当然,在办事器上的脚本或法度榜样处置惩罚和返回新表单时用户必须等待。屏幕变成一片空缺,等到办事器返回数据后再从新绘制。这便是交互性差的缘故原由,用户得不到急速反馈,是以感到不合于桌面利用法度榜样。

Ajax 基础上便是把 JavaScript 技巧和 XMLHttpRequest 工具放在 Web 表单和办事器之间。当用户填写表单时,数据发送给一些 JavaScript 代码而不是 直接发送给办事器。相反,JavaScript 代码捕获表单数据并向办事器发送哀求。同时用户屏幕上的表单也不会闪烁、消掉或延迟。换句话说,JavaScript 代码在幕后发送哀求,用户以致不知道哀求的发出。更好的是,哀求是异步发送的,便是说 JavaScript 代码(和用户)不用等待办事器的相应。是以用户可以继承输入数据、滚动屏幕和应用利用法度榜样。

然后,办事器将数据返回 JavaScript 代码(仍旧在 Web 表单中),后者抉择若何处置惩罚这些数据。它可以迅速更新表单数据,让人感到利用法度榜样是急速完成的,表单没有提交或刷新而用户获得了新数据。JavaScript 代码以致可以对收到的数据履行某种谋略,再发送另一个哀求,完全不必要用户干预!这便是 XMLHttpRequest 的强大年夜之处。它可以根据必要自行与办事器进行交互,用户以致可以完全不知道幕后发生的统统。结果便是类似于桌面利用法度榜样的动态、快速相应、高交互性的体验,然则背后又拥有互联网的整个强大年夜气力。

加入一些 JavaScript

获得 XMLHttpRequest 的句柄后,其他的 JavaScript 代码就异常简单了。事实上,我们将应用 JavaScript 代码完成异常基础的义务:

·获取表单数据:JavaScript 代码很轻易从 HTML 表单中抽取数据并发送到办事器。

·改动表单上的数据:更新表单也很简单,从设置字段值到迅速调换图像。

·解析 HTML 和 XML:应用 JavaScript 代码操纵 DOM(请参阅 下一节),处置惩罚 HTML 表单办事器返回的 XML 数据的布局。

对付前两点,必要异常认识 getElementById() 措施,如 清单 2 所示。

清单 2. 用 JavaScript 代码捕获和设置字段值

// Get the value of the "phone" field and stuff it in a variable called phone

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

// Set some values on a form using an array called response

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

document.getElementById("address").value = response[1];

这里没有分外必要留意的地方,真是好极了!您应该熟识到这里并没有异常繁杂的器械。只要掌握了 XMLHttpRequest,Ajax 利用法度榜样的其他部分便是如 清单 2 所示的简单 JavaScript 代码了,混杂有少量的 HTML。同时,还要用一点儿 DOM,我们就来看看吧。

以 DOM 停止

着末还有 DOM,即文档工具模型。可能对有些读者来说 DOM 有点儿令人生畏,HTML 设计者很少应用它,纵然 JavaScript 法度榜样员也不大年夜用到它,除非要完成某项高端编程义务。大年夜量应用 DOM 的是 繁杂的 Java 和 C/C++ 法度榜样,这可能便是 DOM 被认尴尬以进修的缘故原由。

幸运的是,在 JavaScript 技巧中应用 DOM 很轻易,也异常直不雅。现在,按照老例大概应该阐明若何应用 DOM,或者至少要给出一些示例代码,但这样做也可能误导您。纵然不理会 DOM,仍旧能深入地探究 Ajax,这也是我筹备采纳的措施。今后的文章将再次评论争论 DOM,现在只要知道可能必要 DOM 就可以了。当必要在 JavaScript 代码和办事器之间通报 XML 和改变 HTML 表单的时刻,我们再深入钻研 DOM。没有它也能做一些有趣的事情,是以现在就把 DOM 放到一边吧。

获取 Request 工具

有了上面的根基常识后,我们来看看一些详细的例子。XMLHttpRequest 是 Ajax 利用法度榜样的核心,而且对很多读者来说可能还对照陌生,我们就从这里开始吧。从 清单 1 可以看出,创建和应用这个工具异常简单,不是吗?等一等。

还记得几年前的那些憎恶的浏览器战斗吗?没有一样器械在不合的浏览器上获得同样的结果。不管您是否信托,这些战斗仍旧在继承,虽然规模较小。但令人稀罕的是,XMLHttpRequest 成了这场战斗的就义品之一。是以得到 XMLHttpRequest 工具可能必要采纳不合的措施。下面我将具体地进行解释。

应用 Microsoft 浏览器

Microsoft 浏览器 Internet Explorer 应用 MSXML 解析器处置惩罚 XML(可以经由过程 参考资料 进一步懂得 MSXML)。是以假如编写的 Ajax 利用法度榜样要和 Internet Explorer 打交道,那么必须用一种特殊的要领创建工具。

但并不是这么简单。根据 Internet Explorer 中安装的 JavaScript 技巧版本不合,MSXML 实际上有两种不合的版本,是以必须对这两种环境分手编写代码。请参阅 清单 3,此中的代码在 Microsoft 浏览器上创建了一个 XMLHttpRequest。

清单 3. 在 Microsoft 浏览器上创建 XMLHttpRequest 工具

var xmlHttp = false;

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

xmlHttp = false;

}

}

您对这些代码可能还不完全理解,但没有关系。当本系列文章停止的时刻,您将对 JavaScript 编程、差错处置惩罚、前提编译等有更深的懂得。现在只要牢切记着此中的两行代码:

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");。

这两行代码基础上便是考试测验应用一个版本的 MSXML 创建工具,假如掉败则应用另一个版本创建该工具。不错吧?假如都不成功,则将 xmlHttp 变量设为 false,奉告您的代码呈现了问题。假如呈现这种环境,可能是由于安装了非 Microsoft 浏览器,必要应用不合的代码。

处置惩罚 Mozilla 和非 Microsoft 浏览器

假如选择的浏览器不是 Internet Explorer,或者为非 Microsoft 浏览器编写代码,就必要应用不合的代码。事实上便是 清单 1 所示的一行简单代码:

var xmlHttp = new XMLHttpRequest object;。

这行简单得多的代码在 Mozilla、Firefox、Safari、Opera 以及基础上所有以任何形式或要领支持 Ajax 的非 Microsoft 浏览器中,创建了 XMLHttpRequest 工具。

结合起来

关键是要支持所有 浏览器。谁乐意编写一个只能用于 Internet Explorer 或者非 Microsoft 浏览器的利用法度榜样呢?或者更糟,要编写一个利用法度榜样两次?当然不!是以代码要同时支持 Internet Explorer 和非 Microsoft 浏览器。清单 4 显示了这样的代码。

清单 4. 以支持多种浏览器的要领创建 XMLHttpRequest 工具

/* Create a new XMLHttpRequest object to talk to the Web server */

var xmlHttp = false;

/*@cc_on @*/

/*@if (@_jscript_version >= 5)

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

xmlHttp = false;

}

}

@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {

xmlHttp = new XMLHttpRequest();

}

现在先不管那些注释掉落的稀罕符号,如 @cc_on,这是特殊的 JavaScript 编译器敕令,将鄙人一期针对 XMLHttpRequest 的文章中具体评论争论。这段代码的核心分为三步:

1、建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 工具。

2、考试测验在 Microsoft 浏览器中创建该工具:

1)考试测验应用 Msxml2.XMLHTTP 工具创建它。

2)假如掉败,再考试测验 Microsoft.XMLHTTP 工具。

2、假如仍旧没有建立 xmlHttp,则以非 Microsoft 的要领创建该工具。

着末,xmlHttp 应该引用一个有效的 XMLHttpRequest 工具,无论运行什么样的浏览器。

关于安然性的一点阐明

安然性若何呢?现在浏览器容许用户前进他们的安然等级,关闭 JavaScript 技巧,禁用浏览器中的任何选项。在这种环境下,代码无论若何都不会事情。此时必须适当地处置惩罚问题,这必要零丁的一篇文章来评论争论,要放到今后了(这个系列够长了吧?不用担心,读完之前大概您就掌握了)。现在要编写一段壮实但不敷完美的代码,对付掌握 Ajax 来说就很好了。今后我们还将评论争论更多的细节。

Ajax 天下中的哀求/相应

现在我们先容了 Ajax,对 XMLHttpRequest 工具以及若何创建它也有了基础的懂得。假如涉猎得很仔细,您可能已经知道与办事器上的 Web 利用法度榜样打交道的是 JavaScript 技巧,而不是直接提交给那个利用法度榜样的 HTML 表单。

还缺少什么呢?到底若何应用 XMLHttpRequest。由于这段代码异常紧张,您编写的每个 Ajax 利用法度榜样都要以某种形式应用它,先看看 Ajax 的基础哀求/相应模型是什么样吧。

发出哀求

您已经有了一个崭新的 XMLHttpRequest 工具,现在让它干点活儿吧。首先必要一个 Web 页面能够调用的 JavaScript 措施(比如当用户输入文本或者从菜单中选择一项时)。接下来便是在所有 Ajax 利用法度榜样中基础都雷同的流程:

1、从 Web 表单中获取必要的数据。

2、建立要连接的 URL。

3、打开到办事器的连接。

4、设置办事器在完成后要运行的函数。

5、发送哀求。

清单 5 中的示例 Ajax 措施便是按照这个顺序组织的:

清单 5. 发出 Ajax 哀求

function callServer() {

// Get the city and state from the web form

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

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

// Only go on if there are values for both fields

if ((city == null) || (city == "")) return;

if ((state == null) || (state == "")) return;

// Build the URL to connect to

var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

// Open a connection to the server

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

// Setup a function for the server to run when it's done

xmlHttp.onreadystatechange = updatePage;

// Send the request

xmlHttp.send(null);

}

此中大年夜部分代码意义都很明确。开始的代码应用基础 JavaScript 代码获取几个表单字段的值。然后设置一个 PHP 脚本作为链接的目标。要留意脚本 URL 的指定要领,city 和 state(来自表单)应用简单的 GET 参数附加在 URL 之后。

然后打开一个连接,这是您第一次看到应用 XMLHttpRequest。此中指定了连接措施(GET)和要连接的 URL。着末一个参数假如设为 true,那么将哀求一个异步连接(这便是 Ajax 的由来)。假如应用 false,那么代码发出哀求后将等待办事器返回的相应。假如设为 true,当办事器在后台处置惩罚哀求的时刻用户仍旧可以应用表单(以致调用其他 JavaScript 措施)。

xmlHttp(要记着,这是 XMLHttpRequest 工具实例)的 onreadystatechange 属性可以奉告办事器在运行完成 后(可能要用五分钟或者五个小时)做什么。由于代码没有等待办事器,必须让办事器知道怎么做以便您能作出相应。在这个示例中,假如办事器处置惩罚完了哀求,一个特殊的名为 updatePage() 的措施将被触发。

着末,应用值 null 调用 send()。由于已经在哀求 URL 中添加了要发送给办事器的数据(city 和 state),以是哀求中不必要发送任何数据。这样就发出了哀求,办事器按照您的要求事情。

假如没有发明任何新鲜的器械,您应该体会到这是多么简单清楚明了!除了牢切记着 Ajax 的异步特点外,这些内容都相称简单。应该感激 Ajax 使您能够专心编写漂亮的利用法度榜样和界面,而不用担心繁杂的 HTTP 哀求/相应代码。

清单 5 中的代码阐清楚明了 Ajax 的易用性。数据是简单的文本,可以作为哀求 URL 的一部分。用 GET 而不是更繁杂的 POST 发送哀求。没有 XML 和要添加的内容头部,哀求体中没有要发送的数据;换句话说,这便是 Ajax 的乌托邦。

不用担心,跟着本系列文章的展开,工作会变得越来越繁杂。您将看到若何发送 POST 哀求、若何设置哀求头部和内容类型、若何在消息中编码 XML、若何增添哀求的安然性,可以做的事情还有很多!暂时先不用管那些难点,掌握好基础的器械就行了,很快我们就会建立一整套的 Ajax 对象库。

处置惩罚相应

现在要面对办事器的相应了。现在只要知道两点:

·什么也不要做,直到 xmlHttp.readyState 属性的值即是 4。

·办事器将把相应添补到 xmlHttp.responseText 属性中。

此中的第一点,即就绪状态,将鄙人一篇文章中具体评论争论,您将进一步懂得 HTTP 哀求的阶段,可能比您设想的还多。现在只要反省一个特定的值(4)就可以了(下一期文章中还有更多的值要先容)。第二点,应用 xmlHttp.responseText 属性得到办事器的相应,这很简单。清单 6 中的示例措施可供办事器根据 清单 5 中发送的数据调用。

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

function updatePage() {

if (xmlHttp.readyState == 4) {

var response = xmlHttp.responseText;

document.getElementById("zipCode").value = response;

}

}

这些代码同样既不难也不繁杂。它等待办事器调用,假如是就绪状态,则应用办事器返回的值(这里是用户输入的城市和州的 ZIP 编码)设置另一个表单字段的值。于是包孕 ZIP 编码的 zipCode 字段忽然呈现了,而用户没有按任何按钮!这便是前面所说的桌面利用法度榜样的感到。快速相应、动态感想熏染等等,这些都只由于有了小小的一段 Ajax 代码。

细心的读者可能留意到 zipCode 是一个通俗的文本字段。一旦办事器返回 ZIP 编码,updatePage() 措施就用城市/州的 ZIP 编码设置那个字段的值,用户就可以改写该值。这样做有两个缘故原由:维持例子简单,阐明无意偶尔候可能盼望 用户能够改动办事器返回的数据。要记着这两点,它们对付好的用户界面设计来说很紧张。

连接 Web 表单

还有什么呢?实际上没有若干了。一个 JavaScript 措施捕捉用户输入表单的信息并将其发送到办事器,另一个 JavaScript 措施 监听和处置惩罚相应,并在相应返回时设置字段的值。所有这些实际上都依附于调用 第一个 JavaScript 措施,它启动了全部历程。最显着的法子是在 HTML 表单中增添一个按钮,但这是 2001 年的法子,您不这样觉得吗?照样像 清单 7 这样使用 JavaScript 技巧吧。

清单 7. 启动一个 Ajax 历程

City:

State:

Zip Code:

假如感到这像是一段相称通俗的代码,那就对了,恰是如斯!当用户在 city 或 state 字段中输入新的值时,callServer() 措施就被触发,于是 Ajax 开始运行了。有点儿明白怎么回事了吧?好,便是如斯!

停止语

现在您可能已经筹备开始编写第一个 Ajax 利用法度榜样了,至少也盼望卖力读一下 参考资料 中的那些文章了吧?但可以首先从这些利用法度榜样若何事情的基础观点开始,对 XMLHttpRequest 工具有基础的懂得。鄙人一期文章中,您将掌握这个工具,学会若何处置惩罚 JavaScript 和办事器的通信、若何应用 HTML 表单以及若何得到 DOM 句柄。

现在先花点儿光阴斟酌斟酌 Ajax 利用法度榜样有多么强大年夜。设想一下,当单击按钮、输入一个字段、从组合框中选择一个选项或者用鼠标在屏幕上拖动时,Web 表单能够立即作出相应会是什么情形。想一想异步 究竟意味着什么,想一想 JavaScript 代码运行而且不等待 办事器对它的哀求作出相应。会碰到什么样的问题?会进入什么样的领域?斟酌到这种新的措施,编程的时刻应若何改变表单的设计?

假如在这些问题上花一点儿光阴,与简单地剪切/粘贴某些代码到您根本不理解的利用法度榜样中比拟,收益会更多。鄙人一期文章中,我们将把这些观点付诸实践,具体先容使利用法度榜样按照这种要领事情所必要的代码。是以,现在先享受一下 Ajax 所带来的可能性吧。

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