闲来没事,对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的原理以及它的配置文件详情等等,待续....