闲来没事,对dwr框架进行了简单的学习,小总结一下,以备忘、
首先就是导包了,dwr.jar以及commons-logging-1.1.jar[见附件]
接下来需要对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>
记不住uk.ltd.getahead.dwr.DWRServlet没问题,打开dwr.jar包你就会看到它了。
首先建立一个JavaBean,
public class PersonBean {
private String name;
private int age;
private String gender;
public PersonBean(){}
public PersonBean(String name,int age,String gender){
this.name = name;
this.age = age;
this.gender = gender;
}
setter和getter。。。
再建立一个service类,写了简单的三个方法,
public class DwrServer {
public List<PersonBean> getAllPerson(){
ArrayList<PersonBean> persons = new ArrayList<PersonBean>();
PersonBean p1 = new PersonBean("Lucy",12,"女");
PersonBean p2 = new PersonBean("Jam",13,"男");
persons.add(p1);persons.add(p2);
return persons;
}
public String print(PersonBean bean){
return bean.getName()+"的年龄是:"+String.valueOf(bean.getAge())+",性别是:"+bean.getGender();
}
public int getLength(List list){
for(int i=0;i<list.size();i++){
System.out.println(list.get(i) instanceof String);
}
return list.size();
}
}
然后再WEB-INF中建立一个dwr.xml【xml名称固定不变】,没有dtd文件怎么办? 不用着急,把你的dwr.jar包打开,在org.directwebremoting包里面,你会看到默认的dwr.xml和dwr10.dtd、dwr20.dtd等等,你可以直接复制该包里的dwr.xml中的头到你的dwr.xml中,也可以根据dtd建立dwr.xml。
接下来完善dwr.xml,
<dwr>
<allow>
<convert match="com.aokunsang.dwr.bean.PersonBean" converter="bean"></convert>
<create javascript="getPerson" creator="new">
<param name="class" value="com.aokunsang.dwr.server.DwrServer"></param>
<include method="print"/>
<include method="getLength"/>
<include method="getAllPerson"/>
</create>
</allow>
<signatures>
<![CDATA[
import java.util.List;
getPerson.getLength(List<String> list);
]]>
</signatures>
</dwr>
最后,写一个jsp或者html页面,我就直接使用Myeclipse生成的index.jsp了。首先得导入两个js,当然如果你想使用dwr的util工具包,你还要导入util.js、
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<script type="text/javascript" src="<%=path%>
/dwr/interface/getPerson.js"></script>
<script type="text/javascript" src="<%=path%>
/dwr/engine.js"></script>
<style type="text/css">
#newTable{width:50%;margin:10px 0;text-align:center}
th{font-size:20px;color:red;font-family:华文行楷}
table,th,td{border:1px solid #10FF15;border-collapse:collapse}
</style>
js的路径怎么设置,很模糊,请高手给小弟提供宝贵意见,谢谢。当然,我这样写也没有问题,太过于麻烦了而已、
<table id="newTable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
</body>
<script type="text/javascript">
window.onload = function(){
//DWREngine.beginBatch();
getCount();
printPerson();
getPerson.getAllPerson(showPerson);
//DWREngine.endBatch();
}
function showPerson(data){
var _table = document.getElementById("newTable");
for(var i=0;i<data.length;i++){
var _row = _table.insertRow(_table.rows.length);
_row.insertCell(0).appendChild(document.createTextNode(data[i].name));
_row.insertCell(1).appendChild(document.createTextNode(data[i].age));
_row.insertCell(2).appendChild(document.createTextNode(data[i].gender));
}
}
function printPerson(){
person = {};
person.name = "jack";
person.age = "12";
person.gender = "男";
getPerson.print(person,{callback:function(data){alert(data);}})
}
function getCount(){
var arr = new Array();
arr[0]=12;
arr[1]=11;
arr[2]=14;
getPerson.getLength(arr,{callback:function(data){alert(data);}})
}
</script>
ok,一切就绪,打开你的浏览器试试吧,输入http://localhost:8080/dwrTest/index.jsp,你就会看到想要的结果,截图如附件a.jpg。关于dwr的原理以及它的配置文件详情等等,待续....