DWR3.0框架入門(1) —— 實現ajax
阿新 • • 發佈:2018-12-26
框架簡介:DWR(Direct Web Remoting)
是一個用於改善web頁面與Java類互動的遠端伺服器端Ajax開源框架,可以幫助開發人員開發包含AJAX技術的網站。它可以允許在瀏覽器裡的程式碼使用執行在WEB伺服器上的JAVA函式,就像它就在瀏覽器裡一樣。
本Demo實現的基本功能:
點選jsp介面的按鈕,通過DWR呼叫到伺服器端的java程式碼,在控制檯打印出jsp輸入框中的值
Demo構建流程:
1.新建Web工程
2.匯入jar包:commons-logging-x.x.x.jar和dwr3.0.jar
4.在src中新建類MessagePush:
5.與web.xml同級目錄下建立dwr.xml,用來配置js函式與java程式碼的對映關係:
6.在index.jsp中寫入js邏輯(該處使用到jquery,請自行新增):
說明:jsp檔案中必須引入幾個js,它們都是隱含存在的,不用考慮它們在哪兒。其中engine.js和util.js是固定的。另外的一個js的名稱就是dwr.xml中配置的類名。
3.在web.xml中加入DWR使用能力:
<servlet> <servlet-name> dwr-invoker </servlet-name> <servlet-class> uk.ltd.getahead.dwr.DWRServlet</servlet-class > <init-param> <param-name> debug</param-name > <param-value> true</param-value > </init-param> <init-param> <param-name> crossDomainSessionSecurity</param-name > <param-value> false</param-value > </init-param> <init-param> <param-name> allowScriptTagRemoting</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>
4.在src中新建類MessagePush:
package sugar.dwr;
public class MessagePush {
public void send(String str){
System. out.println(str);
}
}
5.與web.xml同級目錄下建立dwr.xml,用來配置js函式與java程式碼的對映關係:
<?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= "messagePush"> <param name="class" >sugar.dwr.MessagePush</ param> </create> </allow> </dwr>
6.在index.jsp中寫入js邏輯(該處使用到jquery,請自行新增):
<%@ page language= "java" import ="java.util.*" pageEncoding="UTF-8" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head > <title >DWR</ title> <script type= "text/javascript" src ="js/jquery-1.8.3.js"></ script> <script type= "text/javascript" src ="dwr/util.js"></ script> <script type="text/javascript" src= "dwr/engine.js"></script > <script type="text/javascript" src= "dwr/interface/messagePush.js" ></script> </head > <body > <table border="0" > <tr> <td>< input id ="content" type="text" /></td> <td>< input id ="send" type="button" value= "send"/></td > </tr> </table> <script type="text/javascript" > $( "#send").click(function(){ var content = $("#content" ).val(); messagePush.send(content); }); </script> </body > </html>
說明:jsp檔案中必須引入幾個js,它們都是隱含存在的,不用考慮它們在哪兒。其中engine.js和util.js是固定的。另外的一個js的名稱就是dwr.xml中配置的類名。
測試結果:
轉自:http://my.oschina.net/sugarZone/blog/178853