Ajax用戶注冊課件_第1頁
Ajax用戶注冊課件_第2頁
Ajax用戶注冊課件_第3頁
Ajax用戶注冊課件_第4頁
Ajax用戶注冊課件_第5頁
已閱讀5頁，還剩53頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第8章Ajax用戶注冊8.1開發(fā)步驟8.2Ajax入門第8章Ajax用戶注冊8.1開發(fā)步驟8.2Ajax入門1第8章Ajax用戶注冊常見的用戶注冊是用戶輸入用戶名，后臺程序檢測數(shù)據(jù)庫中用戶名是否重復(fù)而作出注冊的成功和失敗的提示。這樣操作，對于用戶來說不方便。一個好的用戶體驗(yàn)應(yīng)該是：當(dāng)用戶輸入完注冊用戶名后，Web系統(tǒng)能即時檢查并顯示，并在檢查和顯示的同時不影響當(dāng)前頁面的操作。這就是“異步獲取數(shù)據(jù)”的要求，而這是Ajax能夠完成的。本章將通過Ajax技術(shù)對用戶注冊模塊進(jìn)行修改。效果如圖8-1所示。圖8-1Ajax用戶注冊第8章Ajax用戶注冊常見的用戶注冊是用戶輸入用戶名，后臺28.1開發(fā)步驟開發(fā)的步驟:(1)配置DWR步驟1：下載裝載dwr.jar步驟2：配置web.xml(2)開發(fā)程序步驟3：DAO步驟4：Service步驟5：JSP步驟6：配置dwr.xml具體操作如下:● 步驟1下載dwr.jar文件從http://getahead.ltd.nk/dwr下載dwr.jar(版本為2),加入dwr.jar到bookstore工程中● 步驟2配置web.xml配置web.xml，代碼如下：8.1開發(fā)步驟開發(fā)的步驟:38.1開發(fā)步驟● 步驟3DAO本層主要的類是IUserDAO，接口的exitUser方法定義是否已經(jīng)存在這個用戶。UserDAO實(shí)現(xiàn)這個方法。如圖8-2所示。圖8-2DAO主要類圖8.1開發(fā)步驟● 步驟3DAO圖8-2DAO主要類圖48.1開發(fā)步驟文件在項(xiàng)目中的位置如圖8-3所示。圖8-3文件在項(xiàng)目中的位置8.1開發(fā)步驟文件在項(xiàng)目中的位置如圖8-3所示。圖8-358.1開發(fā)步驟IUserDAO.java代碼如下：packageorg.apex.bookstore.dao;importorg.apex.bookstore.vo.User;publicinterfaceIUserDAO{ publicvoidsaveUser(Useruser); publicUservalidateUser(Stringusername,Stringpassword);

publicbooleanexitUser(Stringusername);}UserDAO.java代碼如下：8.1開發(fā)步驟IUserDAO.java代碼如下：68.1開發(fā)步驟● 步驟4：ServiceService層主要的類為IUserService接口，定義了exitUser()方法，用于驗(yàn)證是否已經(jīng)存在這個用戶。UserService實(shí)現(xiàn)了這個接口。如圖8-4所示。圖8-4Service主要接口8.1開發(fā)步驟● 步驟4：Service圖8-4Serv78.1開發(fā)步驟文件在項(xiàng)目中的位置如圖8-5所示。圖8-5文件在工程中的位置8.1開發(fā)步驟文件在項(xiàng)目中的位置如圖8-5所示。圖8-88.1開發(fā)步驟IUserService.java代碼如下：packageorg.apex.bookstore.service;importorg.apex.bookstore.vo.User;publicinterfaceIUserService{ publicvoidsaveUser(Useruser); publicUservalidateUser(Stringusername,Stringpassword);

publicbooleanexitUser(Stringusername);}UserService.java代碼如下：packageorg.apex.bookstore.service.impl;importorg.apex.bookstore.dao.IUserDAO;importorg.apex.bookstore.service.IUserService;importorg.apex.bookstore.vo.User;publicclassUserServiceimplementsIUserService{ privateIUserDAOuserDAO;8.1開發(fā)步驟IUserService.java代碼如下：98.1開發(fā)步驟 publicIUserDAOgetUserDAO(){ returnuserDAO; } publicvoidsetUserDAO(IUserDAOuserDAO){ this.userDAO=userDAO; }

publicvoidsaveUser(Useruser){ this.userDAO.saveUser(user); } publicUservalidateUser(Stringusername,Stringpassword){ returnuserDAO.validateUser(username,password); }

publicbooleanexitUser(Stringusername){ returnuserDAO.exitUser(username); }}8.1開發(fā)步驟 publicIUserDAOgetUs108.1開發(fā)步驟● 步驟5JSP修改register.jsp注冊頁面，文件在項(xiàng)目中的位置如圖8-6所示。圖8-6文件在工程中的位置8.1開發(fā)步驟● 步驟5JSP圖8-6文件在工程中的位118.1開發(fā)步驟register.jsp代碼如下：<%@pagecontentType="text/html;charset=gb2312"%><%@taglibprefix="s"uri="/struts-tags"%><html><head>

