将 Ajax 功能插入 Duke's Bookstore 应用程序的第一种方法是自己动手(DIY)：在客户端手动编写 JavaScript 和 CSS 文件，然后编写一个 servlet 在服务端处理 Ajax XMLHttpRequest 请求。

　　自己动手的方法足以应付简单的项目。但是，随着项目的深入展开，您一定希望找到一种只需在客户端编写少量代码的方法。您可以做第二种尝试，在应用程序中实现弹出气球，利用有效的 JavaScript 库将需要编写的 JavaScript 代码数量减到最小。

　　在本文中，我们将使用 Dojo 工具包 提供的 JavaScript 库。Dojo 工具包提供了全面的 JavaScript 库并且受 Sun Microsystems、AOL 和 IBM 等公司的技术支持。Dojo 工具包是开发此项目的逻辑选择。注意，使用 Dojo 库并不排斥其他解决方案。如果在某些情况下 Dojo 不能提供必需的功能，可以通过其他 JavaScript 库获得此功能，与 Dojo 库结合使用。

　　使用 Dojo 库的一个好处是缺少所需的功能时，他们可以与各种浏览器兼容。但是，客户机浏览器必须启用 JavaScript 才能支持 Ajax 技术。如果浏览器完全禁用了 JavaScript，则 Dojo 库不会阻止页面下载。对于 bookstore 应用程序，如果浏览器因缺少支持而阻止弹出气球出现，这不会对用户造成真正的障碍，所以，失效问题很容易处理。对于封装了较多特性的 Ajax 页面，可降级的(degradable)代码显得更加重要。

　　载 Dojo 工具包库

　　下载和安装 Dojo 工具包库:

　　从 Dojo 网站 下载 Dojo 工具包压缩包。 解压下载的文件，并且附带文档，特别是 README 文件。
　　接下来，我们将在 Web 应用程序使用 Dojo 库。

　　在应用程序中添加 Dojo 库

　　要在 Web 应用程序中使用 Dojo 库，需要两段代码:

　　1.包含 Dojo 引导文件:

<script type="text/javascript" src="pathname/dojo.js"/> 

　　其中，Pathname 是 dojo.js 文件的存放地址。dojo.js 文件包含引导 Dojo 工具包的部分。根据所使用的 Dojo 的发行版本，文件还会包含一些与 Dojo 库模块相关的代码。

　　2. 指定所使用的包，例如 dojo.io:

<script type="text/javascript"> dojo.require("dojo.io.*"); </script>

    注意它与 Java 的 import 语句的相似之处。

　　下节将介绍如何在项目中使用这些语句。

　　将 Dojo 库整合到项目中　

　　将 Dojo 库整合到您在 创建支持 Ajax 的应用程序：DIY 方法 中开发的项目中，您需要编辑或替换以下两个文件：

project/examples/web/bookstore2/web/popup.js
project/examples/web/bookstore2/web/books/bookcatalog.jsp
　　Project 是项目根目录的路径。

　　预编辑版本文件已经放置在项目中，下节将绍如何完成整合。

　　您还需要将 Dojo 发行版中的 dojo.js 引导文件插入到项目中，并添加支持库。

　　dojo.js 文件

　　dojo.js 文件支持整个 Dojo 库套件。该文件提供了一些常用功能，例如 dojo.io.bind。根据 Dojo 的版本，该文件还提供了一个配置文件来支持特定的 Dojo 特性。要确保所有 Dojo 特性对 Dojo 各版本均有效，所有版本都在 dojo/src 目录提供了对整个 Dojo 库的访问。dojo.js 中文件没有的特性都可以在运行时通过 dojo.require () 语句动态加载。

　　您可以将 dojo.js 文件做得尽可能小来缩短应用程序的响应时间(更多信息请参阅 Dojo 网站)。考虑到简单性，本项目使用默认版本的文件。

　　dojo.js 文件位于 NetBeans 项目的以下目录：

　　project/examples/web/bookstore2/web/dojo.js

　　project 是项目的根目录。

　　popup_dojo.js 文件

