当前位置: 代码迷 >> Web前端 >> DWR的半日学习(简单实例)
  详细解决方案

DWR的半日学习(简单实例)

热度:92   发布时间:2012-11-07 09:56:10.0
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的原理以及它的配置文件详情等等,待续....

  相关解决方案