AJAX與DWR框架.

1、AJAX與DWR框架主講人：陳巖走進(jìn) AJAX 技術(shù)什么是Ajax?Asyn chr onousJavaScriptAndXMLAjax不是一個(gè)技術(shù)，它實(shí)際上是幾種技術(shù)，每 種技術(shù)都有其獨(dú)特這處，合在一起就成了一個(gè) 功能強(qiáng)AJAX與DWR框架大的新技術(shù)。AJAX 的組成 Ajax組成XHTML和CSS使用文檔對(duì)象模型(DocumentObjectModel)作動(dòng)態(tài)顯示和交互 使用XML和XSLT做數(shù)據(jù)交互和操作使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)接收Bis使用J avaScript將它們綁定在一起傳統(tǒng) WEB 的工作方式用戶動(dòng)作觸發(fā)一個(gè)連接到Web服務(wù)器的HTTP請(qǐng)求。服務(wù)器完成一些處

2、理接收數(shù)據(jù)，處理 計(jì)算，再訪問(wèn)其它的數(shù)據(jù)庫(kù)系統(tǒng)，最后返回一 個(gè)H TML頁(yè)面到客戶端。顯示服務(wù)器信息AJAX 的工作方式 一個(gè)Ajax交互從一個(gè)稱為XMLHttpRequest的JavaScript對(duì)象開始。它允許一個(gè)客戶端腳本 來(lái)執(zhí)行HTTP請(qǐng)求，并且將會(huì)解析一個(gè)XML格 式的服務(wù)器響應(yīng)。Ajax處理過(guò)程中的第一步是創(chuàng)建一個(gè)XMLHttpRequest實(shí)例。 使用HTTP方法（GET或POST）來(lái)處理請(qǐng)求，并將目標(biāo)URL設(shè)置到XMLHttpRequest對(duì)象上。AJAX 的工作方式 Ajax如何首先處于異步處理狀態(tài)？當(dāng)你發(fā)送HTTP請(qǐng)求，你不希望瀏覽器掛起并等待服務(wù) 器的響應(yīng)，取而代之的是，

3、你希望通過(guò)頁(yè)面繼 續(xù)響應(yīng)用戶的界面交互，并在服務(wù)器響應(yīng)真正 到達(dá)后處理它們。XMLHttpRequest注冊(cè)一個(gè)回調(diào)函數(shù)，并異步 地派發(fā)XMLHttpRequest請(qǐng)求?？刂茩?quán)馬上就 被返回到瀏覽器，當(dāng)服務(wù)器響應(yīng)到達(dá)時(shí)，回調(diào) 函數(shù)將會(huì)被調(diào)用。AJAX 工作方式傳統(tǒng) WEB 與 AJAX 的區(qū)另 ij傳統(tǒng)WEBc當(dāng)服務(wù)器正在處理自己的事情的時(shí)候，用戶在做什么？ 沒錯(cuò)，等待。每一個(gè)動(dòng)作，用戶都要等待。 AJAX不像加載一個(gè)頁(yè)而一樣，在會(huì)話的開始，瀏覽器加載 了一個(gè)Ajax引擎采用JavaScript編寫并且通常在一個(gè) 隱藏frame中。這個(gè)引擎負(fù)責(zé)繪制用戶界面以及與服務(wù) 器端通訊。Ajax引擎允許

4、用異步的方式實(shí)現(xiàn)用戶與程 序的交互一一不用等待服務(wù)器的通訊。不需要等待， 町以 繼續(xù)操作RequestResponse客戶端使用 AJAX創(chuàng)建XMLHTTPRequest對(duì)象function init()if(window.XMLHttpRequest) xmlObject = new XMLHttpRequest();elsexmlObject = newActive夂Object(”Microsoft.XMLHTTP”); 使用 AJAX調(diào)用XMLHTTPRequest對(duì)象的open()方法。Open(“method”,”urT,true);Method代表我們的提交方式，GET或POST

5、 URL提交的路徑True(異步)指定是同步或是異步調(diào)用XMLHTTPRequest對(duì)像的onreadystatecha ng e屬 性=回 調(diào)函數(shù)調(diào)用send()方法發(fā)送數(shù)據(jù)AJAX 的使用var xmlObject = null;獲取謎求對(duì)彖function init()if(window.XMLHttpRequest) xmlObject = new XMLHttpRequest();elsexmlObject = new ActiveXObject(nMicrosoft.XMLHTTPH)； AJAX 的使用function submitToServer() var id = docu

