Java ee 企業(yè)應(yīng)用開發(fā)：第8章 Ajax用戶注冊

1、第8章 AJAX用戶注冊8.1 開發(fā)步驟8.2 Ajax入門 第8章 AJAX用戶注冊常見的用戶注冊是用戶輸入用戶名，后臺程序檢測數(shù)據(jù)庫中用戶名是否重復(fù)而作出注冊的成功和失敗的提示。這樣操作，對于用戶來說不方便。一個好的用戶體驗應(yīng)該是：當(dāng)用戶輸入完注冊用戶名后，Web系統(tǒng)能即時檢查并顯示，并在檢查和顯示的同時不影響當(dāng)前頁面的操作。這就是“異步獲取數(shù)據(jù)”的要求，而這是Ajax能夠完成的。本章將通過Ajax技術(shù)對用戶注冊模塊進(jìn)行修改。效果如圖8-1所示。圖8-1 Ajax用戶注冊8.1 開發(fā)步驟 開發(fā)的步驟:(1) 配置DWR步驟1：下載裝載dwr.jar步驟2：配置web.xml(2) 開發(fā)程序

2、步驟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ā)步驟步驟3 DAO本層主要的類是IUserDAO，接口的exitUser方法定義是否已經(jīng)存在這個用戶。UserDAO實現(xiàn)這個方法。如圖8-2所示。圖8-2 DAO主要類圖8.1 開發(fā)步驟文件在項目中的位置如圖8-3所示。圖8-3 文件在項目中的位置8.1 開發(fā)步驟IUserDAO.j

3、ava代碼如下：package org.apex.bookstore.dao;import org.apex.bookstore.vo.User;public interface IUserDAO public void saveUser(User user); public User validateUser(String username,String password); public boolean exitUser(String username);UserDAO.java代碼如下：8.1 開發(fā)步驟步驟4：ServiceService層主要的類為IUserService接口，定義了e

4、xitUser()方法，用于驗證是否已經(jīng)存在這個用戶。UserService實現(xiàn)了這個接口。如圖8-4所示。圖8-4 Service主要接口8.1 開發(fā)步驟 文件在項目中的位置如圖8-5所示。圖8-5 文件在工程中的位置8.1 開發(fā)步驟IUserService.java代碼如下：package org.apex.bookstore.service;import org.apex.bookstore.vo.User;public interface IUserService public void saveUser(User user); public User validateUser(Str

5、ing username,String password); public boolean exitUser(String username);UserService.java代碼如下：package org.apex.bookstore.service.impl;import org.apex.bookstore.dao.IUserDAO;import org.apex.bookstore.service.IUserService;import org.apex.bookstore.vo.User;public class UserService implements IUserServic

6、e private IUserDAO userDAO;8.1 開發(fā)步驟public IUserDAO getUserDAO() return userDAO;public void setUserDAO(IUserDAO userDAO) this.userDAO=userDAO;public void saveUser(User user) this.userDAO.saveUser(user);public User validateUser(String username,String password) return userDAO.validateUser(username, pas

7、sword);public boolean exitUser(String username) return userDAO.exitUser(username);8.1 開發(fā)步驟步驟5 JSP修改register.jsp注冊頁面，文件在項目中的位置如圖8-6所示。圖8-6 文件在工程中的位置8.1 開發(fā)步驟register.jsp代碼如下： 用戶注冊 function show(boolean) if(boolean) Alter(“用戶已經(jīng)存在!”); function validate() var name=form1.username.value; UserDAOAjax.exitUs

8、er(name,show);8.1 開發(fā)步驟 用戶名: 用戶名已被注冊 密碼: 8.1 開發(fā)步驟步驟6 配置dwr.xmldwr.xml在項目中的位置如圖8-7所示。圖8-7 dwr配置文件的位置8.1 開發(fā)步驟 8.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或W

