面向 Java 开发人员的 Ajax

lastwinner

调用远程的 Cart 方法

首先，当商店的 Web 页首次装入时，我想检查保存在会话中的 Cart 的状态，看是否已经有一个购物车了。这是必需的，因为用户可能已经向 Cart 中添加了商品，然后刷新了页面或者导航到其他地方之后又返回来。在这些情况下，重新载入的页面需要用会话中的 Cart 数据对自己进行同步。我可以在页面的 onload 函数中用一个调用做到这一点，就像这样：Cart.getCart(displayCart)。请注意 displayCart() 是一个回调函数，由服务器返回的 Cart 响应数据调用。

如果 Cart 已经在会话中，那么creator 会检索它并调用它的 getCart() 方法。如果会话中没有 Cart，那么 creator 会实例化一个新的，把它放在会话中，并调用 getCart() 方法。

lastwinner

清单 7 显示了 addToCartButtonHandler() 函数的实现，当点击商品的 Add to Cart 按钮时会调用这个函数：
清单 7. addToCartButtonHandler() 实现

[php]
/*
* Handles a click on an Item's "Add to Cart" button
*/
function addToCartButtonHandler() {

  // 'this' is the button that was clicked.
  // Obtain the item ID that was set on it, and
  // add to the cart.
  Cart.addItemToCart(this.itemId,displayCart);
}
...........
[/php]

lastwinner

由 DWR 负责所有通信，所以客户上的添加到购物车行为就是一个函数。清单 8 显示了这个示例的最后一部分 —— displayCart() 回调的实现，它用 Cart 的状态更新用户界面：


清单 8. displayCart() 实现