6、ment.getElementByld(”id”).value;init();/xmlObject.setRequestHeader(C on tentType,application/x-www-form-urle ncoded”);var url =MAjaxServlet?id=H+id;xmlObject.ope n(“get”,url,true);xmlObject.onreadystatechange = callBack;xmlObject.se nd(null);AJAX 的使用AJAX 的使用0=未初始化(uninitialized)1 =正在加載(loading)2=加載完

7、畢(loaded)3=交互(interactive)4=完成(completefunction callBack()if(4 = xmlObject.readyState)判斷服務(wù)器是否完成響應(yīng)if(200 = xmlObject.status) document. getElementBy Id(” display Id),value=xmlObject.responseText; 種新的技術(shù)DWRDWRDirect Web RemotingDWR是一個(gè)可以允許你去創(chuàng)建AJAX WEB站 點(diǎn)的JAVA開源庫(kù)。它可以讓你在瀏覽器中的Javascript代碼調(diào)用Web服務(wù)器上的Java代碼,就像

8、在Java代碼就在瀏覽器中一樣。DWR 的優(yōu)點(diǎn)DWR的優(yōu)點(diǎn)在于不需要任何的網(wǎng)頁(yè)瀏覽器插件就能運(yùn) 行在網(wǎng)頁(yè)上。DWR工作原理是通過(guò)動(dòng)態(tài)把Java類主成為Javascript。它的代碼就像Ajax樣，你感覺調(diào)用就像發(fā)生在瀏覽 器端，但是實(shí)際上代碼調(diào)用發(fā)生在服務(wù)器端，DWR負(fù) 責(zé)數(shù)拯的傳遞和轉(zhuǎn)換。AJAX的異步特性和正常JAVA方法調(diào)用的同步特性相 結(jié)合在異步模式下,結(jié)果數(shù)據(jù)在開始調(diào)用之后的一段時(shí) 間之后才町以被異步訪問(wèn)獲取到.DWR允許WEB開發(fā) 人員傳遞一個(gè)回調(diào)函數(shù)，來(lái)異步處理Java函數(shù)調(diào)用過(guò)程。DWR 優(yōu)點(diǎn)安全:DWR創(chuàng)造的對(duì)象生存的時(shí)間越短，多次 調(diào)用中間的值不一致的錯(cuò)誤機(jī)會(huì)越少。內(nèi)存消耗

9、低：如果你的站點(diǎn)用戶量非常大，這 個(gè)創(chuàng)造器可以減少JVM的內(nèi)存溢出。DWR 框架的基本組成-一個(gè)運(yùn)行在服務(wù)器端的Java Servlet,它處理 請(qǐng)求并且向?yàn)g覽器發(fā)回響運(yùn)行在瀏覽器端的JavaScript,它發(fā)送請(qǐng)求而且還能動(dòng)態(tài)更新網(wǎng)頁(yè)。如何配置 DWR 框架從官方網(wǎng)站下載dwr.jar包。然后將它放在你webContent的WEB-INF/libg錄下。配置web.xml文件將dwr.xml文件拷貝到webContent/WEB-INF g錄下。如何配置 DWR 框架dwr-invokerv/servlet-name org.directwebremoting.servlet.DwrServ

10、letdebugtruedwr-invoker/dwr/*如何配置 DWR 框架 使用 DWR我們可以通過(guò)htto：/localhost:8080/工程名/dwr來(lái)查看我們配置的DWR是否成功！Q DWR Tcst Index Windows Internet Explorer6叵叵http:/localhost：8080/A ax Demo/dwr/index.html令ttBK | * 卻網(wǎng)站卻網(wǎng)站初砂快加初砂快加Ie DWR Test IndexClasses known to DWR: -TVlyScr4ce (service MyServig)使用 DWR0 OWR Tort Wm4

11、W us*,fr eyj JBV MMex*u / 4 =ec/ CvrT/nc ,.n / wey *xt: In addition運(yùn)an optiottAlscript-: ow 丄 rxv/3vA o rxpc wo,2 xq eo/ vw/u七亠丄3 aw, oHiQtAReplies trom DWR arc shewn xvitb a yellow backeround if tKey arc jgple or m an alert box otherwise. THc iput、ore GPhuatud a Javascript o trin3must be quoted befwe executionTlune hl IO ellc.ctKsum( 0)；c.hoshCjcxlcC :&_g IWairii$ tuafcHCodeO is M44uded N deneeiuJ. 皀gAH ：(Wamn Nfr java Jang.class.arrMnir .xeUad.d為od