9、eblogic的PageFlow javascript屬性:用于指定瀏覽器中這個被創(chuàng)造出來的對象的名稱. param元素:指定創(chuàng)造器的其他參數(shù),每種構(gòu)造器各有不同.例如,”new”構(gòu)造器需要知道創(chuàng)建的對象是什么類型.每個創(chuàng)造器的參數(shù)在各自的文檔中能找到8.2 AJAX入門8.2.1 Asynchronouse JavaScript+XMLAjax這個名詞由Jesse James Garrett提出,在他發(fā)表的Ajax：A New Approach to Web Applications這篇文章中談到Google Suggest與Goolge Maps所使用到的技術(shù)，是他們在Adaptive P

10、ath中稱之為Ajax的新方法。在文章中，Ajax是Asynchronous JavaScript+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ā)送表單之后，

11、就只能等待服務(wù)器回應(yīng)，在這段時間內(nèi)，使用者無法作進(jìn)一步的操作。如圖8-8所示。8.2.1 ASYNCHRONOUSE JAVASCRIPT+XML序列化通訊協(xié)議實體傳送通訊協(xié)議序列化圖8-8 同步技術(shù)8.2.1 ASYNCHRONOUSE JAVASCRIPT+XML圖8-9 非同步技術(shù)8.2.2 XML HTTPREQUEST在Ajax應(yīng)用程序中，如果是Mozilla/Firefox/Safari中，可以通過XMLHttpRequest來發(fā)送非同步請求，如果在IE 6或者之前的版本，則是使用ActiveXObject來發(fā)送非同步請求，為了各個不同瀏覽器的兼容性，必須進(jìn)行測試取得XMLHttp

12、Request或ActiveXObjeect，例如。var xmlHttp;function createXMLHttpRequest() if(window.XMLHttpRequest)/如果可以取得XMLHttpRequest xmlHttp=new XMLHttpRequest(); /Mozilla,Firefox,Safari else if(window.ActiveXObject)/如果可以取得ActiveXOject xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);/Internet Exploerer 8.2.2 XML HTT

13、PREQUEST在建立XMLHttpRequest之后，則可以使用以下幾種方法： void open() 開啟對服務(wù)器的連接 void send() 對服務(wù)器傳送請求 void setRequestHeader() 為HTTP請求設(shè)定一個給定的header設(shè)定值 void abort()用來中斷請求 string getAllReponseHeaders() 傳回一個字串 string getResponseHeaders():傳回一個字串一個基本的Ajax請求可以是以下片段：function startRequest() createXMLHttpRequest();/建立非同步請求組件 x

14、mlHttp.onreadystatechange=handleStateChange;/設(shè)定callback函數(shù) xmlHttp.open();/開啟連接 xmlHttp.send(null);/傳送請求function handleStateChange()/在這里處理非同步回應(yīng)8.2.2 XML HTTPREQUEST在Web應(yīng)用中，通常通過FORM提交或者連接請求的方式與服務(wù)器交互，這種方式總有一個請求和相應(yīng)的過程，這個過程總是要刷新頁面，既浪費(fèi)網(wǎng)絡(luò)帶寬資源又影響用戶體驗。在很多場合需要不斷刷新頁面，比如需要連續(xù)多次提交請求，這種刷新會嚴(yán)重影響用戶的感受。有沒有一種方法不刷新頁面而完成

15、數(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ù)器來說沒有任何變化，因為瀏覽器和服務(wù)器之間的這個隧道依然是基于HTTP請求和響應(yīng)的，瀏覽器正常的請求和Aj

