基于AJAX技术的DWR框架DWR中的JS库及回调机制和应用示例文档格式.docx
《基于AJAX技术的DWR框架DWR中的JS库及回调机制和应用示例文档格式.docx》由会员分享，可在线阅读，更多相关《基于AJAX技术的DWR框架DWR中的JS库及回调机制和应用示例文档格式.docx（27页珍藏版）》请在冰豆网上搜索。
if（DWRUtil.getValue（'
）=="
One"
）
success（）;
if（DWRUtil.getText（'
}
/script>
<
selectid="
addOptionsBasic"
/select>
注意：
此形式的函数产生的列表框中的key和value相同。
最后产生出如下的<
select>
标签：
selectid="
name="
optionvalue="
selected>
One<
/option>
Two"
Two<
Three"
Three<
Four"
Four<
Five"
Five<
（2）对象数组（指定text）
DWRUtil.addOptions（selectid,data,prop）用每个数组元素创造一个option，option的值由数组中的value决定，而显示的内容则由数组中的name决定。
selectname="
mySelect"
1"
one<
2"
two<
3"
three<
vararrayObject=[
{name:
'
value:
1'
},
2'
3'
4'
5'
}
];
functiontestAddOptionsObject1（）
addOptionsObject1'
arrayObject,"
name"
）;
if（DWRUtil.getText（'
addOptionsObject1"
（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"
city'
citylist,'
id'
name'
{optionValue:
optionText:
functiontestAddOptionsObject2（）
addOptionsObject2'
optionValue"
"
optionText"
if（DWRUtil.getValue（'
addOptionsObject2"
（4）Map对象
DWRUtil.addOptions（selectid,map,reverse）用每个属性创建一个option。
对象属性名用来作为option的值，对象属性值用来作为属性的文字。
varmap={one:
1,two:
2,three:
3,four:
4,five:
5};
functiontestAddOptionsMap1（）
addOptionsMap1'
map）;
one"
addOptionsMap1"
另一个例-----如果reverse参数被设置为true，那么对象属性值用来作为选项的值。
functiontestAddOptionsMap2（）
addOptionsMap2'
map,true）;
addOptionsMap2"
（5）ol或ul列表
DWRUtil.addOptions（ulid,array）用数组中的元素创建一堆li元素，他们的innerHTML是数组元素中的值。
这种模式可以用来创建ul和ol列表。
functiontestAddItemsBasic（）
addItemsBasic'
ulid="
addItemsBasic"
/ul>
（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"
v1"
v2"
v3"
v4"
v5"
functiontestRemoveItems（）
removeItems'
removeItems"
<
li>
/li>
●另外需要注意的是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：
//数组中的元素的个数为表格中的行数
functiontestAddRowsBasic（）
DWRUtil.addRows（'
addRowsBasic'
arrayFive,
[//函数数组中的元素的个数为表格中的列数
function（arrayFiveElement）//它控制表格中的第一列中的数据显示方式
returnarrayFiveElement;
},
function（arrayFiveElement）//它控制表格中的第二列
returnarrayFiveElement.toUpperCase（）;
//加工或者处理
},
function（arrayFiveElement）//它控制表格中的第三列
vartag="
inputtype='
button'
value='
DOMTest'
onclick=alert（'
"
+arrayFiveElement+"
;
returntag;
varinputTagObj=document.createElement（"
input"
//<
input>
inputTagObj.setAttribute（"
type"
button"
inputtype=”button”>
value"
DOMTest"
onclick"
alert（'
returninputTagObj;
function（arrayFiveElement）//它控制表格中的第四列
{
varinputTagObj=document.createElement（"
innerHTMLTest"
]
tableborder="
thead>
tr>
th>
Unaltered<
/th>
Altered<
DOMButton<
InnerHTMLButton<
/tr>
/thead>
tbodyid="
addRowsBasic"
/tbody>
/table>
在应用中发现，如果采用document.createElement（"
方式时，其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"
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"
%>
html>
head>
title>
index<
/title>
scripttype='
text/javascript'
src='
/DWRWebTest/dwr/interface/JDate.js'
/DWRWebTest/dwr/engine.js'
/DWRWebTest/dwr/util.js'
scriptlanguage="
javascript"
functionshowTime（）
JDate.toString（callBackFun）;
callBackFun=function（toStringReturnTimeString）
alert（"
当前的时间是：
+toStringReturnTimeString）;
/head>
bodybgcolor="
#ffffff"
ahref="
#"
onclick="
javascript:
showTime（）"
点击我可以获得当前的时间
/a>
/body>
/html>
3、与RMI或者SOAP等其它的实现机制的不同
这种从远程的Java方法到Javascript的方式给DWR使用者一个感觉，好像传统的RPC方式，比如RMI或者SOAP，事实上与之相比DWR的优势在于它不需要任何浏览器插件或者某种客户端的代理程序。
上面的图片显示了DWR怎样改变下拉列表的内容来作为Javascript事件（比如onclick）的结果。
此时，DWR
升级会员 