<scripttype="text/javascript"src="dwr/engine.js"></script><scripttype="text/javascript"src="dwr/util.js"></script><scripttype="text/javascript"src="dwr/interface/UserDAOAjax.js"></script><title>用戶注冊</title></head>

<scripttype="text/javascript"> functionshow(boolean){if(boolean){Alter(“用戶已經(jīng)存在!”);}}functionvalidate(){varname=form1.username.value;UserDAOAjax.exitUser(name,show);8.1開發(fā)步驟register.jsp代碼如下：128.1開發(fā)步驟

}</script>

<bodyonload="init()"><formaction="register.action"name="form1"><tableid="table1"border="0"><tr><td>用戶名:<inputtype="text"name="username"onchange="validate()"/></td><tdid="error"><fontcolor="red">用戶名已被注冊</td></tr><tr><td>密碼:<inputtype="text"name="password"/></td></tr>…</table></form></body></html>8.1開發(fā)步驟}138.1開發(fā)步驟● 步驟6配置dwr.xmldwr.xml在項(xiàng)目中的位置如圖8-7所示。圖8-7dwr配置文件的位置8.1開發(fā)步驟● 步驟6配置dwr.xml圖8-7dw148.1開發(fā)步驟<!DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting1.0//EN""http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr><allow><!—定義dwr可以創(chuàng)建和轉(zhuǎn)換的類--><createjavascript="UserDAOAjax"creator="spring"><paramname="beanName"value="userService"></param><includemethod=”exitUser”/></create></allow></dwr>8.1開發(fā)步驟<!DOCTYPEdwrPUBLIC158.1開發(fā)步驟creator屬性是必須的,它用來指定使用哪種創(chuàng)造器默認(rèn)情況下,有8種創(chuàng)造器.它們是：● new:用Java的new關(guān)鍵字創(chuàng)造對象● none:不創(chuàng)建對象● scripted:通過BSF使用腳本語言創(chuàng)建對象● spring:通過Spring框架訪問Bean● jsf:使用JSF的Bean● struts:使用Struts的FormBean● pageflow:訪問Beehive或Weblogic的PageFlow● javascript屬性:用于指定瀏覽器中這個被創(chuàng)造出來的對象的名稱.● param元素:指定創(chuàng)造器的其他參數(shù),每種構(gòu)造器各有不同.例如,”new”構(gòu)造器需要知道創(chuàng)建的對象是什么類型.每個創(chuàng)造器的參數(shù)在各自的文檔中能找到8.1開發(fā)步驟creator屬性是必須的,它用來指定使用哪168.2Ajax入門8.2.1AsynchronouseJavaScript+XMLAjax這個名詞由JesseJamesGarrett提出,在他發(fā)表的Ajax：ANewApproachtoWebApplications這篇文章中談到GoogleSuggest與GoolgeMaps所使用到的技術(shù)，是他們在AdaptivePath中稱之為Ajax的新方法。在文章中，Ajax是AsynchronousJavaScript+XML的簡稱，指出了Ajax的核心觀念（Asynchronous）與所用到的主要兩個技術(shù)（JavaScript，XML）。Asynchronous為非同步，要了解Ajax，需要先了解為何要非同步?，F(xiàn)在許多應(yīng)用程序都是在Web上建立的。但是，Web卻也成為限制Web應(yīng)用程序發(fā)展的因素。限制的原因來自于網(wǎng)絡(luò)延遲的不確定性，網(wǎng)絡(luò)連接是耗費(fèi)資源的行為，程序必須序列化，通訊協(xié)議溝通，路由傳輸?shù)葎幼鳌＿@些動作都很浪費(fèi)時間和資源。Web應(yīng)用程序中，通常通過表單進(jìn)行資料提交，在同步的情況下，使用者發(fā)送表單之后，就只能等待服務(wù)器回應(yīng)，在這段時間內(nèi)，使用者無法作進(jìn)一步的操作。如圖8-8所示。8.2Ajax入門8.2.1Asynchronouse178.2.1AsynchronouseJavaScript+XML序列化通訊協(xié)議實(shí)體傳送通訊協(xié)議序列化圖8-8同步技術(shù)8.2.1AsynchronouseJavaScript188.2.1AsynchronouseJavaScript+XML圖8-9非同步技術(shù)8.2.1AsynchronouseJavaScript198.2.2XMLHttpRequest在Ajax應(yīng)用程序中，如果是Mozilla/Firefox/Safari中，可以通過XMLHttpRequest來發(fā)送非同步請求，如果在IE6或者之前的版本，則是使用ActiveXObject來發(fā)送非同步請求，為了各個不同瀏覽器的兼容性，必須進(jìn)行測試取得XMLHttpRequest或ActiveXObjeect，例如。varxmlHttp;functioncreateXMLHttpRequest(){if(window.XMLHttpRequest){//如果可以取得XMLHttpRequestxmlHttp=newXMLHttpRequest();//Mozilla,Firefox,Safari}elseif(window.ActiveXObject){//如果可以取得ActiveXOjectxmlHttp=newActiveXObject(“Microsoft.XMLHTTP”);//InternetExploerer}}8.2.2XMLHttpRequest在Ajax應(yīng)用程序208.2.2XMLHttpRequest在建立XMLHttpRequest之后，則可以使用以下幾種方法：● voidopen()開啟對服務(wù)器的連接● voidsend()對服務(wù)器傳送請求● voidsetRequestHeader()為HTTP請求設(shè)定一個給定的header設(shè)定值● voidabort()用來中斷請求● stringgetAllReponseHeaders()傳回一個字串● stringgetResponseHeaders():傳回一個字串一個基本的Ajax請求可以是以下片段：

