📄 毕设的翻译 -- 使用direct web remoting的ajax - 学习历程 - 独败.htm
字号:
</include method="findItems"/></DIV>
<DIV align=left>
<//create></DIV>
<DIV align=left> </convert
converter="bean" </DIV>
<DIV align=left>
match="developerworks.ajax.store.Item"></DIV>
<DIV align=left>
</param name="include" </DIV>
<DIV align=left>
value="id,name,description,formattedPrice"/></DIV>
<DIV align=left>
<//convert><B></B></DIV>
<DIV align=left><B>
</create creator="new" scope="session"
javascript="Cart"></B></DIV>
<DIV
align=left><B>
</param name="class" </B></DIV>
<DIV
align=left><B>
value="developerworks.ajax.store.Cart"/></B></DIV>
<DIV
align=left><B>
</include
method="addItemToCart"/></B></DIV>
<DIV
align=left><B>
</include method="getCart"/></B></DIV>
<DIV align=left><B>
<//create></B></DIV>
<DIV align=left><B>
</convert converter="bean" </B></DIV>
<DIV
align=left><B>
match="developerworks.ajax.store.Cart"></B></DIV>
<DIV
align=left><B>
</param name="include" </B></DIV>
<DIV
align=left><B>
value="simpleContents,formattedTotalPrice"/></B></DIV>
<DIV align=left><B>
<//convert></B></DIV>
<DIV align=left> <//allow></DIV>
<DIV
align=left></dwr></DIV></TD></TR></TBODY></TABLE>
<DIV><FONT face=Arial size=3></FONT> </DIV>
<DIV>在这个版本的dwr.xml中，我为Cart加了一个creator和一个convertor。create元素指定了addItemToCart()
和
getCart()方法可以远程调用，并且，很重要的，创建的Cart实例要被放在用户的会话中。于是，cart的内容生存于用户的请求中。</DIV>
<DIV>关于Cart的convert元素是必须的，因为远程的Cart的方法返回了Cart自己。这里我指定要在序列化的Javascript中可用的Cart的成员是映射simpleContents和字符串formattedTotalPrice。</DIV>
<DIV>如果你觉得这有一点让人迷惑，请注意create元素指定了DWR客户端可以调用的Cart服务端方法，而convert元素指定了要包含在Cart的Javascript序列化的成员。</DIV>
<DIV>现在我可以实现客户端代码，调用我的远程Cart方法了。</DIV>
<DIV><FONT face=Arial size=3></FONT> </DIV>
<DIV><B>远程调用</B><B><FONT
face=Arial>Cart</FONT></B><B>方法</B></DIV>
<DIV>首先，当商店的Web页第一次装载时，我要检查会话session中存储的Cart的状态，如果有的话。这是必须的，因为用户可能已经把物品放到购物车中，然后刷新了页面，或浏览了别处以后又回来。在这些情况下，重载的页面需要用会话session中的Cart数据让自己保持同步。我可以用页面的onload函数来完成这个功能，像这样：
Cart.getCart(displayCart)
。注意displayCart()是一个回调函数，被调用时带有服务端的Cart响应数据。</DIV>
<DIV>如果Cart已经在会话session里了，构造者会重新得到它并调用它的getCart()方法。如果会话session里没有Cart，构造者会新实例化一个，放在会话session中，并调用getCart()方法。</DIV>
<DIV>列表7显示了addToCartButtonHandler()函数的实现。当物品的Add
to Cart按钮被点击时这个函数被调用：</DIV>
<DIV><A name=listing7><B>列表</B></A><B> 7.
addToCartButtonHandler()
</B><B>的实现</B><B></B></DIV>
<TABLE cellSpacing=0 cellPadding=0 width="100%"
border=1>
<TBODY>
<TR>
<TD>
<DIV align=left> </DIV>
<DIV align=left> </DIV>
<DIV align=left>/*</DIV>
<DIV align=left> * Handles a click on an
Item's "Add to Cart" button</DIV>
<DIV align=left> */</DIV>
<DIV align=left>function
addToCartButtonHandler() {</DIV>
<DIV align=left> </DIV>
<DIV align=left> // 'this' is the button
that was clicked.</DIV>
<DIV align=left> // Obtain the item ID
that was set on it, and</DIV>
<DIV align=left> // add to the cart.</DIV>
<DIV align=left>
Cart.addItemToCart(this.itemId,displayCart);</DIV>
<DIV align=left>}</DIV></TD></TR></TBODY></TABLE>
<DIV><FONT face=Arial size=3></FONT> </DIV>
<DIV>有了DWR来管理所有的交流通讯，客户端的“加入购物车”动作的代码只有一行函数。列表8显示了这个七巧板形状的最后一片——displayCart()回调的实现，它用Cart的状态更新用户界面：</DIV>
<DIV><A name=listing8><B>列表</B></A><B> 8.
displayCart() </B><B>的实现</B><B></B></DIV>
<TABLE cellSpacing=0 cellPadding=0 width="100%"
border=1>
<TBODY>
<TR>
<TD>
<DIV align=left> </DIV>
<DIV align=left> </DIV>
<DIV align=left>/*</DIV>
<DIV align=left> * Displays the contents of
the user's shopping cart</DIV>
<DIV align=left> */</DIV>
<DIV align=left>function displayCart(cart)
{</DIV>
<DIV align=left> </DIV>
<DIV align=left> // Clear existing content
of cart UI</DIV>
<DIV align=left> var contentsUL =
$("contents");</DIV>
<DIV align=left>
contentsUL.innerHTML="";</DIV>
<DIV align=left> </DIV>
<DIV align=left> // Loop over cart
items</DIV>
<DIV align=left> for (var item in
cart.simpleContents) {</DIV>
<DIV align=left> </DIV>
<DIV align=left> // Add a list
element with the name and quantity of item</DIV>
<DIV align=left> var li =
document.createElement("li");</DIV>
<DIV align=left>
li.appendChild(document.createTextNode(</DIV>
<DIV
align=left>
cart.simpleContents[item] + " x " + item</DIV>
<DIV
align=left>
));</DIV>
<DIV align=left>
contentsUL.appendChild(li);</DIV>
<DIV align=left> }</DIV>
<DIV align=left> </DIV>
<DIV align=left> // Update cart
total</DIV>
<DIV align=left> var totalSpan =
$("totalprice");</DIV>
<DIV align=left> totalSpan.innerHTML =
cart.formattedTotalPrice;</DIV>
<DIV align=left>}</DIV></TD></TR></TBODY></TABLE>
<DIV><FONT face=Arial size=3></FONT> </DIV>
<DIV>这里注意simpleContents是一个Javascript数组，它将字符串映射为数字。每个映射的字符串是物品的名字，相应的数字是车中物品的数量。因此，cart.simpleContents[item]
+ " x " + itemevaluates的结果就是"2 x Oolong 128MB CF
Card"（举个例子）。</DIV>
<DIV><B><FONT
face=Arial>DWR</FONT></B><B>商店应用程序</B></DIV>
<DIV>图3显示了运行时的我的基于DWR的Ajax应用程序，显示了搜索到的物品，右边是用户的购物车：</DIV>
<DIV><B>图</B><B> 3.
</B><B>运行时的基于</B><B>DWR</B><B>的</B><B>Ajax</B><B>商店应用程序</B></DIV>
<DIV align=center></DIV></DIV><IMG
src="毕设的翻译%20--%20使用Direct%20Web%20Remoting的Ajax%20-%20学习历程%20-%20独败_files/dwr-fig3.jpg"><BR
clear=all>
<DIV></DIV><BR clear=all>
<DIV>
<DIV><FONT face=Arial size=3></FONT> </DIV>
<DIV><B><FONT
face=Arial>DWR</FONT></B><B>的优势和不足</B></DIV>
<TABLE cellSpacing=0 cellPadding=0 width="33%"
align=right border=1>
<TBODY>
<TR>
<TD width="100%">
<DIV align=left><B>批量调用</B></DIV>
<DIV
align=left>在DWR中可以把几个远程调用放在单个的HTTP请求中发送给服务端。调用
DWREngine.beginBatch()告诉DWR不要把后面的远程调用直接发出去，相反要把它们组合进单个的批请求中。调用
DWREngine.endBatch()把批调用发给服务端。远程调用在服务端按顺序调用，并且每个JavaScript回调函数都被调用。</DIV>
<DIV align=left>批处理可以在两方面减少延迟：第一，你可以避免创建
XMLHttpRequest对象和为每个调用建立HTTP连接的开销。第二，在一个产品环境中，Web服务器不需要同时处理这么多HTTP请求，提高了响应次数。</DIV></TD></TR></TBODY></TABLE>
<DIV>你已经看到了用DWR来实现一个Java支持的Ajax应用程序是多么的容易。尽管这个例子很简单，而且我用了相当简化的方法去实现这个用例，但你不应该低估使用DWR引擎相对于直接用Ajax来实现所节省的工作量。在上一篇文章中我全部用手工的方式来建立Ajax请求和响应，并把一个Jav⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -