Ajax技术(二)用AjaxTags简化Ajax开发 phpma.com 开源

Ajax 是否是为了清洁之用？

还只是几年之前，即使是顽固的开发人员也会将 Ajax 与由 Colgate-Palmolive 开发和生产的那个流行清洁剂联系在一起，而不是将其视为一种可以提高在线体验的 Web 开发技巧。现在，Ajax 技术越来越受欢迎，大家不禁都想要获得有关其工作原理以及在何种情况下可以使用它的全部信息。phpma.com 开源

工作原理

在开发和编写 Ajax 应用程序时，需要理解前台和后台的工作原理。如下所示的是应用程序内的一种典型的事件流：

1. 用户请求一个网页。
2. 用户更改此网页上的状态（例如，单击一个链接、从选择框中进行选择、单击了某个单选按钮或复选框）。
3. 状态的改变会击发事件，调用一个 JavaScript 函数。
4. JavaScript 函数实例化一个 XmlHttpRequest 对象，该对象会在后台异步地产生一个对服务器的 HTTP 请求（注意，没有发生页面刷新）。
5. 服务器响应，向 JavaScript 函数返回所请求的数据。
6. JavaScript 函数通过使用额外的 JavaScript 和/或 DHTML 更新和修改所正在查看的页面。

负责更新当前网页的某些部分的 JavaScript 需要知道哪个 HTML 元素负责更新。要实际动态更新给定页面内的特定元素（在无需重载此页面的情况下），需要分配给这些 HTML 元素一个惟一 ID。清单 1 所示的是此演示中的一个简单的例子，稍后我们将对其进行更深入的分析：

清单 1. 为 HTML 元素分配 IDphpma.com 开源

<select id="model" disabled="disabled">
  <option value="">Select model</option>
</select>

清单 1 为这个特定的选择框分配的 ID 为 model。通过这个 ID，就可以利用 JavaScript 轻松定位和处理所选元素及其内容。

AjaxTags API 使用的是某些很好的、开源的第三方 JavaScript 库，这些库会为您完成几乎全部的繁重编程工作。其中的一个好处是这些库均包括丰富的特性并经诸多浏览器广泛测试，所以尽可放心使用。AjaxTags 所使用的第三方库包括：

• Prototype（一种带多种实用函数的 JavaScript 库）
• Script.aculo.us（一种带多种可视效果的 JavaScript 库）
• Overlibmws（一种 DHTML 弹出库） phpma.com 开源

何时使用 AjaxTags

在很多典型的环境中都可以使用 AjaxTags，这样一来，不仅可以方便开发人员，而且还可以提高应用程序的用户体验。其中的一些用例包括：

• 基于第一个下拉框中所做的选择来修改第二个下拉框的内容
• 基于单击或鼠标悬浮事件从服务器发起对额外信息的请求，而且无需刷新用户所查看的页面
• 基于用户输入的数据在服务器上执行计算，无需重载整个页面 phpma.com 开源

让我们先来看一些如何将这些特性集成到应用程序中的实际例子