dwr的基本运用
Tips：纯三段式的ajax一直没怎么使用过，还是喜欢使用dwr
一、在web.xml中配置dwr
<!-- 添加dwr配置 -->
<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class> org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>classes</param-name>
<param-value>java.lang.Object</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<!-- 上下文监听器:是否初始化 -->
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<!-- 认识上下文环境 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
/WEB-INF/applicationContext.xml
</param-value>
</context-param>
二、编写dwr.xml
三、测试是否成功
PS:点击进去里面封装了所有的方法（如下图所示）
PS:输入参数，单击“Execute”按钮执行，可以查看执行结果.
四、在页面中的使用
1、引入生成的js文件
2、实现数据的同步交互
<script language="javascript">
//显示分页加载的数据
function selectPageData()
{
var pageId = 1;
IArticle.getPageData(pageId,4,backList);
}
function backList(list)
{
clear();
alert(list.size());
for(var i=0;i<list.size();i++)
{
var row = document.createElement("tr");
var cloTitle = document.createElement("td");
cloTitle.innerText = list[i].title;
row.appendChild(cloTitle);
tabBody.appendChild(row);
}
}
//清空表格数据
function clear()
{
if(tabBody.childNodes.length>0)
tabBody.removeChild(tabBody.firstChild);
}
</script>
3、在页面加载中进行调用
<body background="" onLoad="selectPageData()">
4、局部更新
PS：这里分页没有实现
一、在web.xml中配置dwr
引用
<!-- 添加dwr配置 -->
<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class> org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>classes</param-name>
<param-value>java.lang.Object</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<!-- 上下文监听器:是否初始化 -->
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<!-- 认识上下文环境 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
/WEB-INF/applicationContext.xml
</param-value>
</context-param>
二、编写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>
<!-- dwr.xml中在dwr下面 只能带一个allow对象，所有的对象函数声明均放在这个对象下面 -->
<allow>
<!-- 创建一个IUserinfo.js文件-->
<create javascript="IUserinfo" creator="spring">
<param name="beanName" value="IUserinfo" />
<include method="checkUserName" />
<include method="checkPswd" />
<include method="checkLogin" />
</create>
<!-- 方法返回集合,集合的数据从Object转成Userinfo类 -->
<convert match="com.us.Dao.Userinfo" converter="bean"/>
<!-- 创建一个IArticle.js-->
<create javascript="IArticle" creator="spring">
<param name="beanName" value="IArticle" />
<include method="getPageData" />
<include method="getTotalPage" />
</create>
<convert match="com.us.Dao.Article" converter="bean"/>
</allow>
</dwr>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
<!-- dwr.xml中在dwr下面 只能带一个allow对象，所有的对象函数声明均放在这个对象下面 -->
<allow>
<!-- 创建一个IUserinfo.js文件-->
<create javascript="IUserinfo" creator="spring">
<param name="beanName" value="IUserinfo" />
<include method="checkUserName" />
<include method="checkPswd" />
<include method="checkLogin" />
</create>
<!-- 方法返回集合,集合的数据从Object转成Userinfo类 -->
<convert match="com.us.Dao.Userinfo" converter="bean"/>
<!-- 创建一个IArticle.js-->
<create javascript="IArticle" creator="spring">
<param name="beanName" value="IArticle" />
<include method="getPageData" />
<include method="getTotalPage" />
</create>
<convert match="com.us.Dao.Article" converter="bean"/>
</allow>
</dwr>
三、测试是否成功
PS:点击进去里面封装了所有的方法（如下图所示）
PS:输入参数，单击“Execute”按钮执行，可以查看执行结果.
四、在页面中的使用
1、引入生成的js文件
引用
<script type='text/javascript' src='/BlogOnline/dwr/interface/IArticle.js'></script>
2、实现数据的同步交互
<script language="javascript">
//显示分页加载的数据
function selectPageData()
{
var pageId = 1;
IArticle.getPageData(pageId,4,backList);
}
function backList(list)
{
clear();
alert(list.size());
for(var i=0;i<list.size();i++)
{
var row = document.createElement("tr");
var cloTitle = document.createElement("td");
cloTitle.innerText = list[i].title;
row.appendChild(cloTitle);
tabBody.appendChild(row);
}
}
//清空表格数据
function clear()
{
if(tabBody.childNodes.length>0)
tabBody.removeChild(tabBody.firstChild);
}
</script>
3、在页面加载中进行调用
<body background="" onLoad="selectPageData()">
4、局部更新
引用
<table width="100%" border="0" align="right" bgcolor="#FFFFFF" >
<tr>
<td height="26" align="left" background="images/titleBg.jpg" valign="middle">博文 [管理]</td>
</tr>
<tr>
<td height="443">
<div id="showArticlesDiv" style="position:absolute; left: 263px; top: 53px; width: 416px; height: 423px;">
<table width="100%" border="0" align="center">
<tbody id="tabBody"></tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<form name="form2" method="post" action="">
<table width="90%" border="0" align="center">
<tr>
<td align="center">共<span id="totalPage"></span> 页 第<span id="pageId"></span>页 首页 上一页 下一页 尾页 跳至
<input type="text" name="goto" size="3">
页 <img src="images/pagego.gif"/></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<tr>
<td height="26" align="left" background="images/titleBg.jpg" valign="middle">博文 [管理]</td>
</tr>
<tr>
<td height="443">
<div id="showArticlesDiv" style="position:absolute; left: 263px; top: 53px; width: 416px; height: 423px;">
<table width="100%" border="0" align="center">
<tbody id="tabBody"></tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<form name="form2" method="post" action="">
<table width="90%" border="0" align="center">
<tr>
<td align="center">共<span id="totalPage"></span> 页 第<span id="pageId"></span>页 首页 上一页 下一页 尾页 跳至
<input type="text" name="goto" size="3">
页 <img src="images/pagego.gif"/></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
PS：这里分页没有实现