http://www.iteye.com/topic/652199
第一次来JAVA Eye发文章,以前主要在百度、优快云发,最近经常来这里看文章就顺便注册了一个。这两天一直在公司搞DWR AJAX框架,也是刚学,了解的不是太深。今天星期6闲来无事,就来写写。唉,说了一大堆废话,好了下面进入正题。
DWR框架功能确实挺强大的,感觉使用起来也挺方便的,主要是配置容易出问题,大多数JAVA里面的框架都配置一大堆,这方面感觉太繁琐。现在写下DWR的简单使用以及如何在JSP页面接收返回List类型的数据。要想使用DWR框架得有以下几个步骤:
一准备
1、下载JAR包
我使用的DWR2.0,所以下载相应的JAR包就行了,一般放到WEB-INF的Lib包下就行了。(当初做的时候,启动TOMCAT时候,出现了错误,说的是缺少日志JAR包,后来就加了commons-logging-1.1.1.jar就没事了,网上看别人用的时候没出现此问题。)
2、接下来就是配置了
首先是配置 web.xml.在web.xml加上
- <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>
<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>
这样配置就行了,具体意思,我想你看下就应该明白了。
3 建个dwr.xml配置文件,和web.xml放在一个文件夹下就行了。我用MyEclipse8做的,可以直接新建个XML文件。
这里面主要配置一些有关后台JAVA类的,配置好后,DWR框架就会帮助你生成一些JS文件。详细说明下边再说。
二编码
1、 基本的准备好后就可以开始写JAVA代码了。
class:Book
- package com.liang;
- public class Book {
- private String id;
- private String name;
- private String pass;
- public String getId() {
- return id;
- }
- public void setId(String id) {
- this.id = id;
- }
- public String getName() {
- return name;
- }
- public void setName(String name) {
- this.name = name;
- }
- public String getPass() {
- return pass;
- }
- public void setPass(String pass) {
- this.pass = pass;
- }
- }
package com.liang;
public class Book {
private String id;
private String name;
private String pass;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPass() {
return pass;
}
public void setPass(String pass) {
this.pass = pass;
}
}
class: BookList
- package com.liang;
- import java.util.ArrayList;
- import java.util.List;
- import java.util.ResourceBundle;
- public class BookList {
- public List <SPAN style="COLOR: #ff0000">getList</SPAN>( ){
- List list=new ArrayList();
- Book book=null;
- for(int i=1;i<3;i++){
- book=new Book();
- book.setId("id"+i);
- book.setName("name"+i);
- book.setPass("pass"+i);
- list.add(book);
- }
- System.out.print(list);
- return list;
- }
- }
package com.liang;
import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;
public class BookList {
public List getList( ){
List list=new ArrayList();
Book book=null;
for(int i=1;i<3;i++){
book=new Book();
book.setId("id"+i);
book.setName("name"+i);
book.setPass("pass"+i);
list.add(book);
}
System.out.print(list);
return list;
}
}
这是我当初写的测试代码,一个Book类,一个BookList.我写的这个测试主要用来返回一个List然后用DWR框架在JSP页面循环得到这些数据。BookList里面有个返回List类型的的getList()方法,用来返回后台数据,
实际做开发的时候数据一般都从数据库查出来,自己做下相应的更改就行了。
这两个JAVA类写完后,后台代码基本就OK了,现在最重要的是进行配置了,如何让DWR能够找到这些JAVA类,并执行相应的工作呢。先看看我的dwr.xml配置:
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting
- 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd" >
- <dwr>
- <allow>
- <!--
- 下面这部分配置好后,启动tomcat后会生成一个JS文件,在这里可以自定义JS文件名,
- 我这样写的: javascript="BookList" 习惯用类名来定义,页面调用JS时候就用这个名字.
- value="com.liang.BookList" 这个用来定义你的类所在位置(有包了加包名,不然找不到)。
- -->
- <create javascript="BookList" creator="new" scope="application">
- <param name="class" value="com.liang.BookList"></param>
- </create>
- <!--
- match="com.liang.Book" 这个用来定义实体类的位置(有包了加包名,第一次做的时候忘记加了,
- 害了我半天时间得不到值),因为我返回List方法中,
- 里面封转的是Book类型,Book又有自己的属性ID,name等,
- JSP页面获得时候就得根据他里面的属性得到值。
- value="id,name,pass"这里面主要定义你在JSP页面获得那个属性值时要用到的,
- -->
- <convert match="com.liang.Book" converter="bean">
- <param name="include" value="id,name,pass"/>
- </convert>
- <!--
- 下面这个配置主要为了显示异常信息,如果不配置的话,程序中所有的错误,
- 都只弹出error的对话框,这样我们就看不到详细的错误信息,加大了调试难度,
- 相对配置的话,就会把Error转换成具体的错误描述来看,就如同你在日志看到异常信息一样。
- -->
- <convert converter="bean" match="java.lang.StackTraceElement" />
- <convert converter="exception" match="java.lang.Exception"/>
- </allow>
- </dwr>
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd" > <dwr> <allow> <!-- 下面这部分配置好后,启动tomcat后会生成一个JS文件,在这里可以自定义JS文件名, 我这样写的: javascript="BookList" 习惯用类名来定义,页面调用JS时候就用这个名字. value="com.liang.BookList" 这个用来定义你的类所在位置(有包了加包名,不然找不到)。 --> <create javascript="BookList" creator="new" scope="application"> <param name="class" value="com.liang.BookList"></param> </create> <!-- match="com.liang.Book" 这个用来定义实体类的位置(有包了加包名,第一次做的时候忘记加了, 害了我半天时间得不到值),因为我返回List方法中, 里面封转的是Book类型,Book又有自己的属性ID,name等, JSP页面获得时候就得根据他里面的属性得到值。 value="id,name,pass"这里面主要定义你在JSP页面获得那个属性值时要用到的, --> <convert match="com.liang.Book" converter="bean"> <param name="include" value="id,name,pass"/> </convert> <!-- 下面这个配置主要为了显示异常信息,如果不配置的话,程序中所有的错误, 都只弹出error的对话框,这样我们就看不到详细的错误信息,加大了调试难度, 相对配置的话,就会把Error转换成具体的错误描述来看,就如同你在日志看到异常信息一样。 --> <convert converter="bean" match="java.lang.StackTraceElement" /> <convert converter="exception" match="java.lang.Exception"/> </allow> </dwr>
- <script type='text/javascript' src='dwr/interface/BookList.js'></script>
- <script type='text/javascript' src='dwr/engine.js'></script>
- <script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='dwr/interface/BookList.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <html>
- <head>
- <title>My JSP 'index.jsp' starting page</title>
- <script type='text/javascript' src='dwr/interface/BookList.js'></script>
- <script type='text/javascript' src='dwr/engine.js'></script>
- <script type='text/javascript' src='dwr/util.js'></script>
- <script type="text/javascript">
- window.οnlοad=function (){//页面加载时候调用
- BookList.getList(callBackMethod);//BookList是BookList.js这个名字,
- //getList当然是你自己写的方法名,参数是回调下面的函数,
- //这个参数是必须有的, 如果方法里面需要传参数的话,可以在里面加参数
- //比如我根据name查询然后返回List可以写成这种, BookList.getList(name,callBackMethod);
- }
- function callBackMethod(dataList){//dataList可以自定义,是返回的数组名
- alert(dataList.length);//显示返回数组值的长度
- for(var d in dataList){//循环弹出相关的值,当时我做测试时候写的。
- alert("name:"+dataList[d].name);
- alert("pass:"+dataList[d].pass);
- }
- DWRUtil.removeAllRows("table4");//删除table4里面的所有行。DWR里面util.js中的方法。
- DWRUtil.addRows("table4",
- //循环显示数据并自动增加tr,也是DWR里面util.js中的方法。详细使用说明可以去网上找找
- dataList,[function(item){return item.id},
- function(item){
- return "<a target='_blank' href='index.jsp?id="+item.id+"'>"+item.name+"</a>";//显示一个超连接
- },function(item){return item.pass}],{escapeHtml:false} );
- }
- </script>
- </head>
- <body>
- <table border="1"><tr><td>id</td><td>name</td><td>pass</td></tr>
- <tbody id="table4"></tbody>
- </table>
- </body>
- </html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type='text/javascript' src='dwr/interface/BookList.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type="text/javascript">
window.οnlοad=function (){//页面加载时候调用
BookList.getList(callBackMethod);//BookList是BookList.js这个名字,
//getList当然是你自己写的方法名,参数是回调下面的函数,
//这个参数是必须有的, 如果方法里面需要传参数的话,可以在里面加参数
//比如我根据name查询然后返回List可以写成这种, BookList.getList(name,callBackMethod);
}
function callBackMethod(dataList){//dataList可以自定义,是返回的数组名
alert(dataList.length);//显示返回数组值的长度
for(var d in dataList){//循环弹出相关的值,当时我做测试时候写的。
alert("name:"+dataList[d].name);
alert("pass:"+dataList[d].pass);
}
DWRUtil.removeAllRows("table4");//删除table4里面的所有行。DWR里面util.js中的方法。
DWRUtil.addRows("table4",
//循环显示数据并自动增加tr,也是DWR里面util.js中的方法。详细使用说明可以去网上找找
dataList,[function(item){return item.id},
function(item){
return "<a target='_blank' href='index.jsp?id="+item.id+"'>"+item.name+"</a>";//显示一个超连接
},function(item){return item.pass}],{escapeHtml:false} );
}
</script>
</head>
<body>
<table border="1"><tr><td>id</td><td>name</td><td>pass</td></tr>
<tbody id="table4"></tbody>
</table>
</body>
</html>
源文件已经打包好了。