SSH框架項(xiàng)目教程課件第2章第二講

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