了解如何使用 Dojo 工具包为 Java™ Platform Extended Edition (Java EE) 应用程序构建企业 SOA 客户端，以及如何使用 JavaScript Object Notation–RPC (JSON-RPC) 来调用服务器端 Java 对象。

引言

异步 JavaScript 和 XML (Ajax) 是使用本机浏览器技术构建富 Web 应用程序的新方法。对于编写需要某些类型的“活动”用户界面的复杂应用程序的开发人员，JavaScript 在这方面已经做得很好。不过，JavaScript 难于编码、调试、移植和维护。使用 Ajax 工具包有助于最大程度地减少使用 JavaScript 和 Ajax 带来的许多常见问题。优秀的 Ajax 工具包提供了一组可重用的小部件、用于扩展和创建小部件的框架、事件系统、JavaScript 实用工具和增强的异步服务器调用支持。在本文中，我们将讨论如何使用 Dojo 工具包为 Java EE 应用程序构建企业 SOA 客户端。我们还将使用 JSON (JavaScript Object Notation)–RPC 来调用服务器端 Java 对象。

在本文中，我们还将向您提供以下内容的简要说明：Ajax、Dojo、JSON 和 JSON-RPC，以及一些设计 Ajax 应用程序的设计原则和您可以下载并亲自尝试运行的简短示例。

回页首 Ajax 概述 有许多关于 Ajax 的论文、文章和书籍。我不打算对 Ajax 进行深入介绍。有关详细信息，请查阅参考资料。 Ajax 可作为使用本机浏览器组件构建网站的体系结构样式。Ajax 的关键部分有：

• JavaScript，它可以编排页面元素，从而获得最佳 Ajax 用户体验。
• Cascading Style Sheets (CSS)，它可以定义页面元素的可视样式。
• 文档对象模型（Document Object Model，DOM），它将网页结构作为一组可以使用 JavaScript 操作的可编程对象提供。
• XMLHttpRequest，它支持以后台活动的形式从 Web 资源检索数据。

XMLHttpRequest 对象是关键部分。 XMLHttpRequest 对象

XMLHttpRequest 对象是 Ajax 用于进行异步请求的机制。图 1 说明了该流程：

图 1. XMLHttpRequest 对象进行异步请求的流程图

XMLHttpRequest 对象是浏览器中提供的 JavaScript 对象。（Microsoft™ 和 Mozilla 浏览器各有自已的版本）。该流程如下所示：

1. 页面调用某个 JavaScript。
2. JavaScript 函数创建 XMLHttpRequest 对象。这包括设置要调用的 URL 和 HTTP 请求参数。
3. JavaScript 函数注册回调处理程序。HTTP 响应调用此回调处理程序。
4. JavaScript 函数调用 XMLHttpRequest 对象上的 send 方法，该方法接着将 HTTP 请求发送到服务器。
5. XMLHttpRequest 对象立即将控制返回到 JavaScript 方法。此时，用户可以继续使用该页面。
6. 稍后，HTTP 服务器通过调用回调处理程序返回 HTTP 响应。
7. 回调处理程序可以访问 HTML DOM 对象。它可以动态更新页面元素，而无需中断用户（除非您碰巧更新用户正在使用的 DOM 对象）。

通过异步更新页面的 DOM，还可以在本地进行异步请求。

回页首 Dojo 工具包概述 Dojo 使您能够方便地构建动态站点。它提供一个丰富的小部件库，您可以使用它组成页面。您可以使用基于 Dojo 方面的事件系统将事件附加到组件，以创建丰富的交互体验。此外，您可以使用几个 Dojo 库进行异步服务器请求、添加动画效果和浏览存储实用工具等等。 Dojo 小部件

Dojo 提供了您可以用于构建页面的一组丰富的小部件。您可以使用多个方法创建 Dojo 小部件。Dojo 的众多优点之一是它允许您使用标准的 HTML 标记。然后，可以将这些标记用于小部件。这样，HTML 开发人员就可以方便地使用 Dojo，如清单 1 所示：

清单 1. 在 HTML 标记中使用 Dojo

<div dojoType="FloatingPane" class="stockPane" title="Stock Form" id="pane" constrainToContainer="true" displayMaximizeAction="true"> <h2>Stock Service</h2> Enter symbol: <input dojoType="ValidationTextBox" required="true" id="stockInput"> <p /> <button dojoType="Button2" widgetId="stockButton"> Get Stock Data </button> <div id="resultArea" /> </div>

您可以使用 div 标记来定义小部件的位置，而在页面加载或对事件进行响应时 Dojo 可以在这些地方放置小部件。您还可以使用更具体的标记，如 <dojo:widget>，并向其中添加 Dojo 小部件属性。在清单 1 中，我们将 dojoType 属性添加到 button 标记。在设置了标记之后，您需要在一些 JavaScript 内部加载小部件，如清单 2 所示。您可以将标记嵌入到页面内部，但是我们建议将其放置在单独的 JS 文件中。在本文的稍后部分中，我们将阐明一些 MVC 设计原则。

清单 2. 在 HTML 标记中使用 Dojo

//require statements dojo.require("dojo.widget.*" ); dojo.require("dojo.event.*"); dojo.require("dojo.widget.Button2"); dojo.require("dojo.widget.FloatingPane" ); //all dojo.require above this line dojo.hostenv.writeIncludes(); dojo.require();

您可以在 JavaScript 中创建、访问、修改和删除小部件，从而实现动态行为。在我们的示例中，您将看到在 JavaScript 中访问小部件的示例。

Dojo 事件系统

Dojo 事件系统使用面向方面的技术将事件附加到小部件。这可以将小部件与实际的事件处理分离。Dojo 不是将硬代码 JavaScript 事件添加到 html 标记上，而是提供允许您将事件附加到小部件的 API，如清单 3 所示。

清单 3. 使用 Dojo 将事件处理程序附加到小部件

function submitStock() { ... } function init() { var stockButton = dojo.widget.byId('stockButton'); dojo.event.connect(stockButton, 'onClick', 'submitStock'); } dojo.addOnLoad(init);

通过使用 connect 方法，您可将 JavaScript 方法连接到小部件。您还可以在 div 节点上附加 dojoAttachEvent，如下所示。某些 HTML 标记没有定义事件，所以这是一个方便的扩展。

清单 4. 使用 Dojo 将事件附加到 HTML 标记

<div dojoAttachPoint="divNode" dojoAttachEvent="onClick; onMouseOver: onFoo;">

Dojo 事件系统还允许多个高级功能，如：

• 声明在现有的事件处理程序之前或之后插入事件处理程序的建议。
• 允许小
  1 2 3 4 5 6 下一页