新建一個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>