html通過JavaScript調用java代碼

使用DWR實現JS調用服務端Java代碼

1 DWR簡介

DWR全稱Direct Web Remoting,是一款非常優秀的遠程過程調用(Remote Procedure Call)框架,通過瀏覽器提供的Ajax引擎實現在前端頁面的JS代碼中調用服務端Java代碼。使用它我們可以非常方便的和服務端進行交互,輕鬆獲取服務端返回的數據。 
下面是DWR官方網站地址: 
http://www.directwebremoting.org/dwr/introduction/index.html 


2 DWR的使用

接下來我們看一下如何使用這款框架:

2.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

下載完成後將兩個jar包拷貝到web工程的WEB-INF/lib目錄下。

2.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>

2.3 創建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>

在dwr.xml文件中我們通過allow標籤定義了一個支持JS調用的服務端的類com.csii.dwr.service.HelloWorldService,接下來的工作就是編寫HelloWorldService類。

2.4 創建支持JS調用的服務器端的Java類

package com.csii.dwr.service;

public class HelloWorldService {
    public String sayHello(String username)
    {
        return "Hello World!" + username;
    }
}

在HelloWorldService 類中我們定義了一個sayHello方法,該方法返回一個字符串。在JS中我們就可以通過helloworldService.sayHello(str)形式直接調用服務器端定義的函數。

2.5 查看服務端公開的支持JS調用的服務

部署應用後,在瀏覽器中輸入http://localhost:8080/dwr_web/dwr/可以查看服務端公開了哪些支持JS調用的服務。



可以看到我們在dwr配置文件dwr.xml中定義的helloworldService,點擊連接可以進入服務的測試界面。 



這裏我們可以測試sayHello方法。在文本框中輸入內容,點擊Execute按鈕即可。

2.6 在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>

接下來我們編寫一個JSP頁面,在JSP中使用helloworldService服務:

<pre name="code" class="html"><%@ 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 οnclick="sayHello()">測試</button>

<script type="text/javascript">
    var sayHello = function(){
        return helloworldService.sayHello("Rongbo_J",callBack);
    }
    var callBack = function(data)
    {
        alert(data);
    }
</script>
</body>
</html>

我們在頁面中添加了一個按鈕,點擊按鈕是調用sayHello方法,在sayHello方法中通過helloworldService.sayHello("Rongbo_J",callBack)形式調用服務端sayHello函數,第二個參數是一個回調函數用於接收服務端返回的數據。在回調函數中我們彈出服務器端返回的內容。

在瀏覽器中預覽效果如下: 

可以看到服務端返回的數據HelloWorld!Rongbo_J



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