DWR的半天学习(简单实例)
闲来没事,对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的原理以及它的配置文件详情等等,待续....