1. 添加支持jar包(dwr.jar)到编译路径.
2. 配置核心的servlet
3. 在WEB-INF/目录下添加dwr.xml核心配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<create javascript="UserService" creator="new">
<param name="class" value="com.accp.dwr.UserService"></param>
</create>
</allow>
</dwr>
4. 新建具体的使用页面.
(1)引入dwr提供的两个js文件.engine.js和util.js
这两个js文件是系统在运行过程中,DWRServlet自动写到客户端缓存中的,
在开发的时候我们是看不到这两个文件的。
(2)创建要调用的具体的JavaBean,并完成需要客户端采用ajax调用的方法.
(3)在dwr.xml中配置后台的java类与客户端的js类间的映射关系
(4)<!-- 导入我们配置的JS类的js文件 -->
<script type="text/javascript"
src="<%=basePath%>dwr/interface/UserService.js"></script>
后台的UserService.js是你在dwr中配置的js类的名字
(5)通过自己的js代码调用UserService. (你可以将其看作是服务器端UserService
这个java bean的副本,所以方法什么的完全一样)
5、(1)Java代码:
package com.pro.dwr;
public class UserService {
public boolean existsUserName(String name){
if("abc".equals(name)){
System.out.println("========UserService========");
return true;
}
return false;
}
}
(2)JSP示例代码:
<!-- 导入dwr的两个核心js -->
<script type="text/javascript" src="<%=basePath%>dwr/engine.js"></script>
<script type="text/javascript" src="<%=basePath%>dwr/util.js"></script>
<!-- 导入我们配置的JS类的js文件 -->
<script type="text/javascript" src="<%=basePath%>dwr/interface/UserService.js"></script>
<script type="text/javascript">
function chkName(uname){
if(uname.length==0){
alert("用户名必须输入!");
return ;
}
UserService.existsUserName(uname,function(exists){
if(exists){
//$("uinfo").innerHTML = "用户名已经被占用!";
dwr.util.setValue("uinfo","用户名已经被占用!");
}else{
$("uinfo").innerHTML = "";
}
});
}
</script>
<script type="text/javascript">
function init(){
dwr.util.addOptions("sel01",["A","B","C"]);
dwr.util.addOptions("sel02",[
{name:'a',id:'A'},
{name:'b',id:'B'}],"id","name");
}
function getv(selname){
alert(dwr.util.getValue(selname));
}
</script>
</head>
<body onload="init()">
This is my JSP page. <br>
<center>
<form action="" method="post">
<table width="80%" border="1">
<tr>
<td align="right">用户名:</td>
<td>
<input type="text" name="uname" id="uname" onblur="chkName(this.value)">
</td>
<td>
<div style="font-size:12px;color:red;" id="uinfo"></div>
</td>
</tr>
<tr>
<td align="right">密码:</td>
<td colspan="2">
<input type="password" name="upwd" id="upwd">
</td>
</tr>
</table>
</form>
<select id="sel01"></select><input type="button" value="01value" onclick="getv('sel01')" /><br />
<select id="sel02"></select><input type="button" value="02value" onclick="getv('sel02')" /><br />
</center>
</body>