使用DWR简单使用AJAX

最新推荐文章于 2021-08-06 11:16:54 发布

原创最新推荐文章于 2021-08-06 11:16:54 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DWR #Ajax #Spring #Bean #配置管理

UI 专栏收录该内容

122 篇文章

订阅专栏

本文介绍如何通过DWR框架实现AJAX功能，包括配置DWR所需的servlet及filter，设置dwr.xml文件，以及在页面上使用相关JS文件进行调用。

使用DWR简单使用AJAX

AJAX很火，不过我只会比较简单的框架。
配置DWR的时候，先拷贝如下servlet到web.xml配置文件中：

<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>

<init-param>
<param-name>config</param-name>
<param-value>WEB-INF/dwr.xml</param-value>
</init-param>

<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>scriptCompressed</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
添加FITLER：

<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
配置dwr.xml文件，可以直接使用spring管理的bean:
<?xml version="1.0" encoding="GB2312"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"

"http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
<allow>

<convert match="com.sillycat.core.model.User" converter="bean" />

<create creator="spring" javascript="UserManager">

<param name="beanName" value="userManager" />

<include method="getAllUser" />
<include method="getUser" />
<include method="saveUser" />
<include method="removeUser" />
</create>
</allow>
</dwr>
页面在使用时，导入三个JS文件：
<script type='text/javascript'
src='<%=request.getContextPath()%>/dwr/interface/UserManager.js'></script>
<script type='text/javascript'
src='<%=request.getContextPath()%>/dwr/engine.js'></script>
<script type='text/javascript'
src='<%=request.getContextPath()%>/dwr/util.js'></script>
页面上的JS：

function checkUserExist(){
if($("logonName").value == null || $("logonName").value == ""){
loginNameMessage.innerHTML="请输入登陆名！";
return false;
}
DWRUtil.useLoadingMessage("checking .....");
UserManager.isTUserExistByLogonName(userCheckResult,$("logonName").value);
}

function userCheckResult(data){
if(data == true){
//alert("adsfasdfasdf");
document.getElementById("userExistFlag").value = 1;
loginNameMessage.innerHTML="用户名已经被使用！";
}else{
alert("adsfasdf");
loginNameMessage.innerHTML="";
document.getElementById("userExistFlag").value = "0";
}
}
调用AJAX的JS是：
UserManager.isTUserExistByLogonName(userCheckResult,$("logonName").value);
UserManager就是JS的名字，第一个参数是回调函数，后一个参数是调用的方法的参数