　　要在项目中使用 Dojo 库，您需要编辑现有 popup.jsp 文件或使用不同的文件替换。我们提供了一个预编辑版本的 popup_dojo.js 文件，用于加快进程。您需将 popup_dojo.js 包含在项目中，并且通过更改 bookcatalog.jsp 文件其中一行代码来排除 popup.jsp。

　　在 NetBeans IDE 中打开 Bookstore 项目　

　　启动 NetBeans IDE。 从 NetBeans 工具栏中，选择 File > Open。这将打开项目窗口。 进入 project/examples/web/bookstore2。选择 bookstore2 项目文件夹，并单击 Open Project Folder。IDE 将打开项目文件夹，选择 bookstore2 作为主项目。bookstore 项目同时也将打开，因为 bookstore2 需要使用 bookstore 中的许多文件。如果 IDE 标记了 bookstore 项目，并警告需要解析引用：右键单击项目并且从弹出菜单选择 Resolve Reference Problems。在结果窗口中，单击 Resolve 并导航到 server/glassfish/lib 目录，其中 server 表示 GlassFish 服务器安装根目录。选择 avaee.jar 文件并打开它。单击 Close 解析引用并关闭窗口。

　　5.  如果 bookstore2 项目弹出警告：

　　右键单击项目名称并且从弹出菜单选择 Resolve Missing Server Problem。 在结果窗口中，选择您在 Creating an Ajax-Enabled Application, a Do-It-Yourself Approach 中注册的 GlassFish 服务器，单击 OK 按钮解析引用。

　　替换bookcatalog.jsp 文件

　　您需要编辑 bookcatalog.jsp 文件来引用正在使用的 dojo.js 和 popup_dojo.js 文件。我们并没有采用编辑 bookcatalog.jsp 文件的方法，而是使用项目目录中的 bookcatalog_popup_dojo.jsp 文件替换它。

　　在 NetBeans IDE，单击 Files 选项卡打开项目的 Files 视图。展开 bookstore2 > Web > books 节点并选择 bookcatalog.jsp 文件。单击鼠标右键并且从弹出菜单选择 Rename。将文件改名为 bookcatalog_popup.jsp 以便移除它。

　　图 1: 重命名 bookcatalog.jsp 文件

　　同样地，将 bookcatalog_popup_dojo.jsp 文件重命名为 bookcatalog.jsp，使新文件件成为项目构建的一部分。

　　运行 Bookstore 项目

　　现在可以编译和部署 bookstore2 项目了。

　　在 NetBeans 项目窗口中，bookstore2 项目应显示为粗体，以表示它是主项目。如果不是，通过选择 Files > Set Main Project > bookstore2 将它设置为主项目。

　　选择 Run > Run Main Project，编译并部署 bookstore2 项目。编译状态显示在 NetBeans 输出窗口中。当编译成功完成时，浏览器会显示 Duke's Bookstore 应用程序。此应用程序的弹出气球效果与 DIY 方法相同。

　　检查 Dojo 文件

　　现在，检查使弹出气球与 Dojo 库兼容的文件 。

　　bookcatalog.jsp 文件

　　检查 bookcatalog.jsp 文件(即前面的 bookcatalog_popup_dojo.jsp 文件)：

　　在 NetBeans IDE 中，单击 Files 选项卡打开项目的 Files 视图。展开 bookstore > Web > books 节点并双击 bookcatalog.jsp。该文件将在 NetBeans 编辑器中打开，如下图所示：

　　图 2：NetBeans IDE 中运行的 bookcatalog.jsp 文件

　　单击 此处 查看大图。

　　28-58 行是关于 bookcatalog.jsp 的代码。开始和结束的标记如下：

　　 <!-- BEGIN: popup -->

　　和

　　 <!-- END: popup -->

　　如下所示，29-30 行引入了两个脚本：dojo.js(基本的 Dojo 脚本)和 popup_dojo.js(原始的 popup.js 脚本的校订脚本)。

　　 <script type="text/javascript" src="../dojo.js></script><script type="text/javascript" src="../popup_dojo.js"></script>

　　文件的剩余部分与 bookcatalog_popup.jsp file 文件相同。该文件曾在 创建支持 Ajax 的应用程序：DIY 方法 的 DIY 方法中介绍过。

