虽然老师在一个月前就已经讲完dwr,不过因为一直在摸索ssh框架整合所以没有仔细研究过
昨天在做项目的时候应用到了ajax,所以简单看了几眼dwr发现虽然东西不多,不过还是很实用的。我想做的是一个ajax验证用户名是否存在,就是一个注册页面中输入你要注册的帐号,不通过提交表单而是在当前页就能知道你输入的帐号是否是被别人注册过的,如果注册过就要从输入一个新的帐号,直到该帐号没有被人注册过才允许用户提交。
首先下载一个dwr包放在新建web工程 的lib下,就是和web.xml文件一个目录下。然后修改web。xml文件
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class> org.directwebremoting.servlet.DwrServlet </servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
主要目的就是系统加载时找到该servelt,如果在部署系统时建议不要加debug这个,安全性第一。
然后新建dwr。xml文件(和web。xml放在一起)中配置你即将要运行的servelt方法
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting
2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="service">
<param name="class" value="helloWord.Service" />
</create>
</allow>
</dwr>
creator中用new创建对象,好处是dwr创建的对象生命期短,内存消耗低。在javascript的方法中千万不要起关键字,随便一个名字就好了。
当这两个文件都配置好后就可以写方法了,在工程中新建一个类里面是一个布尔型的方法
public boolean isExit(String name) {
if ("abc".equals(name))
return false;
return true;
}
这里我用的是硬编码方法,因为没有连接数据库,不过我往后几天就会学习到spring框架用代理处理dwr中要用到的方法,现在主要就是试验dwr是否好使。当把方法写完之后就可以测试一下该方法是否好使,发布工程在tomcat下,然后在地址栏输入http://localhost:8080/你的工程/dwr如果进去了就说明dwr没有问题,然后点击service,会看到刚才写的isExit()的方法,输入abc然后点击“Execute”,如果发现为false说明该用户已经存在,否则就是true
确实是正确的返回结果,说明测试通过了。
这时可以添加一个jsp页面在<head>标签中导包
<script type='text/javascript' src='/dwr/dwr/interface/service.js'></script>
<script type='text/javascript' src='/dwr/dwr/engine.js'></script> <script type='text/javascript' src='/dwr/dwr/util.js'></script>
这三个包是在测试页面中最上面显示出来的,我只是拷贝了一下。然后在<body>中建立一个表单,里面有一个文本框和一个提交按钮,还要有一个层是用来显示是否存在的
<form action="" οnsubmit="return firstDwr()">
<input type="submit" >
<input type="text" value="" id="a" οnblur="didtDwr()">
<span id="date"></span>
</form>
这里主要有两个js方法,οnsubmit="return firstDwr()"是用来判断如果存在用户名就返回false,不让提交。 οnblur="didtDwr()"用来判断文本框失去焦点的时候触发事件进行帐号查询。下面是在js里所用到的方法
<script type="text/javascript">
<%-- 设置一个变量,如果帐号存在就为2,不存在就为1--%>
var is=2;
<%-- 这是提交方法,is为2的时候返回false,说明该帐号已经存在,不能提交,为true的时候就可以提交--%>
function firstDwr()
{
var p=document.getElementById("date").innerHTML;
if(is==2)
{
return false;
}
else
{
return true;
}
}
<%-- 当文本框焦点失去的时候就触发该方法,service是在dwr.xml下所起的javascript名字, document.getElementById("a")是获取到该文本框值,后面的callBackHello是一个回调函数它的作用就是把这个方法返回的值即时应用到当前jsp页面上,详细方法在下面--%>
function didtDwr()
{
service.isExit(document.getElementById("a").value,callBackHello);
}
<%-- 回调函数,这个data参数其实就是上面方法所返回的一个布尔值--%>
<%-- 如果为true的时候is赋值为1参数就证明该帐号不存在,就会在date层中显示绿色的文字,不存在。 否则就是红色的存在两个字,并且is赋值为2。即时显示要用层.innerHTML这个方法--%>
function callBackHello(data)
{
alert(data);
if(data==true){
is=1;
document.getElementById("date").innerHTML="<font color='green'>不存在</font>";
}
else{
is=2;
document.getElementById("date").innerHTML="<font color='red'>存在</font>";
}
}
</script>
这样一个简单的使用dwr运行的ajax效果就出来了。难点其实主要在于前台里的javascript脚本方法,其余别的没什么了。写完以后才发现ssh里我用不上.....。那个spring代理是无论如何也不会找到我写的方法的,郁闷ing....看来还需要仔细研究一下在spring下如何实现dwr,今天就写到这里,希望看见这篇文章的朋友能够一起探讨如何更好的实现ajax。