[php]
/*
* Displays the contents of the user's shopping cart
*/
function displayCart(cart) {

  // Clear existing content of cart UI
  var contentsUL = $("contents";
  contentsUL.innerHTML="";

  // Loop over cart items
  for (var item in cart.simpleContents) {

    // Add a list element with the name and quantity of item
    var li = document.createElement("li";
    li.appendChild(document.createTextNode(
                    cart.simpleContents[item] + " x " + item
                  ));
    contentsUL.appendChild(li);
  }

  // Update cart total
  var totalSpan = $("totalprice";
  totalSpan.innerHTML = cart.formattedTotalPrice;
}
.........
[/php]

在这里重要的是要记住，simpleContents 是一个把 String 映射到数字的 JavaScript 数组。每个字符串都是一个商品的名称，关联数组中的对应数字就是购物车中该商品的数量。所以表达式 cart.simpleContents[item] + " x " + item 可能就会计算出 “2 x Oolong 128MB CF Card” 这样的结果。

lastwinner

DWR 的利弊

——————————————————————————————————————————
调用批处理
在 DWR 中，可以在一个 HTTP 请求中向服务器发送多个远程调用。调用 DWREngine.beginBatch() 告诉 DWR 不要直接分派后续的远程调用，而是把它们组合到一个批请求中。DWREngine.endBatch() 调用则把批请求发送到服务器。远程调用在服务器端顺序执行，然后调用每个 JavaScript 回调。
批处理在两方面有助于降低延迟：第一，避免了为每个调用创建 XMLHttpRequest 对象并建立相关的 HTTP 连接的开销。第二，在生产环境中，Web 服务器不必处理过多的并发 HTTP 请求，改进了响应时间。
——————————————————————————————————————————
现在可以看出用 DWR 实现由 Java 支持的 Ajax 应用程序有多么容易了。虽然示例场景很简单，我实现用例的手段也尽可能少，但是不应因此而低估 DWR 引擎相对于自己设计 Ajax 应用程序可以节约的工作量。在前一篇文章中，我介绍了手工设计 Ajax 请求和响应、把 Java 对象图转化成 JSON 表示的全部步骤，在这篇文章中，DWR 替我做了所有这些工作。我只编写了不到 50 行 JavaScript 就实现了客户机，而在服务器端，我需要做的所有工作就是给常规的 JavaBean 加上一些额外方法。
当然，每种技术都有它的不足。同任何 RPC 机制一样，在 DWR 中，可能很容易忘记对于远程对象进行的每个调用都要比本地函数调用昂贵得多。DWR 在隐藏 Ajax 的机械性方面做得很好，但是重要的是要记住网络并不是透明的 —— 进行 DWR 调用会有延迟，所以应用程序的架构应当让远程方法的粒度比较粗。正是为了这个目的，addItemToCart() 才返回 Cart 本身。虽然让 addItemToCart() 作为一个 void 方法可能更自然，但是这样的话对它的每个 DWR 调用后面都必须跟着一个 getCart() 调用以检索修改后的 Cart 状态。
对于延迟，DWR 在调用的批处理中有自己的解决方案（请参阅侧栏的 调用批处理）。如果不能为应用程序提供适当粗粒度的 Ajax 接口，那么只要有可能把多个远程调用组合到一个 HTTP 请求中，就请使用调用批处理。

lastwinner

DWR 商店应用程序
图 3 显示了这个基于 DWR 的 Ajax 应用程序的使用情况：显示了通过搜索检索到的商品，并在右侧显示用户的购物车：
图 3. 基于 DWR 的 Ajax 商店应用程序的使用情况

lastwinner

分离的问题
从实质上看，DWR 在客户端和服务器端代码间形成了紧密的耦合，这有许多含义：首先，远程方法 API 的变化需要在 DWR 存根调用的 JavaScript 上反映出来。第二（也是最明显的），这种耦合会造成对客户端的考虑会渗入服务器端代码。例如，因为不是所有 Java 类型都能转化成 JavaScript，所以有时有必要给 Java 对象添加额外方法，好让它能够更容易地远程化。在示例场景中，我通过把 getSimpleContents() 方法添加到 Cart 来解决这个问题。我还添加了 getCart() 方法，它在 DWR 场景中是有用的，但在其他场景中则完全是多余的。由于远程对象粗粒度 API 的需要以及把某些 Java 类型转化成 JavaScript 的问题，所以可以看到远程 JavaBean 会被那些只对 Ajax 客户有用的方法“污染”。
为了克服这个问题，可以使用包装器类把额外的特定于 DWR 的方法添加到普通 JavaBean。这意味着 JavaBean 类的 Java 客户可能看不到与远程相关联的额外的毛病，而且也允许给远程方法提供更友好的名称 —— 例如用 getPrice() 代替 getFormattedPrice()。图 4 显示的 RemoteCart 类对 Cart 进行了包装，添加了额外的 DWR 功能：
图 4. RemoteCart 为远程功能对 Cart 做了包装

最后，需要记住：DWR Ajax 调用是异步的，所以不要期望它们会按照分派的顺序返回。在示例代码中我忽略了这个小问题，但是在这个系列的第一篇文章中，我演示了如何为响应加时间戳，以此作为保证数据到达顺序的一种简单手段。

lastwinner

结束语

正如所看到的，DWR 提供了许多东西 —— 它允许迅速而简单地创建到服务器端域对象的 Ajax 接口，而不需要编写任何 servlet 代码、对象序列化代码或客户端 XMLHttpRequest 代码。使用 DWR 部署到 Web 应用程序极为简单，而且 DWR 的安全性特性可以与 J2EE 基于角色的验证系统集成。但是 DWR 并不是对于任何一种应用程序架构都适合，所以在设计域对象的 API 时需要做些考虑。

如果想学习用 DWR 进行 Ajax 的利弊的更多内容，最好的方式就是下载并开始实践。DWR 有许多我没有介绍的特性， 文章源代码 是把 DWR 投入使用的一个良好起点。请参阅 参考资料，学习关于 Ajax、DWR 和相关技术的更多内容。

这个系列中要指出的最重要的一点是：对于 Ajax 应用程序，没有包治百病的解决方案。Ajax 是一个快速发展的领域，不断有新技术涌现。在这个系列的三篇文章中，我的重点在于带您开始在 Ajax 应用程序的 Web 层中利用 Java 技术 —— 不管是选择基于 XMLHttpRequest 的带有对象序列化框架的技术，还是选择 DWR 这样的更高级抽象。请在后续几个月中留意面向 Java 开发人员介绍 Ajax 的文章。

lastwinner

下载
描述 DWR source code
名字 j-ajax3dwr.zip
大小 301 KB
下载方法
FTP


关于下载方法的信息


Get Adobe® Reader®

lastwinner

参考资料
学习

• 您可以参阅本文在 developerWorks 全球站点上的 英文原文。
• “Call SOAP Web services with AJAX, Part 1: Build the Web services client” （James Snell，developerWorks，2005 年 10 月）：用 Ajax 实现 SOAP Web 服务客户机。
• “面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化 ” （Philip McCarthy，developerWorks，2005 年 10 月）：学习在 Ajax 应用程序中进行数据序列化的技术。
• “面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序” （Philip McCarthy，developerWorks，2005 年 9 月）：使用 Ajax 的第一步。
• DWR Handbook ：对 Ajax 和 DWR 的介绍。
• “Developing AJAX Applications the Easy Way” （Java.net，2005 年 8 月）：DWR 的创造者 Joe Walker 介绍如何编写简单的 Ajax 聊天服务器。
• 请参阅教程 An alternative to generating Ajax code with Java is using the Simple Ajax Toolkit (Sajax)，学习如何从 Sajax 起步。
• Java 技术专区 ：数百篇关于 Java 编程各方面的文章。

获得产品和技术

• 下载 DWR ：得到最新的 DWR jar 发行包。
• JSON-RPC-Java ：用于 Java 的另一个 Ajax-RPC 引擎。
  

讨论

• 参与论坛讨论。
• DWR's Java.net pages ：订阅 DWR 的邮件列表。
• developerWorks blogs ：加入 developerWorks 社区。
  

关于作者


Philip McCarthy 是一位软件开发顾问，专攻 Java 和 Web 技术。他目前在位于 Bristol 的 HP 试验室从事 Hewlett Packard 数字媒体平台的工作 。在最近几年中，Phil 开发了多个采用异步服务器通信和 DOM 脚本的富 Web 客户端。他很高兴我们现在有了一个针对它们的名称。可以通过 Phil 的电子邮件 philmccarthy@gmail.com 与他联系。

lastwinner

文档链接： http://www-128.ibm.com/developerworks/cn/java/j-ajax3/