1.DWR框架介紹:
DWR(Direct Web Remoting)是一個WEB遠程調用框架.利用這個框架可以讓AJAX開發變得很簡單.利用DWR可以在客戶端利用JavaScript直接調用服務端的Java方法並返回值給JavaScript就好像直接本地客戶端調用一樣(DWR根據Java類來動態生成JavaScrip代碼)
它通過反射，將java翻譯成javascript，然後利用回調機制，輕鬆實現了javascript調用Java代碼。
2.DWR框架搭建步驟
1. 在pom.xml文件導入DWR.jar包
<dependency>
<groupId>org.directwebremoting</groupId>
<artifactId>dwr</artifactId>
<version>3.0.0-RELEASE</version>
</dependency>
2.在web.xml 中配置相應的監聽,以及servlet的訪問路徑
<listener>
<listener-class>org.directwebremoting.servlet.DwrServlet</listener-class>
</listener>
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<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>
3..確定要被dwr框架管理的類以及方法
一個普通java類
4.編寫dwr.xml的配置文件，配置要公開的類或方法
Javascript表示生成js文件的名稱
Param ：name表示引入的類型爲class文件，Value參數爲類的全路徑
creator="new" 類的創建方式，creater="new"表示每調用一次，需要new一個這樣的類
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
"http://directwebremoting.org/schema/dwr30.dtd">
<dwr>
<allow>
<create creator="new" javascript="HelloDwr">
<param name="class" value="com.deppon.dwr.service.HelloDwr"/>
< /create>
<!-實體類受dwr組件管理-->
<convert converter="bean" match="test.User"/>
</allow>
</dwr>
5查看服務端公開了哪些支持JS調用的服務
http://localhost:8080/tomcat路徑/dwr/index.html
6.在jsp頁面引入依賴的js
DWR引擎
<script type='text/javascript' src='dwr/engine.js'></script>
DWR工具
<script type='text/javascript' src='dwr/util.js'></script>
自定義將調用的類
<script type='text/javascript' src='dwr/interface/反射生成的js文件.js'></script>
7.Demo案列
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<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/HelloDwr.js'></script>
<script type="text/javascript">
function sayHello() {
HelloDwr.sayHello(function(data) {
dwr.util.setValue("helloDwrReply", data);
});
}
//調用有參數的Java方法
function sayHelloWithParam() {
var name = dwr.util.getValue("name"); //參數
HelloDwr.sayHelloWithParam(name, function(data) {
dwr.util.setValue("helloDwrReply2", data);
});
}
</script>
</head>
<body>
<input type="button" value="HelloDwr.sayHello()" onclick="sayHello()" />
<br>Replied:
<!-- 顯示HelloDwr.sayHello方法的返回值 -->
<div id="helloDwrReply">
</div>
<hr>
<input id="name" type="text">
<input type="button" value="HelloDwr.sayHelloWithParam()" onclick="sayHelloWithParam(name)" />
<br>Replied:
<!-- 顯示HelloDwr.sayHelloWithParam方法的返回值 -->
<div id="helloDwrReply2">
</div>
</body>
</html>
注意事項：需要引入dwr的js
<script type='text/javascript' src='dwr/engine.js'> </script>
<script type='text/javascript' src='dwr/util.js'> </script>
引入自定義的js
<script type='text/javascript' src='dwr/interface/自定義的js文件.js'></script>