DWR簡介
DWR全稱Direct Web Remoting,是一款非常優秀的遠程過程調用(Remote Procedure Call)框架,通過瀏覽器提供的Ajax引擎實現在前端頁面的JS代碼中調用服務端Java代碼。使用它我們可以非常方便的和服務端進行交互,輕鬆獲取服務端返回的數據。
下面是DWR官方網站地址:
http://www.directwebremoting.org/dwr/introduction/index.html
DWR的使用
接下來我們看一下如何使用這款框架:
1.獲取DWR所需Jar包
要想使用dwr框架,我們首先需要獲取dwr框架的jar包,讀者可以從官網中獲取,
官網下載地址:http://www.directwebremoting.org/dwr/downloads/index.html
點擊dwr.jar進行下載即可,除此之外dwr依賴的commons-logging.jar日誌工具包我們可以從Maven資源庫下載:
http://mvnrepository.com/artifact/commons-logging/commons-logging
筆者選擇的版本爲1.1.2版。
下載完成後將兩個jar包拷貝到web工程的WEB-INF/lib目錄下。
2.在web.xml文件中配置DwrServlet
打開web工程WEB-INF目錄下的web.xml文件,配置處理請求的Servlet,具體內容如下:
<?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_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>dwr_web</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>dwr</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</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
2.創建dwr配置文件dwr.xml
在web.xml所在目錄下創建dwr的配置文件dwr.xml,配置文件內容如下:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
"http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
<create creator="new" javascript="helloworldService">
<param name="class" value="com.csii.dwr.service.HelloWorldService"></param>
</create>
</allow>
</dwr>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
在dwr.xml文件中我們通過allow標籤定義了一個支持JS調用的服務端的類com.csii.dwr.service.HelloWorldService
,接下來的工作就是編寫HelloWorldService類。
3.創建支持JS調用的服務器端的Java類
package com.csii.dwr.service;
public class HelloWorldService {
public String sayHello(String username)
{
return "Hello World!" + username;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
在HelloWorldService 類中我們定義了一個sayHello方法,該方法返回一個字符串。在JS中我們就可以通過helloworldService.sayHello(str)形式直接調用服務器端定義的函數。
4.查看服務端公開的支持JS調用的服務
部署應用後,在瀏覽器中輸入http://localhost:8080/dwr_web/dwr/可以查看服務端公開了哪些支持JS調用的服務。
可以看到我們在dwr配置文件dwr.xml中定義的helloworldService,點擊連接可以進入服務的測試界面。
這裏我們可以測試sayHello方法。在文本框中輸入內容,點擊Execute按鈕即可。
5.在JS調用公開的服務
要想在JS中調用服務端公開的服務,我們需要將engine.js和helloworldService.js引入到頁面中(上圖測試界面有相關說明),引入代碼上如下:
<script type='text/javascript' src='/dwr_web/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr_web/dwr/interface/helloworldService.js'></script>
- 1
- 2
接下來我們編寫一個JSP頁面,在JSP中使用helloworldService服務:
<%@ 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>Index Page</title>
<script type='text/javascript' src='/dwr_web/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr_web/dwr/interface/helloworldService.js'></script>
<script type='text/javascript' src='/dwr_web/dwr/util.js'></script>
</head>
<body>
<button onclick="sayHello()">測試</button>
<script type="text/javascript">
var sayHello = function(){
return helloworldService.sayHello("Rongbo_J",callBack);
}
var callBack = function(data)
{
alert(data);
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
我們在頁面中添加了一個按鈕,點擊按鈕是調用sayHello方法,在sayHello方法中通過helloworldService.sayHello("Rongbo_J",callBack)
形式調用服務端sayHello函數,第二個參數是一個回調函數用於接收服務端返回的數據。在回調函數中我們彈出服務器端返回的內容。
在瀏覽器中預覽效果如下:
可以看到服務端返回的數據HelloWorld!Rongbo_J