　　popup_dojo.js 文件

　　项目中使用的 dojo.js 文件不要求自己编写代码。然而，如果采用 DIY 方法，则需要编写 popup_dojo.js 文件。

　　文件的第一行确认 dojo.io 库包有效：

　　dojo.require("dojo.io.*");

　　实际上，它是惟一在项目中使用的包。

　　使用 Dojo 实现弹出 JSP 文件的一个好处是 Dojo 库为 Ajax XMLHttpRequest 对象提供了必要的初始化请求。在 popup_dojo.js 文件中，showPopupInternal () 函数提供了这个请求(35-50 行)。请求是由对象的字面形式(38-45 行)发起的。48 行发送请求。

　　如 创建支持 Ajax 的应用程序：DIY 方法 一文所述，通过改变 URL 参数值，该函数可以方便地将请求直接发送给服务器端的 servlet 或 JSP 页面。

　　下表在比较两个文件中的 bpui.alone.sh owPopupInternal () 函数。为简洁起见，此处省略了大部分注释。在编写的代量方面，Dojo 方法和 DIY 方法之间的区别微乎其微。

　　popup_dojo.js 文件

　　bpui.alone.showPopupInternal=function(popupx, bookId) { // retrieve data through dojo call var bindArgs = { url: "../PopupServlet?bookId="  + escape (bookId), mimetype: "text/xml", handle: bpui.alone.ajaxReturnFunction}; bpui.alone.req=dojo.io.bind (bindArgs); }

     popup.js 文件

bpui.alone.showPopupInternal=function(popupx, bookId) { // set up request  bpui.alone.req=bpui.alone.initRequest(); url="../PopupServlet? bookId="  + escape(bookId); bpui.alone.req.onreadystatechange =  bpui.alone.ajaxReturnFunction; bpui.alone.req.open("GET", url, true); bpui.alone.req.send(null);}

　　这些代码演示了 Dojo 库的一个好处：它们将处理浏览器之间的大部分差异，因此不需要调用 initRequest ()请求。

　　两个文件的 Ajax 回调函数 bpui.alone.ajaxReturnFunction () 也存在差异。查看 popup_dojo.js 文件中的函数(52-70 行)。

　　在 53 行，函数定义了类型、数据和事件参数：

　　bpui.alone.ajaxReturnFunction=function(type, data, evt)

　　但是，在 popup.js 文件中，函数没有定义这些参数：

　bpui.alone.ajaxReturnFunction=function()

　　popup_dojo.js 文件中的函数使用 evt(事件)参数检查返回的 XMLHttpRequest 对象的状态(57-58 行)：

　　if (evt.readyState == 4) { if (evt.status == 200) { ...

　　相反，在 popup.js 文件中，该函数通过以下几行代码直接检查 XMLHttpRequest 对象的状态：

　　if (bpui.alone.req.readyState == 4) { if (bpui.alone.req.status == 200) { ...

　　总之，编写 popup_dojo.js 和 popup.js 文件所需的工作量基本相同。

　　结束语

　　对于在本示例项目中实现的非常简单的 Ajax 功能，特别是需要手动编写一定量的代码时，那么，拥有一个健壮的库的优势并不是特别明显。

　　但是，在扩展应用程序的功能时，您可以利用额外的库模块。在这种情况下，使用 Dojo 工具包提供的 JavaScript 库的优势就非常明显。例如，如果您希望通过 Ajax 请求发送表格数据，DIY 方法所需编写的代码量可能非常大。相反，通过 Dojo 引入表格时，只需要在 bind 变量中创建一个表格节点。一行代码就可以提供必要的功能。

　　甚至在最简单应用程序时，使用 Dojo 工具包提供的 JavaScript 库也可以提供一些好处，主要包括：

　　处理事件。
　　自动适应浏览器差异。
　　支持浏览器的历史记录和书签特性，而这在 Ajax 中却非常麻烦。
　　能处理 JavaScript 不存在或被客户机浏览器禁用的情况
　　提供了大量实用的小部件，例如日期选择器、富文本编辑程序和时间选择器等。