DWR介绍
DWR是一个Java库,可以使服务器上的Java和浏览器中的JavaScript能够尽可能简单地进行交互和调用。DWR允许在服务器上运行的Java代码使用客户端API将更新发布到任意浏览器组。这允许交互2种方式 - 浏览器调用服务器和服务器调用浏览器。DWR支持Comet,Polling和Piggyback(以正常请求发送数据)作为发布到浏览器的方式。
构建DWR环境
第一步 添加Jar包
方法一:从官网直接下载dwr的jar包
第一个是jar包,第二个是一个demo实例
方法二:使用maven添加jar包
<dependency>
<groupId>org.directwebremoting</groupId>
<artifactId>dwr</artifactId>
<version>3.0.2-RELEASE</version>
</dependency>
第二步 将DWR servlet定义和映射添加到应用程序的web.xml中
<servlet>
<display-name>DWR Servlet</display-name>
<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>
第三步 创建DWR配置文件(dwr.xml)
在WEB-INF下面创建一个dwr.xml文件
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
"http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
<create creator="new" javascript="JDate">
<param name="class" value="java.util.Date"/>
</create>
</allow>
</dwr>
测试环境
启动服务器,在浏览器中输入http://localhost:8080/[项目名]/dwr
显示如上图,说明环境搭建成功
在页面使用js调用DWR
上面是一个环境的配置,我们这里使用DWR来验证用户注册时用户名的唯一性。
检验用户名的代码
public String checkUser(String username){
//这里是直接调用service,方法简单,这里就不帖代码了
User user = userService.findUserByUsername(username);
if (user==null){
return username+"用户名可以使用";
}else{
return username+"用户名已经存在";
}
}
修改刚才的dwr.xml文件
将下面的代码添加到dwr.xml的allow中
<!--
creator=new:创建时new对象
javascript="searchServlet":在js中使用searchServlet调用该类的
value="" : 类的全路径
-->
<create creator="new" javascript="searchServlet">
<param name="class" value="com.wqh.search.servlet.SearchServlet"/>
</create>
测试
与上面的测试方法相同
点击上面这个超链接
将上面两段js复制到jsp中
页面代码,建议不要直接复制,因为这里使用了bootstrap,直接复制可能会报错
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/bootstrap.min.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
<script type='text/javascript' src='/LuceneSearch/dwr/engine.js'></script>
<script type='text/javascript' src='/LuceneSearch/dwr/interface/searchServlet.js'></script>
<title>用户注册</title>
<style>
.mainCSS{
width: 700px;
height: 500px;
margin-top: 100px;
margin-left: 400px;
}
</style>
<script type="text/javascript">
function checkOnly(){
var username = $("#username").val();
//使用js调用Java类,username:需要验证的用户名,,,后面为回调函数,这里就不详细说明了
searchServlet.checkUser(username,function (msg) {
var resultMsg = " <span style='color:red;'>"+msg+"</span>"
$("#showmsg").append(resultMsg)
});
}
</script>
</head>
<body>
<div class="mainCSS">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">用户登录</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
<a href="javascript:checkOnly()"><span id="showmsg">校验唯一性</span></a>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密 码</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">email</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="submit" class="btn btn-default">注册</button>
<%--<a href="#" style="margin-left: 20px">注册账号</a>--%>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
运行
启动服务器运行
在我的数据库中已经含有admin,所以结果是成功的