您会注意到，这次只定义了一个函数供 mouseover 和 mouseout 事件调用。该函数会判断元素是否已经高亮显示了类名，并根据查找结果执行添加或删除。您也许会注意到 e 参数是隐式传递的。换句话说，不需要在 observe 函数中以参数形式显式传递事件。

Ajax

使用 JavaScript 框架的另一个有说服力的理由是标准化的跨浏览器 Ajax 请求。Ajax 请求是一个异步 HTTP 请求，通常发送给服务器端脚本，后者返回 XML、JSON、HTML 或普通文本格式的响应。大多数 JavaScript 框架都有某种形式的 Ajax 对象，以及一个以参数形式接受一组选项的请求方法。这些选项通常包含 callback 函数，当脚本一接收到来自 Web 服务器的响应时，就会调用此函数。让我们看一下 ExtJS、MooTools 和 Prototype 中的 Ajax 请求的样子。

首先，看一下典型的 ExtJS Ajax 请求（请看清单 11）。

清单 11. 一个 ExtJS Ajax 请求Ext.Ajax.request({ url: 'server_script.php', params: { name1: 'value1', name2: 'value2' }, method: 'POST', success: function(transport) { alert(transport.responseText); } });

ExtJS 中的 request 方法只有一个参数，这是一个包含 url、params、method 和 success 等不同字段的对象。url 字段包含服务器端脚本的 URL，该脚本将被 Ajax 请求调用。params 字段本身就是一个对象，包含有将被传递给服务器端脚本的键/值对。method 字段可以取两个值：GET 或 POST。它的默认值为未定义，但如果请求中有 params，将会默认作为 POST 处理。最后一个字段 success 是 Web 服务器返回成功响应时调用的函数。在本例中，假设服务器端脚本返回普通文本，并且文本会通过警告框显示给用户。

下一步，我们看看同样的请求在 MooTools 中是什么样子（请看清单 12）。

清单 12. 一个 MooTools Ajax 请求new Request({ url: 'server-script.php', data: { name1: 'value1', name2: 'value2' }, method: 'post', onComplete: function(response) { alert(response); } }).send();

如您所见，MooTools 与 ExtJS 非常相似。你也许注意到，与使用 params 不同，这里使用 data 字段传递变量，而且必须使用小写指定方法。还有，没有使用 success callback 函数，MooTools 使用了一个 onComplete 函数。最后，与 ExtJS 不同的是，在 MooTools 中，您需要使用 Request 对象的 send() 函数发送请求。

最后，让我们看看 Prototype 中的请求是否具有显著的不同（请看清单 13）。

清单 13. 一个 Prototype Ajax 请求new Ajax.Request('server-script.php', { params: { name1: 'value1', name2: 'value2' }, method: 'post', onSuccess: function(transport) { alert(transport.responseText); } });

同样，Prototype 的工作方式基本一致，只是有些句法上的小差别。首先，Prototype 的 Request 对象为其构造函数获取两个参数。第一个参数是请求将被发送到的 URL，第二个参数是一个具有典型 Ajax 选项的对象，如前两个例子所见。当然，由于 URL 现在作为单独的参数传递，它没有出现在选项列表中。同样需要注意，与 MooTools 不同，Prototype Ajax Request 对象构造函数隐式地发送请求，因此不需要调用任何方法来实际发起 HTTP 请求。

大多数 JavaScript 框架中的 Ajax 支持要比此处演示的内容更加深入。重要的增强功能包括使用接收到的响应自动更新元素，而不需要任何特殊的 onSuccess 函数。一些库甚至包含预建的自动完成功能，如您在 Google 搜索引擎中所看到的，在输入时会出现常见搜索项。

在下一节中，您将学习 JavaScript 框架为 Web 开发人员提供的用户体验（UX）增强功能。

UX 增强功能

到目前为止，本文全部关注的是使用 JavaScript 框架的编程优势以及它们如何简化交互式应用程序的编写。然而，对于大多数框架，还有另外一个更吸引人的方面：用户界面（UI）组件以及用户体验增强，这些在以前需要付出很大努力构建的工作现在可以轻松完成。

本节将分别介绍以下框架的 UX 增强功能：Prototype、jQuery、YUI、ExtJS 和 MooTools。

Prototype

Prototype 是少数几个不提供开箱即用 UI 组件和 UX 增强功能的 JavaScript 框架之一。它将这些内容转移到其姊妹库 script.aculo.us（最新版本是 Scripty2）中。Script.aculo.us 还添加了对 Prototype 中的各种效果和行为的支持。包括 highlighting、morphing、folding、shaking、sliding、puffing 等等。Script.aculo.us 还提供拖放支持，例如滑块、in-place Ajax 编辑器和 autocompleters。与其他框架不同，Script.aculo.us 将所有控件（例如滑块和 autocompleters）的设计留给开发人员，并且未提供标准界面。

jQuery

与 Prototype 不同，jQuery 核心库中包含一些基本的 UX 增强。这些增强与 script.aculo.us 中的一些基本效果类似。例如 sliding 和 fading。然而，要获得更高级的 UX 特性，就需要下载 jQuery UI 库，它包含比 jQuery 核心库更多的效果，以及交互特性，如拖放、调整大小和排序。与 script.aculo.us 不同的是，jQuery UI 还包含一些小部件或组件，它们使开发具有吸引力的界面变得更加容易。目前，这些组件包括 Accordion、Datepicker、Dialog、Progressbar、Slider 和 Tabs。这些小部件都可以划分主题，并且 jQuery UI 包含各种各样的主题，可以适合您自己的特定 Web 站点或 Web 应用程序的组件。图 1 演示了 jQuery UI Datepicker 小部件的例子，该小部件的主题为 Cupertino。

图 1. jQuery UI Datepicker Widget

YUI