16、ax請求對于Web服務(wù)器來說沒有任何區(qū)別。圖8-10說明了Ajax的請求和響應(yīng)過程。8.2.2 XML HTTPREQUESTXMLHTTP對象網(wǎng)頁JavaScriptURL152 1423瀏覽器服務(wù)器圖8-10 Ajax的請求和響應(yīng)過程8.2.2 XML HTTPREQUESTAjax的請求和響應(yīng)過程：（1） 網(wǎng)頁調(diào)用JavaScript程序（2）JavaScript利用瀏覽器提供的XMLHTTP對象向Web服務(wù)器發(fā)送請求。（3）請求的URL資源處理后返回結(jié)果給瀏覽器的XMLHTTP對象。（4）XMLHTTP對象調(diào)用實現(xiàn)設(shè)置的處理方法。（5）JavaScript方法解析返回的數(shù)據(jù),利用返回的

17、數(shù)據(jù)更新頁面。創(chuàng)建的對象是什么類型，每個創(chuàng)造器的參數(shù)在各自的文檔中能找到。8.2.3 基于AJAX的用戶注冊實例用戶填寫注冊信息時，在不提交到服務(wù)器的情況下，判斷用戶名是否被注冊并告之用戶。Ajax的無刷新機(jī)制使得注冊系統(tǒng)中對于注冊名稱能即時顯示，如果用戶名已經(jīng)存在，則即使通知用戶更換名稱。常見的用戶注冊是用戶輸入用戶名，后臺程序檢測數(shù)據(jù)庫中用戶名是否重復(fù)而做出注冊的成功和失敗的提示。這樣操作，對于用戶來說是不方便的。一個好的用戶體驗應(yīng)該是：當(dāng)用戶輸入完注冊用戶名后，Web系統(tǒng)能即時檢查并顯示，并在檢查和顯示的同時不影響當(dāng)前頁面的操作。這就是“異步獲取數(shù)據(jù)”的要求，而這是Ajax能夠完成的。首

18、先定義XMLHttp對象var xmlHttp=false;xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);自定義函數(shù)。這個函數(shù)的主要功能是異步獲得cu.jsp的內(nèi)容。在此之前將先提取當(dāng)前頁表單元素”u_name”即用戶名文本框的值，通過cu.jsp其后的參數(shù)即賦值而得到不同的結(jié)果。function callServer() var u_name=document.getElementById(”username”).value;/從網(wǎng)頁得到用戶輸入的用戶名 var url=”cu.jsp?name=”+escape(u_name); xmlHtt

19、p.open(”GET”,url,true); xmlHttp.onreadystatechange=updatePage; xmlHttp.send(null);8.2.3 基于AJAX的用戶注冊實例cu.jsp的主要功能就是接收URL參數(shù)name的值做內(nèi)容顯示，該內(nèi)容最終被t1.html異步獲取。cu.jspnam=request.querystirng(”name”);/獲得name的值/連接數(shù)據(jù)庫查看是否有該用戶, 如果有返回true,如果沒有返回false將異步獲取的信息顯示在當(dāng)前頁。function updatePage() test1.innerHTML=xmlHttp.resp

20、onseText;8.2.4 AJAX集成技術(shù)：DWR 對于程序員來說，現(xiàn)在需要掌握J(rèn)avaScript腳本來操作數(shù)據(jù)。但是，相對于Java、JavaScript語言無論在面向?qū)ο筮€是數(shù)據(jù)操作等方面都很弱。值得高興的是，針對Ajax，在J2EE領(lǐng)域出現(xiàn)不少解決方案，如：DWR、AjaxAnywher JSON-RPC-Java等等。DWR是開源框架，類似于Hibernate。借助于DWR，開發(fā)人員無需具備專業(yè)的javascript知識就可以輕松實現(xiàn)ajax使得ajax更加“平民化”。DWR的工作原理就是通過動態(tài)地把JAVA對象動態(tài)地生成為JavaScript對象，使得客戶端通過腳本就能夠訪問到服務(wù)器對象。DWR大大簡化了編寫ajax的工作量。DWR是一個可以創(chuàng)建AJAX WEB站點的Java開源庫。它可以讓使用者在瀏覽器中的Javascript代碼調(diào)用Web服務(wù)器上的Java代碼，就像Java代碼就在瀏覽器中一樣。D