dwr的基本运用-CSDN博客

Tips：纯三段式的ajax一直没怎么使用过，还是喜欢使用dwr

[b][size=large]一、在web.xml中配置dwr[/size][/b]
[quote]

<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class>[color=red]org.directwebremoting.servlet.DwrServlet[/color]</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>
[color=red] org.springframework.web.context.ContextLoaderListener[/color]
</listener-class>
</listener>

<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
/WEB-INF/applicationContext.xml
</param-value>
</context-param>[/quote]

[size=large][b]二、编写dwr.xml[/b][/size][quote]<?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="IUserinfo" creator="spring">
<param name="beanName" value="IUserinfo" />
<include method="checkUserName" />
<include method="checkPswd" />
<include method="checkLogin" />
</create>

<convert match="com.us.Dao.Userinfo" converter="bean"/>


<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>[/quote]

[b][size=large]三、测试是否成功[/size][/b]

[img]http://dl.iteye.com/upload/attachment/339580/44e8055a-39fd-37b2-8fd4-5910a6c5b8b3.jpg[/img]

PS:点击进去里面封装了所有的方法（如下图所示）

[img]http://dl.iteye.com/upload/attachment/339582/56faa246-ad33-3c35-9581-83b5c2ec0226.jpg[/img]

PS:输入参数，单击“Execute”按钮执行，可以查看执行结果.

[b][size=large]四、在页面中的使用[/size][/b]
[b]1、引入生成的js文件[/b]
[quote]<script type='text/javascript' src='/BlogOnline/dwr/interface/IArticle.js'></script>[/quote]

[b]2、实现数据的同步交互[/b]
<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>

[b]3、在页面加载中进行调用[/b]
<body background="" onLoad="selectPageData()">

[b]4、局部更新[/b]
[quote]<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;">
[color=red] <table width="100%" border="0" align="center">
<tbody id="tabBody"></tbody>
</table>[/color]
</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>[/quote]

PS：这里分页没有实现