📄 毕设的翻译 -- 使用direct web remoting的ajax - 学习历程 - 独败.htm
字号:
<DIV><FONT face=Arial size=3></FONT> </DIV>
<DIV><B><FONT face=Arial></FONT></B> </DIV>
<DIV><B><FONT face=Arial></FONT></B> </DIV>
<DIV><B>关于例子</B></DIV>
<DIV>在详细解释DWR之前，我会引入一个简单的例子。就像在前面的文章一样，我要使用在线商店基础上的小模型，这次由基本商品展示、用户购物车（用来装商品）和数据访问对象（从数据存储中查找商品细节信息）几部分组成。物品类（Item
class）和前面文章中使用的一样，但它不再实现手工串行化的方法了。图1描述了这个简单关系：
</DIV>
<DIV><B>图</B><B>1.
</B><B>购物车（</B><B>Cart</B><B>）、目录</B><B>DAO</B><B>（</B><B>CatalogDAO</B><B>）和物品（</B><B>Item</B><B>）类之间的类关系图</B><B>
</B></DIV>
<DIV align=center></DIV>
<DIV><IMG
src="毕设的翻译%20--%20使用Direct%20Web%20Remoting的Ajax%20-%20学习历程%20-%20独败_files/dwr-fig1.gif"></DIV>
<DIV>我会在这个背景下示范两个非常简单的用例。首先，用户可以商品列表中用文本搜索匹配的产品。其次，用户可以向购物车中加入商品并看到购物车中所有商品的总价值。
</DIV></DIV><BR clear=all>
<DIV>
<DIV><FONT face=Arial size=3></FONT> </DIV>
<DIV><B>实现商品列表</B></DIV>
<DIV>DWR应用程序的起点是写服务端的对象模型。在这个例子中，我从提供在商品目录中的搜索能力的DAO的编写开始。CatalogDAO.java是一个简单的无状态的类，拥有一个无参数的构造函数。列表1显示了我想暴露给Ajax客户端的Java方法的原型：</DIV>
<DIV><A name=listing1><B>列表</B></A><B> 1.
</B><B>通过</B><B>DWR</B><B>暴露的</B><B>CatalogDAO
</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> * Returns a list of items
in the catalog that have </DIV>
<DIV align=left> * names or
descriptions matching the search
expression</DIV>
<DIV align=left> * @param expression Text
to search for in item names </DIV>
<DIV align=left> * and descriptions
</DIV>
<DIV align=left> * @return list of all
matching items</DIV>
<DIV align=left> */</DIV>
<DIV align=left>public List<Item>
findItems(String expression);</DIV>
<DIV align=left> </DIV>
<DIV align=left>/**</DIV>
<DIV align=left> * Returns the Item
corresponding to a given Item ID</DIV>
<DIV align=left> * @param id The ID code of
the item</DIV>
<DIV align=left> * @return the matching
Item</DIV>
<DIV align=left> */</DIV>
<DIV align=left>public Item getItem(String
id);</DIV></TD></TR></TBODY></TABLE>
<DIV> </DIV>
<DIV>下一步，我需要配置DWR，告诉它Ajax客户需要能构造一个CatalogDAO并且调用这些方法。我用列表2中显示的配置文件dwr.xml来完成这个功能：
</DIV>
<DIV><A name=listing2><B>列表</B></A><B> 2.
</B><B>配置暴露的</B><B>CatalogDAO</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><!DOCTYPE dwr PUBLIC</DIV>
<DIV align=left> "-//GetAhead Limited//DTD
Direct Web Remoting 1.0//EN"</DIV>
<DIV align=left>
"http://www.getahead.ltd.uk/dwr/dwr10.dtd"></DIV>
<DIV align=left><dwr></DIV>
<DIV align=left> <allow></DIV>
<DIV align=left> <create
creator="new" javascript="catalog"></DIV>
<DIV align=left>
<param name="class" </DIV>
<DIV
align=left>
value="developerworks.ajax.store.CatalogDAO"/></DIV>
<DIV align=left>
<include method="getItem"/> </DIV>
<DIV align=left>
<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></DIV>
<DIV align=left> </allow></DIV>
<DIV
align=left></dwr></DIV></TD></TR></TBODY></TABLE>
<DIV> </DIV>
<DIV>dwr.xml
文件的根元素是dwr。在这个元素里面是allow元素，它说明了DWR要提供远程调用的类。allow元素的两个子元素是create
和 convert。 </DIV>
<DIV><B><FONT face=Arial>create
</FONT></B><B>元素</B><FONT face=Arial><B>
</B></FONT></DIV>
<DIV>create
元素告诉DWR一个服务端的类要暴露给Ajax请求，并且定义了DWR如何获得那个提供给远程的类的实例。这里的creator属性的值设为new，意味着DWR应该调用这个类默认的构造函数来得到一个实例。还有其他可以得到实例的方法，如通过使用了Bean脚本框架（BSF）的脚本片段，或是通过IOC容器和Spring的综合技术。在默认情况下，当提交给DWR的Ajax请求调用了一个构造函数，这个实例化的对象被放置到页面范围内，因此在请求完成后不再有效。在无状态的CatalogDAO看来，这样是好的。
</DIV>
<DIV>create的javascript属性指定了Javascript代码要访问对象时需要使用的名字。嵌套在create元素中的，一个param元素指定了构造者要创建的Java类。最后，include元素指定了要暴露的方法的名字。明确地指出要暴露的方法是避免偶然允许潜在的有害功能的好主意。如果这个元素被忽略了，所有的类方法都会暴露给远程调用。相对地，你可以使用exclude元素来指定不允许访问的方法。
</DIV></DIV><BR clear=all>
<DIV>
<DIV><FONT face=Arial size=3></FONT> </DIV>
<DIV><FONT face=Arial size=3></FONT> </DIV>
<DIV><FONT face=Arial size=3></FONT> </DIV>
<DIV><B><FONT face=Arial>convert
</FONT></B><B>元素</B><FONT face=Arial><B>
</B></FONT></DIV>
<DIV>就像creator属性和Web远程调用的暴露的类和它们的方法有关，converter就与那些方法的参数和返回类型有关。convert元素用来告诉DWR怎样在服务端的Java对象表示和序列化的Javascript表示之间转换数据类型。
</DIV>
<DIV>DWR自动地在Java和Javascript
之间转换简单的数据类型。这些类型包括Java基本类型和它们各自的类描述，还有字符串、日期、数组和集合类型。DWR还可以把JavaBean转为Javascript描述，但是由于安全的原因，这样做需要明确的配置。
</DIV>
<DIV>列表2中的convert元素告诉DWR去用它自己的基于反射的bean
convertor来转化暴露的CatalogDAO的方法返回的项目，并指定了哪些项目的成员可以被包含在序列化中。这些成员遵从用JavaBean的命名习惯，所以DWR可以调用相应的get方法。在这个例子里，我忽略了数字表示的price成员，而包含了formattedPrice成员来取代它。formattedPrice是可以直接用来显示的货币类型。
</DIV>
<DIV>到了这里，我已经准备好部署我的dwr.xml到我的Web程序的WEB-INF的目录，在那里DWR的servlet会找到它。在进一步继续之前，无论如何，确认所有东西都能像想的那样工作是个好主意。
</DIV></DIV><BR clear=all>
<DIV></DIV><BR clear=all>
<DIV>
<DIV><FONT face=Arial size=3></FONT> </DIV>
<DIV><B>测试发布</B></DIV>
<DIV>如果DWR servlet
的web.xml定义设置初始参数debug为真，那么DWR的很有用的测试模式就开启了。浏览/{your-web-app}/dwr/带来的DWR向远程发布的类的列表，一路单击来到一个给定类的状态页面。图2中显示的是关于CatalogDAO的DWR测试页面。就像提供script标签嵌到你的Web页面中去一样，转向指到DWR给这个类生成的JavaScript的链接上，页面会显示这个类的方法列表。列表中包括从超类中继承来的方法。但只有在dwr.xml明确指定可以远程调用的方法是可以访问的。
</DIV>
<DIV><B>图</B><B> 2. CatalogDAO </B><B>的</B><B>DWR
</B><B>测试页面</B><B> </B></DIV>
<DIV></DIV>
<DIV><IMG
src="毕设的翻译%20--%20使用Direct%20Web%20Remoting的Ajax%20-%20学习历程%20-%20独败_files/dwr-fig2.jpg"></DIV>
<DIV>可以在可访问的方法旁边的文本框中输入参数值然后点击<B>Execute</B>按钮来调用它们。服务器的响应内容会在警告框中用JSON符号显示出来，简单值的响应直接在方法的旁边显示。这些测试页面非常有用。它们不仅让你能够简单地检查哪些类和方法可供远程访问，你还可以测试每个方法是否像预期地那样工作。</DIV>
<DIV>直到你对你的远程方法的正确工作结果感到满意时，你就可以使用DWR生成的Javascript存根函数在客户端代码中调用服务端的对象。
</DIV></DIV><BR clear=all>
<DIV>
<DIV><B>调用远程对象</B></DIV>
<DIV>远程Java对象方法和它们相应的JavaScript存根函数之间的映射是简单的。生成JavaScript的形式是JavaScriptName.methodName(methodParams
..., callBack)，其中JavaScriptName是creator的javascript
属性指定的名字，methodParams表示Java方法的n个参数，callBack是一个JavaScript函数，它被调用时能得到Java方法的返回值。如果你对Ajax熟悉的话，你会认出这个回调机制，它和XMLHttpRequest中的异步机制类似。</DIV>
<DIV>在这个例子的背景下我使用列表3中的JavaScript函数来实现搜索并用搜索的结果更新用户界面。这个列表也使用了DWR的
util.js中的方便的函数。值得特别注意的是叫$()的JavaScript函数，它可以看作document.getElementById()的一个改编版本。显然它更容易写出来。如果你使用过prototype
JavaScript library，你会对这个函数很熟悉。</DIV>
<DIV><A name=listing3><B></B></A> </DIV>
<DIV><B></B> </DIV>
<DIV><B>列表</B><B>
3.</B><B>从客户端调用远程的</B><B>findItems()</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 submission of
the search form</DIV>
<DIV align=left> */</DIV>
<DIV align=left>function
searchFormSubmitHandler() {</DIV>
<DIV align=left> </DIV>
<DIV align=left> // Obtain the search
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -