搭建dwr框架

 

         新建一個javaweb的項目,首先需要引入jar包 有DWR.jar 和Common.logging.jar兩個jar包。dwr框架係指的是Ajax的封裝框架,主要用於視圖層(jsp頁面)和控制層(java類代碼)之間的數據傳輸。本例中中我隨意創建了一個簡單的demo示例,實現jsp頁面直接調用java類代碼的。創建錄入相關了4個文件涉及有web.xml(配置dwr.xml的容器加載),dwr.xml(配置java類代碼和js映射對象),hello.jsp(頁面,引用dwr的庫,直接寫js代碼),DwrTea.java(一個java類,含有方法實現)。

首先,配置web.xml 如:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
id="WebApp_ID" version="2.5">

<!--展示的項目名稱(無實際作用可省略)-->
  <display-name>Personal</display-name>
  <!--配置一個dwr的框架servlet  -->
  <servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <!--Dwr1.x版本  -->
 <!--  <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> -->
<!--Dwr2.x版本  由於本人在引用Dwr1.x版本時報錯故只用了這個版本-->  
  <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>

其次,配置dwr.xml。如圖


creator創建java對象方式,new的方式,(如果是spring框架,通過框架自動產生對象,寫spring方式),javascript的值是創建對象引用給js對象值是DWRTTea(此處的值與jsp代碼調用java類方法一致和引用一致),<param/>引用的java包名.類名,

第三步,創建java類代碼示例:

public class DwrTea {


// public DwrTea(){
// //說明了 在調用框架是 自動調用了 new DwrTea()無參構造方法 對象發賦給js對象
// }
public String getDWRwords(){
String s="你好!我是Dwr框架 的<會話連接建立>";
System.out.println(s);


return s;

}

public String hellodwr(String name){

return "你好Dwr 來自js"+name;

}


}

第四步:創建jsp頁面。

<head 下引用以下固定標籤。注意'dwr/interface/DWRTTea.js'  中的DWRTTea名稱與dwr.xml命名一致。

<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/DWRTTea.js'> </script>
<script language="javascript">




//調用無參數Java方法
function sayHello() {
alert("sf");
DWRTTea.getDWRwords(
function(data){
alert("ssss");
    dwr.util.setValue("helloDwrReply", data); 
  });
}
//調用有參數的方法
function getg(){
var name = dwr.util.getValue("name");    //參數
DWRTTea.hellodwr(name,function(data){
      dwr.util.setValue("helloDwrReply",data); 
});
}
</script>


</head>
<body>
<input type="button" value="DWRTea()" onclick="sayHello()" />
<br>Replied:
<!-- 顯示HelloDwr.sayHello方法的返回值 -->
<div id="helloDwrReply"></div>
<hr/>
<p>
<input id="name" type="text">
<input type="button" value="有參數的構造方法" onclick="getg()" />
</p>
</body>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章