基于AJAX技术的DWR框架DWR中的JS库及回调机制和应用示例.docx

1、基于AJAX技术的DWR框架DWR中的JS库及回调机制和应用示例目 录1.1 DWR中的JavaScript库 21.1.1 -util.js函数库 21.2 DWR中的回调机制 141.2.1 DWR中的回调机制及相关的应用示例 141.2.2 JavaScript Object Notation (JSON) 181.2.3 DWR 和 其它的框架的对比 231.2.4 J2EE安全性和DWR 251.1 DWR中的JavaScript库1.1.1 -util.js函数库1、DWR中的util.js函数库（1）作用util.js包含了一些工具函数来帮助我们用JavaScript数据(例如从

2、服务器返回的数据)来操作我们的web页面中的各个元素。2、addOptions方法的应用-DWRUtil.addOptions 的各种调用方法（DWR3.0以后为dwr.util. addOptions）（1）数组参数- DWRUtil.addOptions(selectid, array)应用示例： var arrayFive = One, Two, Three, Four, Five ;function testAddOptionsBasic() DWRUtil.addOptions(addOptionsBasic, arrayFive); if (DWRUtil.getValue(add

3、OptionsBasic) = One) success();if (DWRUtil.getText(addOptionsBasic) = One) success(); 注意：此形式的函数产生的列表框中的key和value相同。最后产生出如下的标签： One Two Three Four Five（2）对象数组（指定text）DWRUtil.addOptions(selectid, data, prop) 用每个数组元素创造一个option，option的值由数组中的value决定，而显示的内容则由数组中的name决定。 one two three 应用示例：var arrayObject

4、= name:One, value:1 , name:Two, value:2 , name:Three, value:3 , name:Four, value:4 , name:Five, value:5 ;function testAddOptionsObject1() DWRUtil.addOptions(addOptionsObject1, arrayObject, name); if (DWRUtil.getValue(addOptionsObject1) = 1) success(); if (DWRUtil.getText(addOptionsObject1) = One) su

5、ccess(); （3）对象数组（指定text和value值）DWRUtil.addOptions(selectid, array, valueprop, textprop) 用每个数组元素创造一个option，option的值（value属性）是对象的valueprop属性，option的文字（显示的文字）是对象的textprop属性。比如我们从服务器端获得了一个citylist的数据，要把这些数据放到id为city的一个下拉列表中，它有这么两个属性id和name-我们要用id作为下拉列表的value，而name作为下拉列表的text。那么需要这么写： DWRUtil.removeAllOp

6、tions(city); DWRUtil.addOptions(city, citylist, id, name);应用示例：var arrayObject = optionValue:One, optionText:1 , optionValue:Two, optionText:2 , optionValue:Three, optionText:3 , optionValue:Four, optionText:4 , optionValue:Five, optionText:5 ;function testAddOptionsObject2() DWRUtil.addOptions(addO

7、ptionsObject2, arrayObject, optionValue, optionText);if (DWRUtil.getValue(addOptionsObject2) = One) success(); if (DWRUtil.getText(addOptionsObject2) = 1) success(); （4）Map对象DWRUtil.addOptions(selectid, map, reverse)用每个属性创建一个option。对象属性名用来作为option的值，对象属性值用来作为属性的文字。应用示例：var map = one:1, two:2, three:

8、3, four:4, five:5 ;function testAddOptionsMap1() DWRUtil.addOptions(addOptionsMap1, map); if (DWRUtil.getValue(addOptionsMap1) = one) success(); if (DWRUtil.getText(addOptionsMap1) = 1) success(); 另一个例-如果reverse参数被设置为true，那么对象属性值用来作为选项的值。var map = one:1, two:2, three:3, four:4, five:5 ;function test

9、AddOptionsMap2() DWRUtil.addOptions(addOptionsMap2, map, true); if (DWRUtil.getValue(addOptionsMap2) = 1) success(); if (DWRUtil.getText(addOptionsMap2) = one) success(); （5）ol 或 ul 列表DWRUtil.addOptions(ulid, array) 用数组中的元素创建一堆li元素，他们的innerHTML是数组元素中的值。这种模式可以用来创建ul和ol列表。应用示例：var arrayFive = One, Two

10、, Three, Four, Five ;function testAddItemsBasic() DWRUtil.addOptions(addItemsBasic, arrayFive); （6）addOptions的其它方面的应用示例DWR的一个常遇到的任务就是根据选项填充选择列表。如果我们希望在我们更新了select以后，它仍然保持原来的选择，我们可以采用下面的实现方法：var sel = DWRUtil.getValue(id);DWRUtil.removeAllOptions(id);DWRUtil.addOptions(id, .);DWRUtil.setValue(id, sel

11、);另外，如果我们想加入一个初始的Please select. 选项，那么我们可以直接加入下面的语句：DWRUtil.addOptions(id, Please select .);然后再在下面紧接着加入我们真正的其它的各个选项数据。（7）所应该注意的问题 注意我们每次使用addOptions之前,需要先使用removeAllOptions来将下拉列表或者列表清空，否则下拉列表中的内容会一直累加。应用示例：function testRemoveOptions() DWRUtil.removeAllOptions(removeOptions);DWRUtil.addOptions(removeO

12、ptions, arrayFive); One Two Three Four Five 应用示例：function testRemoveItems() DWRUtil.removeAllOptions(removeItems); OneTwoThreeFourFive 另外需要注意的是javascript中的字符串最好用单引号而不要用双引号，否则可能又有一些莫名其妙的问题-还有就是引号要成对出现，不要一个单的一个双的。 这个函数所有的参数都是字符串。3、对表格操作的各个方法- addRows() 和 removeAllRows()（1）主要的功能DWR通过这两个函数来帮助我们动态操作table

