重慶正大軟件學院軟件系《MVC框架程序設計》電子教案重慶正大軟件學院軟件系《MVC框架程序設計》課程組重慶正大軟件職業技術學院教案（項目類）授課對象系別軟件系本次課學時4學時年級班次大二章節題目第2章dwr框架目的要求（含技能要求）理解dwr框架的概念理解dwr框架的執行過程掌握dwr框架的基本使用方法本節重點掌握dwr框架的基本使用方法本節難點理解dwr框架的執行過程教學方法項目教學法教學用具機房、屏幕廣播問題引入通過用戶注冊案例中用戶名唯一性檢查，從而引出本次課程。難點與重點講解方法引導、分析、講解、實作演示本次課小結課程小結教后禮記討論、思考題、作業（含實訓作業）完成本次課的課堂任務填寫實驗報告任務介紹（5分鐘）在注冊頁面中增加對輸入的用戶名的唯一性驗證，要求使用dwr技術，當光標離開用戶名輸入框的時觸發該驗證；為簡化業務邏輯，當輸入用戶名張三的時候用戶名不唯一，輸入其他用戶名則驗證通過。注冊的界面如圖2.1-1a，當用戶輸入用戶名“張三”后切換光標到其他輸入框，結果如圖2.1-1b所示，當用戶輸入用戶名“李四”后切換光標到其他輸入框，結果如圖2.1-1c所示。圖2.1-1a注冊用戶名唯一驗證-用戶名輸入圖2.1-1b注冊用戶名唯一驗證-驗證不通過圖2.1-1c注冊用戶名唯一驗證-驗證不通過任務解析（50-60分鐘）搭建dwr開發環境，配置dwr.xml文件在頁面導入dwr核心庫及自定義接口函數庫編寫注冊界面及輸入框失去焦點的觸發事件代碼編寫使用ajax方式提交的javascript函數編寫后臺處理代碼編寫javascript響應函數進行善后工作詳細步驟搭建dwr開發環境，配置dwr.xml文件在項目的WEB-INF文件夾加入dwr.jar文件在web.xml文件中加入dwr的servlet的配置。關鍵代碼如下：<!--Ajax框架的配置引入DWR的servlet--> <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><!--Ajax框架的配置結束引入DWR的servlet-->注：上述代碼在一個工程中只需配置一次。③在WEB-INF文件夾中創建一個dwr.xml文件，完成后臺Java邏輯處理類的路徑以及對應javascript別名“UserIsExist”的配置。關鍵代碼如下：<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting2.0//EN""/dwr/dwr20.dtd"><dwr><allow><createcreator="new"javascript="UserIsExist"><paramname="class"value="com.zdsoft.action.UserIsExistBean"/></create> </allow></dwr>在頁面導入dwr核心庫及自定義接口函數庫參考任務解析相關內容編寫三行代碼：<scripttype='text/javascript'src='/firstproject/dwr/util.js'></script><scripttype='text/javascript'src='/firstproject/dwr/engine.js'></script><scripttype='text/javascript'src='/firstproject/dwr/interface/UserIsExist.js'>注：上述代碼中的firstproject是本任務用到的工程名，若讀者自己的工程名與書上的不一致時，請修改為自己的工程名。在用戶名輸入框中添加失去焦點的觸發事件代碼在用戶名輸入框中加入失去焦點的觸發事件（onblur事件），觸發自定義函數submitDwr，使用this.value傳入當前輸入框的值，關鍵代碼如下：<s:textfieldname="name"onblur="submitDwr(this.value)"></s:textfield>編寫使用dwr方式提交的javascript函數首先定義名為submitAjax()的函數，參數為需要驗證的用戶名，關鍵代碼如下：<scriptlanguage="javascript"> functionsubmitDwr(name){ }</script> 然后，在submitAjax函數中編寫dwr方式的javascript代碼。在該函數可以直接使用之前定義的javascript別名UserIsExist來調用對應的后臺Java類中的方法，在參數列表中除了要將用戶名傳給后臺，還需在參數列表中聲明響應函數的名稱。關鍵代碼如下：//方法有兩個參數，第一個是向后臺傳的參數，第二個是指定返回時的響應函數UserIsExist.userIsExist(name,callBack);編寫后臺處理代碼首先，創建com.zdsoft.action.UserIsExistBean類（注意該類的路徑及類名必須與dwr.xml配置文件中保持一致），在UserIsExistBean類中添加執行業務邏輯的userIsExist方法，在方法中判斷前臺傳入的用戶名是否為張三，若為張三則返回字符串true，否則返回字符串false，關鍵代碼如下：publicclassUserIsExistBean{ publicStringuserIsExist(Stringname)throwsException{ //下面代碼只是舉例用戶名張三已經存在進行驗證，實際中需連接數據庫數據進行驗證 if("張三".equals(name)){ return"true"; }else{ return"false"; } }}編寫javascript響應函數進行善后工作首先定義一個在步驟3的第二個小步驟所指定的響應函數callBack，參數列表中有關一個變量data，該變量即成功調用后臺處理后返回的結果，關鍵代碼如下：functioncallBack(data){}然后，在callBack函數中編寫善后工作的代碼，此處是判斷返回的結果data是否為字符串“true”，提示用戶名存在或不存在。關鍵代碼如下：//通過data參數得到后臺處理的結果，下面就是我們自己寫的善后工作代碼 if(data=="true"){ alert('用戶名已經存在!'); }else{ alert('用戶名不存在，可以使用!'); }到此，整個ajax技術的實現過程就完成了。本例調試運行的效果如圖2.1-1a、2.1-1b所示。通過比較上一節的傳統使用XMLHttpRequest對象的ajax實現方式，我們會發現，用dwr框架來開發ajax應用，javascript代碼更少，更加簡單容易。根據任務提出問題（45-55分鐘）dwr框架是什么？如何使用dwr框架？問題解析（45-55分鐘）關于dwr框架DWR（DirectWebRemoting）是一個用于改善web頁面與Java類交互的遠程服務器端Ajax開源框架,可以幫助開發人員開發包含AJAX技術的網站。它可以允許在瀏覽器里的代碼使用運行在WEB服務器上的JAVA類的方法，感覺Java類的方法就像在瀏覽器里一樣。使用dwr框架dwr框架的一般使用流程：搭建dwr開發環境前面頁面觸發事件調用javascript函數后臺中使用java代碼完成指定的業務邏輯并輸出結果配置dwr.xml文件，將后臺java代碼登記到dwr框架在頁面導入dwr核心庫及自定義接口函數庫在javascript函數中編寫dwr方式的代碼提交部分數據到后臺進行處理獲得后臺結果后及時調用程序員定義的javascript響應函數進行善后工作根據這個流程，下面以一個“用戶你好”的小例子來說明整個過程的代碼編寫。【例子2.2-1】與例子2.1-1功能相同，制作一個輸入用戶名的界面（界面中有一個用戶名輸入框和確定按鈕）（如圖2.1-3a所示）；當用戶輸入用戶名之后點擊確定按鈕，彈出一對話框提示“xxx，你好！”步驟1：搭建dwr開發環境①在項目中添加dwr提供的第三方開發包，即在項目的WEB-INF\lib文件夾加入dwr.jar文件。注：在加入dwr.jar包的同時要加入commons-logging.jar包。②在web.xml文件中加入dwr的servlet的配置，關鍵代碼如下：<!--Ajax框架的配置引入DWR的servlet--> <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><!--Ajax框架的配置結束引入DWR的servlet-->③在webroot\WEB-INF文件夾中創建一個dwr.xml文件，該文件用于將后臺的Java代碼登記到dwr框架中，讓其能被dwr框架正確定位并加以調用。為了檢驗xml的準確性加入dtd，同時完成基本結構，即加入dwr及allow節點的配置，關鍵代碼如下：<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting2.0//EN""/dwr/dwr20.dtd"><dwr><allow> <!—此處為dwr的具體配置項目--> </allow></dwr>步驟2：編寫本例子的頁面（一個輸入框和一個按鈕）；觸發事件為點擊按鈕的onclick事件，關鍵代碼如下：<formname="f1"action="表單提交地址"method="post"> 用戶名：<inputtype="text"name="username"> <inputtype="button"value="確定"onclick="sendHelloWorldDwr(f1.username.value);"></form>代碼中onclick="sendHelloWorldDwr(f1.username.value);"的sendhelloworld(f1.username.value)就是本例要自定義的javascript函數。我們需要通過此函數調用dwr方式的js代碼實現ajax。步驟3：后臺中使用java代碼完成指定的業務邏輯并輸出結果后臺代碼的業務邏輯是根據參數名name獲得前臺提交的用戶名數據，然后打印到控制臺，然后將獲得的用戶名再返回給前臺。編寫一個普通的Java類，在方法中接收前臺頁面傳過來的字符串，進行字符串拼接后返回一個新的字符串對象。關鍵代碼如下（包名為ajax，類名為HelloWorldDwrBean，方法名為helloDwr）：publicclassHelloWorldDwrBean{ publicStringhelloDwr(Stringusername){ //程序員在此寫各自的業務邏輯，可以是訪問數據庫的復雜代碼 returnusername+"，你好！"; }}步驟4：配置dwr.xml文件，將后臺java代碼登記到dwr框架在dwr.xml文件中的<allow>節點中加入后臺代碼的配置，關鍵屬性以下兩點：①<create>節點中的javascript屬性，可以理解為將后臺java類取了一個別名，然后在前臺的javascript代碼中，便可以通過該別名訪問到該類的方法。②<para>節點中的value屬性，該屬性需配置后臺java類的包路徑及類名，即告知dwr框架后臺的java類的所在位置，以便dwr框架能正確調用到后臺邏輯處理代碼。配置關鍵代碼如下：<allow> <createcreator="new"javascript="HelloWorldDwr"> <paramname="class"value="ajax.HelloWorldDwrBean"/> </create></allow>步驟5：在頁面導入dwr核心庫及自定義接口函數庫dwr是一個ajax框架，在使用時需導入它所提供的一些javascript函數庫，其中最基本的是engine.js，路徑是在/工程名/dwr/下，同時還需要導入自定義接口函數庫，格式為/工程名/dwr/interface/名稱.js，該名稱和上一步驟中所提到的java類的別名相同，即<create>節點中的javascript屬性（本例為HelloWorldDwr），注意自定義接口函數庫的路徑是在/工程名/dwr/interface/下，和engine.js的路徑不同。參考代碼如下：<scripttype='text/javascript'src='/工程名/dwr/engine.js'></script><scripttype='text/javascript'src='/工程名/dwr/interface/HelloWorldDwr.js'>注：engine.js和HelloWorldDwr.js兩個js文件并不需要我們編寫，也不用拷貝到工程中，這兩個文件是在運行的過程中由dwr框架自動生成的。步驟6：在javascript函數中編寫dwr方式的代碼提交部分數據到后臺進行處理我們首先定義名為sendHelloWorldDwr()的函數，參數有一個，為需要傳值的用戶名，關鍵代碼如下： <scriptlanguage="javascript"> functionsendHelloWorldDwr(name){ } </script> 然后，在函數中編寫dwr方式的代碼，通過在dwr.xml文件中聲明的后臺Java類的別名HelloWorldDwr，調用該類的邏輯處理方法helloDwr，傳遞用戶名至后臺，并指定返回時的響應函數為callBackHelloWorldDwr，關鍵代碼如下： <scripttype="text/javascript"> functionsendHelloWorldDwr(name