结合Direct Web Remoting使用Ajax3

　　清单 6. 修改过的 dwr.xml 包含了 Cart 类

<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
  </allow>
    </create creator="new" javascript="catalog">
      </param name="class"
        value="developerworks.ajax.store.CatalogDAO"/>
      </include method="getItem"/>
      </include method="findItems"/>
    <//create>
    </convert converter="bean"
      match="developerworks.ajax.store.Item">
      </param name="include"
        value="id,name,description,formattedPrice"/>
    <//convert>
    </create creator="new" scope="session" javascript="Cart">
      </param name="class"
        value="developerworks.ajax.store.Cart"/>
      </include method="addItemToCart"/>
      </include method="getCart"/>
    <//create>
    </convert converter="bean"
      match="developerworks.ajax.store.Cart">
      </param name="include"
        value="simpleContents,formattedTotalPrice"/>
    <//convert>
  <//allow>
</dwr>

　　在这个版本的 dwr.xml 中，我添加了 Cart 的 creator 和 convertor。create 元素指定应当把 addItemToCart() 和 getCart() 方法远程化，而且重要的是，生成的 Cart 实例应当放在用户的会话中。所以，购物车的内容在用户的请求之间会保留。

　　Cart 的 convert 元素是必需的，因为远程的 Cart 方法返回的是 Cart 本身。在这里我指定在 Cart 的序列化 JavaScript 形式中应当存在的成员是 simpleContents 这个图和 formattedTotalPrice 这个字符串。

　　如果对这觉得有点儿不明白，那么只要记住 create 元素指定的是 DWR 客户可以调用的 Cart 服务器端方法，而 convert 元素指定在 Cart 的 JavaScript 序列化形式中包含的成员。

　　现在可以实现调用 Cart 的远程方法的客户端代码了。

　　调用远程的 Cart 方法

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

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

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

　　清单 7. addToCartButtonHandler() 实现

/*
 * 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);
}

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