functionstartRequest(){ createXMLHttpRequest();//建立非同步請求組件 xmlHttp.onreadystatechange=handleStateChange;//設(shè)定callback函數(shù) xmlHttp.open();//開啟連接 xmlHttp.send(null);//傳送請求}functionhandleStateChange(){//在這里處理非同步回應(yīng) …}8.2.2XMLHttpRequest在建立XMLHtt218.2.2XMLHttpRequest在Web應(yīng)用中，通常通過FORM提交或者連接請求的方式與服務(wù)器交互，這種方式總有一個請求和相應(yīng)的過程，這個過程總是要刷新頁面，既浪費(fèi)網(wǎng)絡(luò)帶寬資源又影響用戶體驗(yàn)。在很多場合需要不斷刷新頁面，比如需要連續(xù)多次提交請求，這種刷新會嚴(yán)重影響用戶的感受。有沒有一種方法不刷新頁面而完成數(shù)據(jù)提交或者數(shù)據(jù)請求呢？Ajax技術(shù)就是解決這個問題的答案。Ajax使Web應(yīng)用看上去好像傳統(tǒng)窗口應(yīng)用軟件那樣立即響應(yīng)，沒有提交，等待，刷新的過程。Ajax是利用瀏覽器與服務(wù)器之間的一個通道來“暗中”完成數(shù)據(jù)提交或者請求的。具體的方法是頁面的腳本程序通過瀏覽器提供的空間完成數(shù)據(jù)的提交和請求，并將返回的數(shù)據(jù)由JavaScript處理后展現(xiàn)到頁面上。整個過程是由瀏覽器，JavaScript、HTML共同完成。Ajax是這樣一組技術(shù)的總稱。不同的瀏覽器對Ajax有不同的支持方法，而對于Web服務(wù)器來說沒有任何變化，因?yàn)闉g覽器和服務(wù)器之間的這個隧道依然是基于HTTP請求和響應(yīng)的，瀏覽器正常的請求和Ajax請求對于Web服務(wù)器來說沒有任何區(qū)別。圖8-10說明了Ajax的請求和響應(yīng)過程。8.2.2XMLHttpRequest在Web應(yīng)用中，通228.2.2XMLHttpRequestXMLHTTP對象網(wǎng)頁JavaScriptURL1521423瀏覽器服務(wù)器圖8-10Ajax的請求和響應(yīng)過程8.2.2XMLHttpRequestXMLHTTP網(wǎng)頁238.2.2XMLHttpRequestAjax的請求和響應(yīng)過程：（1）網(wǎng)頁調(diào)用JavaScript程序（2）JavaScript利用瀏覽器提供的XMLHTTP對象向Web服務(wù)器發(fā)送請求。（3）請求的URL資源處理后返回結(jié)果給瀏覽器的XMLHTTP對象。（4）XMLHTTP對象調(diào)用實(shí)現(xiàn)設(shè)置的處理方法。（5）JavaScript方法解析返回的數(shù)據(jù),利用返回的數(shù)據(jù)更新頁面。創(chuàng)建的對象是什么類型，每個創(chuàng)造器的參數(shù)在各自的文檔中能找到。8.2.2XMLHttpRequestAjax的請求和響248.2.3基于Ajax的用戶注冊實(shí)例用戶填寫注冊信息時，在不提交到服務(wù)器的情況下，判斷用戶名是否被注冊并告之用戶。Ajax的無刷新機(jī)制使得注冊系統(tǒng)中對于注冊名稱能即時顯示，如果用戶名已經(jīng)存在，則即使通知用戶更換名稱。常見的用戶注冊是用戶輸入用戶名，后臺程序檢測數(shù)據(jù)庫中用戶名是否重復(fù)而做出注冊的成功和失敗的提示。這樣操作，對于用戶來說是不方便的。一個好的用戶體驗(yàn)應(yīng)該是：當(dāng)用戶輸入完注冊用戶名后，Web系統(tǒng)能即時檢查并顯示，并在檢查和顯示的同時不影響當(dāng)前頁面的操作。這就是“異步獲取數(shù)據(jù)”的要求，而這是Ajax能夠完成的。首先定義XMLHttp對象varxmlHttp=false;xmlHttp=newActiveXObject(“Microsoft.XMLHTTP”);自定義函數(shù)。這個函數(shù)的主要功能是異步獲得cu.jsp的內(nèi)容。在此之前將先提取當(dāng)前頁表單元素”u_name”即用戶名文本框的值，通過cu.jsp其后的參數(shù)即賦值而得到不同的結(jié)果。functioncallServer(){ varu_name=document.getElementById(”username”).value;//從網(wǎng)頁得到用戶輸入的用戶名 varurl=”cu.jsp?name=”+escape(u_name); xmlHttp.open(”GET”,url,true); xmlHttp.onreadystatechange=updatePage; xmlHttp.send(null);}8.2.3基于Ajax的用戶注冊實(shí)例用戶填寫注冊信息時，在258.2.3基于Ajax的用戶注冊實(shí)例cu.jsp的主要功能就是接收URL參數(shù)name的值做內(nèi)容顯示，該內(nèi)容最終被t1.html異步獲取。cu.jspnam=request.querystirng(”name”); //獲得name的值//連接數(shù)據(jù)庫查看是否有該用戶,如果有返回true,如果沒有返回false將異步獲取的信息顯示在當(dāng)前頁。functionupdatePage(){ test1.innerHTML=xmlHttp.responseText;}8.2.3基于Ajax的用戶注冊實(shí)例cu.jsp的主要功能268.2.4Ajax集成技術(shù)：DWR對于程序員來說，現(xiàn)在需要掌握J(rèn)avaScript腳本來操作數(shù)據(jù)。但是，相對于Java、JavaScript語言無論在面向?qū)ο筮€是數(shù)據(jù)操作等方面都很弱。值得高興的是，針對Ajax，在J2EE領(lǐng)域出現(xiàn)不少解決方案，如：DWR、AjaxAnywherJSON-RPC-Java等等。DWR是開源框架，類似于Hibernate。借助于DWR，開發(fā)人員無需具備專業(yè)的javascript知識就可以輕松實(shí)現(xiàn)ajax使得ajax更加“平民化”。DWR的工作原理就是通過動態(tài)地把JAVA對象動態(tài)地生成為JavaScript對象，使得客戶端通過腳本就能夠訪問到服務(wù)器對象。DWR大大簡化了編寫ajax的工作量。DWR是一個可以創(chuàng)建AJAXWEB站點(diǎn)的Java開源庫。它可以讓使用者在瀏覽器中的Javascript代碼調(diào)用Web服務(wù)器上的Java代碼，就像Java代碼就在瀏覽器中一樣。DWR包含2個主要部分：（1）一個運(yùn)行在服務(wù)器段的JavaServlet，它處理請求并且向?yàn)g覽器發(fā)送響應(yīng)。（2）運(yùn)行在瀏覽器段的JavaScript，它發(fā)送請求而且還能動態(tài)更新網(wǎng)頁。DWR工作原理是通過動態(tài)把Java類生成為JavaScript。它的代碼就像Ajax一樣，感覺調(diào)用就像發(fā)生在瀏覽器端，但是實(shí)際上代碼調(diào)用發(fā)生在服務(wù)器端，DWR負(fù)責(zé)數(shù)據(jù)的傳遞和轉(zhuǎn)換。這種從Java到JavaScript的遠(yuǎn)程調(diào)用功能的方式使DWR用起來有些像RMI或者SOAP的常規(guī)RPC機(jī)制，而且DWR的優(yōu)點(diǎn)在于不需要任何的網(wǎng)頁瀏覽器插件就能運(yùn)行在網(wǎng)頁上。Java從根本上將是同步機(jī)制，然而Ajax卻是異步的。所以調(diào)用遠(yuǎn)程方法時，當(dāng)數(shù)據(jù)已經(jīng)從網(wǎng)絡(luò)返回的時候，要提供有反調(diào)（callback）功能的DWR。如圖8-11所示。8.2.4Ajax集成技術(shù)：DWR對于程序員來說，現(xiàn)在需278.2.4Ajax集成技術(shù)：DWR圖8-11DWR原理8.2.4Ajax集成技術(shù)：DWR圖8-11DWR原理288.2.4Ajax集成技術(shù)：DWRDWR動態(tài)在JavaScript里生成一個AjaxService類，去匹配服務(wù)器端的代碼。由evenHandler去調(diào)用它。然后DWR處理所有的遠(yuǎn)程細(xì)節(jié)，包括所有的參數(shù)以及返回JavaScript和Java的值。在示例中，現(xiàn)在evenHandler方法里調(diào)用AjaxServie的getOptions()方法，然后通過反調(diào)(callback)方法poplulateList(data)得到返回的數(shù)據(jù)，其中data就是String[]{”1”,”2”,”3”}，最后再使用DWRutility把data加入到下拉列表。習(xí)題1使用Ajax完成更改用戶注冊模塊。8.2.4Ajax集成技術(shù)：DWRDWR動態(tài)在JavaSc29第8章Ajax用戶注冊8.1開發(fā)步驟8.2Ajax入門第8章Ajax用戶注冊8.1開發(fā)步驟8.2Ajax入門30第8章Ajax用戶注冊常見的用戶注冊是用戶輸入用戶名，后臺程序檢測數(shù)據(jù)庫中用戶名是否重復(fù)而作出注冊的成功和失敗的提示。這樣操作，對于用戶來說不方便。一個好的用戶體驗(yàn)應(yīng)該是：當(dāng)用戶輸入完注冊用戶名后，Web系統(tǒng)能即時檢查并顯示，并在檢查和顯示的同時不影響當(dāng)前頁面的操作。這就是“異步獲取數(shù)據(jù)”的要求，而這是Ajax能夠完成的。本章將通過Ajax技術(shù)對用戶注冊模塊進(jìn)行修改。效果如圖8-1所示。圖8-1Ajax用戶注冊第8章Ajax用戶注冊常見的用戶注冊是用戶輸入用戶名，后臺318.1開發(fā)步驟開發(fā)的步驟:(1)配置DWR步驟1：下載裝載dwr.jar步驟2：配置web.xml(2)開發(fā)程序步驟3：DAO步驟4：Service步驟5：JSP步驟6：配置dwr.xml具體操作如下:● 步驟1下載dwr.jar文件從http://getahead.ltd.nk/dwr下載dwr.jar(版本為2),加入dwr.jar到bookstore工程中● 步驟2配置web.xml配置web.xml，代碼如下：8.1開發(fā)步驟開發(fā)的步驟:328.1開發(fā)步驟● 步驟3DAO本層主要的類是IUserDAO，接口的exitUser方法定義是否已經(jīng)存在這個用戶。UserDAO實(shí)現(xiàn)這個方法。如圖8-2所示。圖8-2DAO主要類圖8.1開發(fā)步驟● 步驟3DAO圖8-2DAO主要類圖338.1開發(fā)步驟文件在項(xiàng)目中的位置如圖8-3所示。圖8-3文件在項(xiàng)目中的位置8.1開發(fā)步驟文件在項(xiàng)目中的位置如圖8-3所示。圖8-3348.1開發(fā)步驟IUserDAO.java代碼如下：packageorg.apex.bookstore.dao;importorg.apex.bookstore.vo.User;publicinterfaceIUserDAO{ publicvoidsaveUser(Useruser); publicUservalidateUser(Stringusername,Stringpassword);

publicbooleanexitUser(Stringusername);}UserDAO.java代碼如下：8.1開發(fā)步驟IUserDAO.java代碼如下：358.1開發(fā)步驟● 步驟4：ServiceService層主要的類為IUserService接口，定義了exitUser()方法，用于驗(yàn)證是否已經(jīng)存在這個用戶。UserService實(shí)現(xiàn)了這個接口。如圖8-4所示。圖8-4Service主要接口8.1開發(fā)步驟● 步驟4：Service圖8-4Serv368.1開發(fā)步驟文件在項(xiàng)目中的位置如圖8-5所示。圖8-5文件在工程中的位置8.1開發(fā)步驟文件在項(xiàng)目中的位置如圖8-5所示。圖8-378.1開發(fā)步驟IUserService.java代碼如下：packageorg.apex.bookstore.service;importorg.apex.bookstore.vo.User;publicinterfaceIUserService{ publicvoidsaveUser(Useruser); publicUservalidateUser(Stringusername,Stringpassword);

publicbooleanexitUser(Stringusername);}UserService.java代碼如下：packageorg.apex.bookstore.service.impl;importorg.apex.bookstore.dao.IUserDAO;importorg.apex.bookstore.service.IUserService;importorg.apex.bookstore.vo.User;publicclassUserServiceimplementsIUserService{ privateIUserDAOuserDAO;8.1開發(fā)步驟IUserService.java代碼如下：388.1開發(fā)步驟 publicIUserDAOgetUserDAO(){ returnuserDAO; } publicvoidsetUserDAO(IUserDAOuserDAO){ this.userDAO=userDAO; }

publicvoidsaveUser(Useruser){ this.userDAO.saveUser(user); } publicUservalidateUser(Stringusername,Stringpassword){ returnuserDAO.validateUser(username,password); }

publicbooleanexitUser(Stringusername){ returnuserDAO.exitUser(username); }}8.1開發(fā)步驟 publicIUserDAOgetUs398.1開發(fā)步驟● 步驟5JSP修改register.jsp注冊頁面，文件在項(xiàng)目中的位置如圖8-6所示。圖8-6文件在工程中的位置8.1開發(fā)步驟● 步驟5JSP圖8-6文件在工程中的位408.1開發(fā)步驟register.jsp代碼如下：<%@pagecontentType="text/html;charset=gb2312"%><%@taglibprefix="s"uri="/struts-tags"%><html><head>

