Ajax牛刀小试
使用了DWR框架，将数据库中城市列出在页面上
step1)web.xml中的配置
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.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>
step2)dwr.xml
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="spring" javascript="SignupService">
<param name="beanName" value="signupService" />
<param name="location" value="applicationContext-baby-beans.xml" />
<include method="loadGateway" />
</create>
<convert converter="bean" match="com.mofile.baby.domain.Area"/>
</allow>
</dwr>
step3)测试页面
<html>
<head>
<script type='text/javascript' src='/dwr/interface/SignupService.js'></script>
<script type='text/javascript' src='/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr/util.js'></script>
<script type='text/javascript'>
function showList() {
SignupService.loadGateway (loadList);
document.getElementById("xx").innerHTML ="loading....";
}
function loadList(data) {
var list = data.arealist;
var temparea;
var listarea="";
for(var i=0;i<list.length;i++){
temparea = list[i];
listarea = listarea + (i+1) +":" + temparea.name + "<br>";
}
document.getElementById("xx").innerHTML = listarea ;
}
</script>
</head>
<body>
<INPUT type="button" value="ajax" onclick="showList();">
<div id="xx">
</div>
</body>
</html>
总结如下：
dwr.xml非常值得关注，在dwr中你需要配置你的service,这样可以通过js远程调用service,另外如果你返回的数据包含一些非典型的 java数据结构，比如list,map之类的话，你必须在dwr.xml中配置，一个典型的情况是你返回领域对象。如果你不配置，异步返回的数据会出现空 数据，因为dwr框架不知如何转化。
说白了，dwr框架调用远程service(在dwr中配置),然后根据将service返回的java对象转化为js对象，如何转换就需要你配置dwr.xml来告诉框架。
dwr的使用很简单，确实简化了ajax的开发。而且其文档也很详细。
参考文档： dwr官方网站
step1)web.xml中的配置
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.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>
step2)dwr.xml
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="spring" javascript="SignupService">
<param name="beanName" value="signupService" />
<param name="location" value="applicationContext-baby-beans.xml" />
<include method="loadGateway" />
</create>
<convert converter="bean" match="com.mofile.baby.domain.Area"/>
</allow>
</dwr>
step3)测试页面
<html>
<head>
<script type='text/javascript' src='/dwr/interface/SignupService.js'></script>
<script type='text/javascript' src='/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr/util.js'></script>
<script type='text/javascript'>
function showList() {
SignupService.loadGateway (loadList);
document.getElementById("xx").innerHTML ="loading....";
}
function loadList(data) {
var list = data.arealist;
var temparea;
var listarea="";
for(var i=0;i<list.length;i++){
temparea = list[i];
listarea = listarea + (i+1) +":" + temparea.name + "<br>";
}
document.getElementById("xx").innerHTML = listarea ;
}
</script>
</head>
<body>
<INPUT type="button" value="ajax" onclick="showList();">
<div id="xx">
</div>
</body>
</html>
总结如下：
dwr.xml非常值得关注，在dwr中你需要配置你的service,这样可以通过js远程调用service,另外如果你返回的数据包含一些非典型的 java数据结构，比如list,map之类的话，你必须在dwr.xml中配置，一个典型的情况是你返回领域对象。如果你不配置，异步返回的数据会出现空 数据，因为dwr框架不知如何转化。
说白了，dwr框架调用远程service(在dwr中配置),然后根据将service返回的java对象转化为js对象，如何转换就需要你配置dwr.xml来告诉框架。
dwr的使用很简单，确实简化了ajax的开发。而且其文档也很详细。
参考文档： dwr官方网站