13、- DWRUtil.addRows() 和 DWRUtil.removeAllRows() 。（2）方法的参数说明这两个函数的第一个参数都是table、tbody、thead、tfoot的id。一般来说最好使用tbody，因为这样可以保持我们的header和footer行不变，并且可以防止Internet Explorer的bug。（3）DWRUtil.removeAllRows() 方法的应用 用法：DWRUtil.removeAllRows(id); 描述：通过id删除table中所有行。 参数：id - table元素的id（最好是tbody元素的id）（4）DWRUtil.addRow

14、s()方法的应用 用法： DWRUtil.addRows(id, array, cellfuncs, options); 描述： 向指定id的table元素添加行。它使用数组中的每一个元素在table中创建一行。id：table元素的id(最好是tbody元素的id) array：数组(DWR1.1以后可以是对象)，做为更新表格数据。 Cellfuncs：函数数组-DWR根据该函数数组实现从传递过来的行数据中提取单元格数据。 Options：一个包含选项的对象(见下面) ，选项包括：rowCreator：一个用来创建行的函数(例如，你希望个tr加个css). 默认是返回一个document.c

15、reateElement(tr) cellCreator：一个用来创建单元格的函数(例如，用th代替td). 默认返回一个document.createElement(td) 注意：每次在调用DWRUtil.addRows()方法时间，应该首先调用DWRUtil.removeAllRows() 方法，否则将产生累加的效果。应用示例1：var arrayFive = One, Two, Three, Four, Five ; /数组中的元素的个数为表格中的行数function testAddRowsBasic() DWRUtil.addRows( addRowsBasic, arrayFive,

16、 /函数数组中的元素的个数为表格中的列数function(arrayFiveElement) /它控制表格中的第一列中的数据显示方式 return arrayFiveElement; , function(arrayFiveElement) /它控制表格中的第二列return arrayFiveElement.toUpperCase(); /加工或者处理, function(arrayFiveElement) /它控制表格中的第三列 var tag=; return tag; var inputTagObj= document.createElement(input); / inputTagO

17、bj.setAttribute(type, button); / inputTagObj.setAttribute(value, DOM Test); inputTagObj.setAttribute(onclick, alert( + arrayFiveElement + );); return inputTagObj; ,function(arrayFiveElement) /它控制表格中的第四列 var inputTagObj= document.createElement(input); inputTagObj.setAttribute(type, button); inputTagO

18、bj.setAttribute(value, innerHTML Test); inputTagObj.setAttribute(onclick, alert( + arrayFiveElement + );); return inputTagObj; ); UnalteredAlteredDOM ButtonInnerHTML Button 注意：在应用中发现，如果采用document.createElement(input);方式时，其onclick事件不起作用；而改用产生HTML字符串的方式时，则onclick事件有效果-不知道是什么原因？。应用示例2：如果返回的数据中只有一条信息fun

19、ction showOneUserInfoByIDCallBackFun (returnOneUserInfoVO) var OneUserInfoArray = returnOneUserInfoVO; DWRUtil.addRows(userInfoItems, OneUserInfoArray, function(returnOneUserInfoVO) /该函数决定表格中的第一列 return returnOneUserInfoVO.userName; , function(returnOneUserInfoVO) /该函数决定表格中的第二列 return returnOneUserI

20、nfoVO.userDepartment; , function(returnOneUserInfoVO) /该函数决定表格中的第三列 return returnOneUserInfoVO.userAdminLevel; , function(returnOneUserInfoVO) /该函数决定表格中的第四列 return returnOneUserInfoVO.departAdminLevel; , function(returnOneUserInfoVO) /该函数决定表格中的第五列 var imageHtmlTag = document.createElement(img); imag

21、eHtmlTag.setAttribute(src, returnOneUserInfoVO.userImage); imageHtmlTag.setAttribute(width, 28); imageHtmlTag.setAttribute(height, 54); return imageHtmlTag; , function(returnOneUserInfoVO) /该函数决定表格中的第六列 return returnOneUserInfoVO.registerTime; );注意：页面中的表格定义1.2 DWR中的回调机制1.2.1 DWR中的回调机制及相关的应用示例1、DWR中的

22、回调机制（1）在DWR中是如何实现AJAX技术中的“异步”功能由于DWR是根据dwr.xml生成和Java代码类似的Javascript代码,因此在DWR中通过引入回调函数来实现Ajax的异步调用特性-当结果被返回时，DWR会调用这个回调函数。（2）回调函数定义的要求通常我们都需要传递外部信息给一个回调函数，因此所有的回调函数都应该只有一个参数-参数就是从远程方法返回的值-实现将服务器端的组件的方法的返回值给回调函数。 function callbackFunc(dataFromServer) / do something with dataFromServer and dataFromBro

23、wser 2、DWR中的回调机制的某个示例index function showTime() JDate.toString(callBackFun);callBackFun = function(toStringReturnTimeString) alert(当前的时间是：+toStringReturnTimeString); 点击我可以获得当前的时间 3、与RMI 或者 SOAP等其它的实现机制的不同这种从远程的 Java 方法到 Javascript 的方式给 DWR 使用者一个感觉，好像传统的 RPC 方式，比如 RMI 或者 SOAP，事实上与之相比 DWR 的优势在于它不需要任何浏览器插件或者某种客户端的代理程序。上面的图片显示了 DWR 怎样改变下拉列表的内容来作为 Javascript 事件（比如 onclick ）的结果。此时，DWR