<scripttype="text/javascript"src="dwr/engine.js"></script><scripttype="text/javascript"src="dwr/util.js"></script><scripttype="text/javascript"src="dwr/interface/UserDAOAjax.js"></script><title>用戶注冊</title></head>

<scripttype="text/javascript"> functionshow(boolean){if(boolean){Alter(“用戶已經(jīng)存在!”);}}functionvalidate(){varname=form1.username.value;UserDAOAjax.exitUser(name,show);8.1開發(fā)步驟register.jsp代碼如下：418.1開發(fā)步驟

}</script>

<bodyonload="init()"><formaction="register.action"name="form1"><tableid="table1"border="0"><tr><td>用戶名:<inputtype="text"name="username"onchange="validate()"/></td><tdid="error"><fontcolor="red">用戶名已被注冊</td></tr><tr><td>密碼:<inputtype="text"name="password"/></td></tr>…</table></form></body></html>8.1開發(fā)步驟}428.1開發(fā)步驟● 步驟6配置dwr.xmldwr.xml在項(xiàng)目中的位置如圖8-7所示。圖8-7dwr配置文件的位置8.1開發(fā)步驟● 步驟6配置dwr.xml圖8-7dw438.1開發(fā)步驟<!DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting1.0//EN""http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr><allow><!—定義dwr可以創(chuàng)建和轉(zhuǎn)換的類--><createjavascript="UserDAOAjax"creator="spring"><paramname="beanName"value="userService"></param><includemethod=”exitUser”/></create></allow></dwr>8.1開發(fā)步驟<!DOCTYPEdwrPUBLIC448.1開發(fā)步驟creator屬性是必須的,它用來指定使用哪種創(chuàng)造器默認(rèn)情況下,有8種創(chuàng)造器.它們是：● new:用Java的new關(guān)鍵字創(chuàng)造對象● none:不創(chuàng)建對象● scripted:通過BSF使用腳本語言創(chuàng)建對象● spring:通過Spring框架訪問Bean● jsf:使用JSF的Bean● struts:使用Struts的FormBean● pageflow:訪問Beehive或Weblogic的PageFlow● javascript屬性:用于指定瀏覽器中這個被創(chuàng)造出來的對象的名稱.● param元素:指定創(chuàng)造器的其他參數(shù),每種構(gòu)造器各有不同.例如,”new”構(gòu)造器需要知道創(chuàng)建的對象是什么類型.每個創(chuàng)造器的參數(shù)在各自的文檔中能找到8.1開發(fā)步驟creator屬性是必須的,它用來指定使用哪458.2Ajax入門8.2.1AsynchronouseJavaScript+XMLAjax這個名詞由JesseJamesGarrett提出,在他發(fā)表的Ajax：ANewApproachtoWebApplications這篇文章中談到GoogleSuggest與GoolgeMaps所使用到的技術(shù)，是他們在AdaptivePath中稱之為Ajax的新方法。在文章中，Ajax是AsynchronousJavaScript+XML的簡稱，指出了Ajax的核心觀念（Asynchronous）與所用到的主要兩個技術(shù)（JavaScript，XML）。Asynchronous為非同步，要了解Ajax，需要先了解為何要非同步。現(xiàn)在許多應(yīng)用程序都是在Web上建立的。但是，Web卻也成為限制Web應(yīng)用程序發(fā)展的因素。限制的原因來自于網(wǎng)絡(luò)延遲的不確定性，網(wǎng)絡(luò)連接是耗費(fèi)資源的行為，程序必須序列化，通訊協(xié)議溝通，路由傳輸?shù)葎幼鳌＿@些動作都很浪費(fèi)時間和資源。Web應(yīng)用程序中，通常通過表單進(jìn)行資料提交，在同步的情況下，使用者發(fā)送表單之后，就只能等待服務(wù)器回應(yīng)，在這段時間內(nèi)，使用者無法作進(jìn)一步的操作。如圖8-8所示。8.2Ajax入門8.2.1Asynchronouse468.2.1AsynchronouseJavaScript+XML序列化通訊協(xié)議實(shí)體傳送通訊協(xié)議序列化圖8-8同步技術(shù)8.2.1AsynchronouseJavaScript478.2.1AsynchronouseJavaScript+XML圖8-9非同步技術(shù)8.2.1AsynchronouseJavaScript488.2.2XMLHttpRequest在Ajax應(yīng)用程序中，如果是Mozilla/Firefox/Safari中，可以通過XMLHttpRequest來發(fā)送非同步請求，如果在IE6或者之前的版本，則是使用ActiveXObject來發(fā)送非同步請求，為了各個不同瀏覽器的兼容性，必須進(jìn)行測試取得XMLHttpRequest或ActiveXObjeect，例如。varxmlHttp;functioncreateXMLHttpRequest(){if(window.XMLHttpRequest){//如果可以取得XMLHttpRequestxmlHttp=newXMLHttpRequest();//Mozilla,Firefox,Safari}elseif(window.ActiveXObject){//如果可以取得ActiveXOjectxmlHttp=newActiveXObject(“Microsoft.XMLHTTP”);//InternetExploerer}}8.2.2XMLHttpRequest在Ajax應(yīng)用程序498.2.2XMLHttpRequest在建立XMLHttpRequest之后，則可以使用以下幾種方法：● voidopen()開啟對服務(wù)器的連接● voidsend()對服務(wù)器傳送請求● voidsetRequestHeader()為HTTP請求設(shè)定一個給定的header設(shè)定值● voidabort()用來中斷請求● stringgetAllReponseHeaders()傳回一個字串● stringgetResponseHeaders():傳回一個字串一個基本的Ajax請求可以是以下片段：

