基于AJAX技术的DWR框架DWR中的JS库及回调机制和应用示例.docx
《基于AJAX技术的DWR框架DWR中的JS库及回调机制和应用示例.docx》由会员分享，可在线阅读，更多相关《基于AJAX技术的DWR框架DWR中的JS库及回调机制和应用示例.docx（27页珍藏版）》请在冰豆网上搜索。
基于AJAX技术的DWR框架DWR中的JS库及回调机制和应用示例
目录
1.1DWR中的JavaScript库2
1.1.1----util.js函数库2
1.2DWR中的回调机制14
1.2.1DWR中的回调机制及相关的应用示例14
1.2.2JavaScriptObjectNotation（JSON）18
1.2.3DWR和其它的框架的对比23
1.2.4J2EE安全性和DWR25
1.1DWR中的JavaScript库
1.1.1----util.js函数库
1、DWR中的util.js函数库
（1）作用
util.js包含了一些工具函数来帮助我们用JavaScript数据（例如从服务器返回的数据）来操作我们的web页面中的各个元素。
2、addOptions方法的应用------DWRUtil.addOptions的各种调用方法（DWR3.0以后为dwr.util.addOptions）
（1）数组参数-----DWRUtil.addOptions（selectid,array）
应用示例：
vararrayFive=['One','Two','Three','Four','Five'];
functiontestAddOptionsBasic（）
{
DWRUtil.addOptions（'addOptionsBasic',arrayFive）;
if（DWRUtil.getValue（'addOptionsBasic'）=="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
应用示例：
vararrayObject=[
{name:
'One',value:
'1'},
{name:
'Two',value:
'2'},
{name:
'Three',value:
'3'},
{name:
'Four',value:
'4'},
{name:
'Five',value:
'5'}
];
functiontestAddOptionsObject1（）
{
DWRUtil.addOptions（'addOptionsObject1',arrayObject,"name"）;
if（DWRUtil.getValue（'addOptionsObject1'）=="1"）
success（）;
if（DWRUtil.getText（'addOptionsObject1'）=="One"）
success（）;
}
（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.removeAllOptions（"city"）;
DWRUtil.addOptions（'city',citylist,'id','name'）;
应用示例：
vararrayObject=[
{optionValue:
'One',optionText:
'1'},
{optionValue:
'Two',optionText:
'2'},
{optionValue:
'Three',optionText:
'3'},
{optionValue:
'Four',optionText:
'4'},
{optionValue:
'Five',optionText:
'5'}
];
functiontestAddOptionsObject2（）
{
DWRUtil.addOptions（'addOptionsObject2',arrayObject,"optionValue","optionText"）;
if（DWRUtil.getValue（'addOptionsObject2'）=="One"）
success（）;
if（DWRUtil.getText（'addOptionsObject2'）=="1"）
success（）;
}
（4）Map对象
DWRUtil.addOptions（selectid,map,reverse）用每个属性创建一个option。
对象属性名用来作为option的值，对象属性值用来作为属性的文字。
应用示例：
varmap={one:
1,two:
2,three:
3,four:
4,five:
5};
functiontestAddOptionsMap1（）
{
DWRUtil.addOptions（'addOptionsMap1',map）;
if（DWRUtil.getValue（'addOptionsMap1'）=="one"）
success（）;
if（DWRUtil.getText（'addOptionsMap1'）=="1"）
success（）;
}
另一个例-----如果reverse参数被设置为true，那么对象属性值用来作为选项的值。
varmap={one:
1,two:
2,three:
3,four:
4,five:
5};
functiontestAddOptionsMap2（）
{
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列表。
应用示例：
vararrayFive=['One','Two','Three','Four','Five'];
functiontestAddItemsBasic（）
{
DWRUtil.addOptions（'addItemsBasic',arrayFive）;
}
（6）addOptions的其它方面的应用示例
DWR的一个常遇到的任务就是根据选项填充选择列表。
如果我们希望在我们更新了select以后，它仍然保持原来的选择，我们可以采用下面的实现方法：
varsel=DWRUtil.getValue（id）;
DWRUtil.removeAllOptions（id）;
DWRUtil.addOptions（id,...）;
DWRUtil.setValue（id,sel）;
另外，如果我们想加入一个初始的"Pleaseselect..."选项，那么我们可以直接加入下面的语句：
DWRUtil.addOptions（id,\["Pleaseselect..."]）;
然后再在下面紧接着加入我们真正的其它的各个选项数据。
（7）所应该注意的问题
●注意我们每次使用addOptions之前,需要先使用removeAllOptions来将下拉列表或者列表清空，否则下拉列表中的内容会一直累加。
应用示例：
functiontestRemoveOptions（）
{
DWRUtil.removeAllOptions（'removeOptions'）;
DWRUtil.addOptions（"removeOptions",arrayFive）;
}
One
Two
Three
Four
Five
应用示例：
functiontestRemoveItems（）
{
DWRUtil.removeAllOptions（'removeItems'）;
}
OneTwoThreeFourFive●另外需要注意的是javascript中的字符串最好用单引号而不要用双引号，否则可能又有一些莫名其妙的问题------还有就是引号要成对出现，不要一个单的一个双的。
●这个函数所有的参数都是字符串。
3、对表格操作的各个方法-------addRows（）和removeAllRows（）
（1）主要的功能
DWR通过这两个函数来帮助我们动态操作table------DWRUtil.addRows（）和DWRUtil.removeAllRows（）。
（2）方法的参数说明
这两个函数的第一个参数都是table、tbody、thead、tfoot的id。
一般来说最好使用tbody，因为这样可以保持我们的header和footer行不变，并且可以防止InternetExplorer的bug。
（3）DWRUtil.removeAllRows（）方法的应用
●用法：
DWRUtil.removeAllRows（id）;
●描述：
通过id删除table中所有行。
●参数：
id-------table元素的id（最好是tbody元素的id）
（4）DWRUtil.addRows（）方法的应用
●用法：
DWRUtil.addRows（id,array,cellfuncs,[options]）;
●描述：
向指定id的table元素添加行。
它使用数组中的每一个元素在table中创建一行。
id：
table元素的id（最好是tbody元素的id）
array：
数组（DWR1.1以后可以是对象），做为更新表格数据。
Cellfuncs：
函数数组-----DWR根据该函数数组实现从传递过来的行数据中提取单元格数据。
Options：
一个包含选项的对象（见下面），选项包括：
rowCreator：
一个用来创建行的函数（例如，你希望个tr加个css）.默认是返回一个document.createElement（"tr"）
cellCreator：
一个用来创建单元格的函数（例如，用th代替td）.默认返回一个document.createElement（"td"）
注意：
每次在调用DWRUtil.addRows（）方法时间，应该首先调用DWRUtil.removeAllRows（）方法，否则将产生累加的效果。
应用示例1：
vararrayFive=['One','Two','Three','Four','Five'];//数组中的元素的个数为表格中的行数
functiontestAddRowsBasic（）
{
DWRUtil.addRows（'addRowsBasic',
arrayFive,
[//函数数组中的元素的个数为表格中的列数
function（arrayFiveElement）//它控制表格中的第一列中的数据显示方式
{
returnarrayFiveElement;
},
function（arrayFiveElement）//它控制表格中的第二列
{
returnarrayFiveElement.toUpperCase（）;//加工或者处理
},
function（arrayFiveElement）//它控制表格中的第三列
{
vartag="";
returntag;
varinputTagObj=document.createElement（"input"）;//
inputTagObj.setAttribute（"type","button"）;//
inputTagObj.setAttribute（"value","DOMTest"）;
inputTagObj.setAttribute（"onclick","alert（'"+arrayFiveElement+"'）;"）;
returninputTagObj;
},
function（arrayFiveElement）//它控制表格中的第四列
{
varinputTagObj=document.createElement（"input"）;
inputTagObj.setAttribute（"type","button"）;
inputTagObj.setAttribute（"value","innerHTMLTest"）;
inputTagObj.setAttribute（"onclick","alert（'"+arrayFiveElement+"'）;"）;
returninputTagObj;
}
]
）;
}
| Unaltered | Altered | DOMButton | InnerHTMLButton |
|---|
注意：
在应用中发现，如果采用document.createElement（"input"）;方式时，其onclick事件不起作用；而改用产生HTML字符串的方式时，则onclick事件有效果-----不知道是什么原因？
。
应用示例2：
如果返回的数据中只有一条信息
functionshowOneUserInfoByIDCallBackFun（returnOneUserInfoVO）
{
varOneUserInfoArray=[returnOneUserInfoVO];
DWRUtil.addRows（'userInfoItems',OneUserInfoArray,
[
function（returnOneUserInfoVO）//该函数决定表格中的第一列
{
returnreturnOneUserInfoVO.userName;
},
function（returnOneUserInfoVO）//该函数决定表格中的第二列
{
returnreturnOneUserInfoVO.userDepartment;
},
function（returnOneUserInfoVO）//该函数决定表格中的第三列
{
returnreturnOneUserInfoVO.userAdminLevel;
},
function（returnOneUserInfoVO）//该函数决定表格中的第四列
{
returnreturnOneUserInfoVO.departAdminLevel;
},
function（returnOneUserInfoVO）//该函数决定表格中的第五列
{
varimageHtmlTag=document.createElement（"img"）;
imageHtmlTag.setAttribute（"src",returnOneUserInfoVO.userImage）;
imageHtmlTag.setAttribute（"width","28"）;
imageHtmlTag.setAttribute（"height","54"）;
returnimageHtmlTag;
},
function（returnOneUserInfoVO）//该函数决定表格中的第六列
{
returnreturnOneUserInfoVO.registerTime;
}
]）;
}
注意：
页面中的表格定义
1.2DWR中的回调机制
1.2.1DWR中的回调机制及相关的应用示例
1、DWR中的回调机制
（1）在DWR中是如何实现AJAX技术中的“异步”功能
由于DWR是根据dwr.xml生成和Java代码类似的Javascript代码,因此在DWR中通过引入回调函数来实现Ajax的异步调用特性----当结果被返回时，DWR会调用这个回调函数。
（2）回调函数定义的要求
通常我们都需要传递外部信息给一个回调函数，因此所有的回调函数都应该只有一个参数-----参数就是从远程方法返回的值----实现将服务器端的组件的方法的返回值给回调函数。
functioncallbackFunc（dataFromServer）
{
//dosomethingwithdataFromServeranddataFromBrowser…
}
2、DWR中的回调机制的某个示例
<%@pagecontentType="text/html;charset=GBK"%>
index
functionshowTime（）
{
JDate.toString（callBackFun）;
}
callBackFun=function（toStringReturnTimeString）
{
alert（"当前的时间是：
"+toStringReturnTimeString）;
}
showTime（）">点击我可以获得当前的时间