Ajax从入门到精通.pdf

但在详细探讨 Ajax 是什么之前，先让我们花几分钟了解 Ajax 做 什么。目前，编写应用程序时有两种基本

的选择：

桌面应用程序

Web 应用程序

两者是类似的，桌面应用程序通常以 CD 为介质（有时候可从网站下载）并完全安装到您的计算机上。桌

面应用程序可能使用互联网下载更新，但运行这些应用程序的代码在桌面计算机上。Web 应用程序运行在

某处的 Web 服务器上 —— 毫不奇怪，要通过 Web 浏览器访问这种应用程序。

不过，比这些应用程序的运行代码放在何处更重要的是，应用程序如何运转以及如何与其进行交互。桌面

显然这样说过于简略了，但基本的概念就是如此。您可能已经猜到，Ajax 尝试建立桌面应用程序的功能和

交互性，与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮

的控件，不过是在 Web 应用程序中。

还等什么呢？我们来看看 Ajax 如何将笨拙的 Web 界面转化成能迅速响应的 Ajax 应用程序吧。

网

老技术，新技巧

在谈到 Ajax 时，实际上涉及到多种技术，要灵活地运用它必须深入了解这些不同的技术（本系列的头几篇

文章将分别讨论这些技术）。好消息是您可能已经非常熟悉其中的大部分技术，更好的是这些技术都很容

易学习，并不像完整的编程语言（如 Java 或 Ruby）那样困难。

HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 中国建站学习网

java script 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。

DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记

HTML。

文档对象模型 DOM 用于（通过 java script 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

我们来进一步分析这些技术的职责。以后的文章中我将深入讨论这些技术，目前只要熟悉这些组件和技术

就可以了。对这些代码越熟悉，就越容易从对这些技术的零散了解转变到真正把握这些技术（同时也真正

打开了 Web 应用程序开发的大门）。

XMLHttpRequest 对象

<script language="java script" type="text/java script">

var xmlHttp = new XMLHttpRequest();

</script>

下一期文章中将进一步讨论这个对象，现在要知道这是处理所有服务器通信的对象。继续阅读之前，先停

下来想一想：通过 XMLHttpRequest 对象与服务器进行对话的是 java script 技术。这不是一般的应用程序

流，这恰恰是 Ajax 的强大功能的来源。

在一般的 Web 应用程序中，用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器将

Ajax 基本上就是把 java script 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单

时，数据发送给一些 java script 代码而不是 直接发送给服务器。相反，java script 代码捕获表单数据并向服务

器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，java script 代码在幕后发送请

求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 java script 代码（和用户）不用等

待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。

然后，服务器将数据返回 java script 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅

速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。java script

代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是

XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生

的一切。结果就是类似于桌面应用程序的动态、

获取表单数据：java script 代码很容易从 HTML 表单中抽取数据并发送到服务器。

修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。

解析 HTML 和 XML：使用 java script 代码操纵 DOM（请参阅 下一节），处理 HTML 表单服务器返回的

XML 数据的结构。

对于前两点，需要非常熟悉 getElementById() 方法，如 清单 2 所示。

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

// 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];

它，即使 java script 程序员也不大用到它，除非要完成某项高端编程任务。大量使用 DOM 的是 复杂的 Java

和 C/C++ 程序，这可能就是 DOM 被认为难以学习的原因。

幸运的是，在 java script 技术中使用 DOM 很容易，也非常直观。现在，按照常规也许应该说明如何使用

DOM，或者至少要给出一些示例代码，但这样做也可能误导您。即使不理会 DOM，仍然能深入地探讨

Ajax，这也是我准备采用的方法。以后的文章将再次讨论 DOM，现在只要知道可能需要 DOM 就可以了。

当需要在 java script 代码和服务器之间传递 XML 和改变 HTML 表单的时候，我们再深入研究 DOM。没有

它也能做一些有趣的工作，因此现在就把 DOM 放到一边吧。

获取 Request 对象

有了上面的基础知识后，我们来看看一些具体的例子。XMLHttpRequest 是 Ajax 应用程序的核心，而且对很