functionstartRequest(){ createXMLHttpRequest();//建立非同步請求組件 xmlHttp.onreadystatechange=handleStateChange;//設(shè)定callback函數(shù) xmlHttp.open();//開啟連接 xmlHttp.send(null);//傳送請求}functionhandleStateChange(){//在這里處理非同步回應(yīng) …}8.2.2XMLHttpRequest在建立XMLHtt508.2.2XMLHttpRequest在Web應(yīng)用中，通常通過FORM提交或者連接請求的方式與服務(wù)器交互，這種方式總有一個請求和相應(yīng)的過程，這個過程總是要刷新頁面，既浪費(fèi)網(wǎng)絡(luò)帶寬資源又影響用戶體驗(yàn)。在很多場合需要不斷刷新頁面，比如需要連續(xù)多次提交請求，這種刷新會嚴(yán)重影響用戶的感受。有沒有一種方法不刷新頁面而完成數(shù)據(jù)提交或者數(shù)據(jù)請求呢？Ajax技術(shù)就是解決這個問題的答案。Ajax使Web應(yīng)用看上去好像傳統(tǒng)窗口應(yīng)用軟件那樣立即響應(yīng)，沒有提交，等待，刷新的過程。Ajax是利用瀏覽器與服務(wù)器之間的一個通道來“暗中”完成數(shù)據(jù)提交或者請求的。具體的方法是頁面的腳本程序通過瀏覽器提供的空間完成數(shù)據(jù)的提交和請求，并將返回的數(shù)據(jù)由JavaScript處理后展現(xiàn)到頁面上。整個過程是由瀏覽器，JavaScript、HTML共同完成。Ajax是這樣一組技術(shù)的總稱。不同的瀏覽器對Ajax有不同的支持方法，而對于Web服務(wù)器來說沒有任何變化，因?yàn)闉g覽器和服務(wù)器之間的這個隧道依然是基于HTTP請求和響應(yīng)的，瀏覽器正常的請求和Ajax請求對于Web服務(wù)器來說沒有任何區(qū)別。圖8-10說明了Ajax的請求和響應(yīng)過程。8.2.2XMLHttpRequest在Web應(yīng)用中，通518.2.2XMLHttpRequestXMLHTTP對象網(wǎng)頁JavaScriptURL1521423瀏覽器服務(wù)器圖8-10Ajax的請求和響應(yīng)過程8.2.2XMLHttpRequestXMLHTTP網(wǎng)頁528.2.2XMLHttpRequestAjax的請求和響應(yīng)過程：（1）網(wǎng)頁調(diào)用JavaScript程序（2）JavaScript利用瀏覽器提供的XMLHTTP對象向Web服務(wù)器發(fā)送請求。（3）請求的URL資源處理后返回結(jié)果給瀏覽器的XMLHTTP對象。（4）XMLHTTP對象調(diào)用實(shí)現(xiàn)設(shè)置的處理方法。（5）JavaScript方法解析返回的數(shù)據(jù),利用返回的數(shù)據(jù)更新頁面。創(chuàng)建的對象是什么類型，每個創(chuàng)造器的參數(shù)在各自的文檔中能找到。8.2.2XMLHttpRequestAjax的請求和響538.2.3基于Ajax的用戶注冊實(shí)例用戶填寫注冊信息時，在不提交到服務(wù)器的情況下，判斷用戶名是否被注冊并告之用戶。Ajax的無刷新機(jī)制使得注冊系統(tǒng)中對于注冊名稱能即時顯示，如果用戶名已經(jīng)存在，則即使通知用戶更換名稱。常見的用戶注冊是用戶輸入用戶名，后臺程序檢測數(shù)據(jù)庫中用戶名是否重復(fù)而做出注冊的成功和失敗的提示。這樣操作，對于用戶來說是不方便的。一個好的用戶體驗(yàn)應(yīng)該是：當(dāng)用戶輸入完注冊用戶名后，Web系統(tǒng)能即時檢查并顯示，并在檢查和顯示的同時不影響當(dāng)前頁面的操作。這就是“異步獲取數(shù)據(jù)”的要求，而這是Ajax能夠完成的。首先定義XMLHttp對象varxmlHttp=false;xmlHttp=newA

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論