SSH整合AJAX驗(yàn)證用戶名存在和驗(yàn)證碼的完整實(shí)例

1、.SSH整合AJAX驗(yàn)證用戶名存在和驗(yàn)證碼的完整實(shí)例一（含代碼）AJAX學(xué)習(xí)筆記SSH三大框架如何整合，在我前幾篇博文中已經(jīng)很詳細(xì)的介紹了，如果還有什么問(wèn)題的，請(qǐng)查看我的博文Struts+Spring+Hibernate整合注冊(cè)登錄,謝謝。那么現(xiàn)在就詳細(xì)地介紹一下AJAX了。AJAX自己也是最近才學(xué)了一點(diǎn)，里面的一些框架或者知識(shí)只是略懂一些，寫(xiě)的不好請(qǐng)大家原諒。下面是一個(gè)簡(jiǎn)單的使用AJAX進(jìn)行驗(yàn)證用戶名的，一般AJAX給人感覺(jué)的好處就是異步進(jìn)行交互，讓我們感覺(jué)頁(yè)面并沒(méi)有其他的動(dòng)作（刷新），還有一個(gè)我感覺(jué)就是屏蔽了以前很惱人的alert彈出框了（這種驗(yàn)證在以前真的很多），讓我們感覺(jué)頁(yè)面做的更友好

2、了，交互性更能跟上現(xiàn)在的web應(yīng)用。有人會(huì)說(shuō)，Struts中不是有服務(wù)器端驗(yàn)證碼，而且給人的交互也是很好的，那為什么還需要AJAX進(jìn)行驗(yàn)證了？以我的經(jīng)驗(yàn)和愛(ài)好的話說(shuō)，我覺(jué)得服務(wù)器端和客戶端的驗(yàn)證都必須要，這個(gè)有的時(shí)候是為了防止別人進(jìn)行惡意的網(wǎng)址注入，也許現(xiàn)在我們做了更完善的驗(yàn)證的話，以后我們的網(wǎng)站就少了很多不必要的惡意破壞。好了，現(xiàn)在就來(lái)說(shuō)說(shuō)下面的AJAX技術(shù)了，下面的例1，是一個(gè)很簡(jiǎn)單用戶名驗(yàn)證存在的驗(yàn)證js和Servlet，實(shí)際上是沒(méi)有技術(shù)含量的，其中返回的數(shù)據(jù)就可能有兩種了，一種以html的格式，另一種就是xml了，例1給的是html格式的，xml的格式的代碼就不貼了，說(shuō)一下了。有兩個(gè)修

3、改點(diǎn)了，修改點(diǎn)1-響應(yīng)的Content-Type必須是text/xml httpServletResponse.setContentType("text/xml;charset=utf-8");修改點(diǎn)2-返回的數(shù)據(jù)需要拼裝成xml格式PrintWriter out = httpServletResponse.getWriter();String old = httpServletRequest.getParameter("name");/修改點(diǎn)2-返回的數(shù)據(jù)需要拼裝成xml格式StringBuilder builder = new StringBuild

4、er();builder.append("<message>"); builder.append("</message>");out.println(builder.toString();后面就是接收方法了，實(shí)際上也沒(méi)有太大區(qū)別，就是接收的是xml語(yǔ)句，我們需要解析后就可以一樣使用了。（具體實(shí)現(xiàn)請(qǐng)參考網(wǎng)上提供的教程或者我提供下載的代碼）/例1：簡(jiǎn)單的使用AJAX，返回的數(shù)據(jù)是html/定義用戶名校驗(yàn)的方法function verify() /首先測(cè)試一下頁(yè)面的按鈕按下，可以調(diào)用這個(gè)方法 /使用javascript的alert方法，

5、顯示一個(gè)探出提示框 /alert("按鈕被點(diǎn)擊了！"); /1.獲取文本框中的內(nèi)容 /document.getElementById("userName"); dom的方式 /Jquery的查找節(jié)點(diǎn)的方式，參數(shù)中#加上id屬性值可以找到一個(gè)節(jié)點(diǎn)。 /jquery的方法返回的都是jquery的對(duì)象，可以繼續(xù)在上面執(zhí)行其他的jquery方法 var jqueryObj = $("#userName"); /獲取節(jié)點(diǎn)的值 var userName = jqueryObj.val(); /alert(userName); /2.將文本框中的數(shù)

6、據(jù)發(fā)送給服務(wù)器段的servelt /使用jquery的XMLHTTPrequest對(duì)象get請(qǐng)求的封裝 $.get("AJAXServer?name=" + userName,null,callback);/回調(diào)函數(shù)function callback(data) / alert("服務(wù)器段的數(shù)據(jù)回來(lái)了！"); /3.接收服務(wù)器端返回的數(shù)據(jù)/ alert(data); /4.將服務(wù)器段返回的數(shù)據(jù)動(dòng)態(tài)的顯示在頁(yè)面上 /找到保存結(jié)果信息的節(jié)點(diǎn) var resultObj = $("#result"); /動(dòng)態(tài)的改變頁(yè)面中div節(jié)點(diǎn)中的內(nèi)容r

7、esultObj.html(data);import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;import java.io.PrintWriter;import .URLDecoder;/* *Servlet，用于驗(yàn)證用戶名的*/public class AJAXS

8、erver extends HttpServlet protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException doGet(httpServletRequest, httpServletResponse); protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpSer

9、vletResponse) throws ServletException, IOException try/ request.setCharacterEncoding("UTF-8");/ response.setContentType("text/html;charset=gb18030"); httpServletResponse.setContentType("text/html;charset=utf-8"); PrintWriter out = httpServletResponse.getWriter(); Intege

10、r inte = (Integer) httpServletRequest.getSession().getAttribute("total"); int temp = 0; if (inte = null) temp = 1; else temp = Value() + 1; httpServletRequest.getSession().setAttribute("total",temp); /1.取參數(shù) String old = httpServletRequest.getParameter("name"); /

11、String name = new String(old.getBytes("iso8859-1"),"UTF-8"); String name = URLDecoder.decode(old,"UTF-8"); /2.檢查參數(shù)是否有問(wèn)題 if(old = null | old.length() = 0) out.println("用戶名不能為空"); else/ String name = URLDecoder.decode(old,"UTF-8");/ byte by = old.getBy

12、tes("ISO8859-1");/ String name = new String(by,"utf-8");/ String name = URLDecoder.decode(old,"utf-8"); /3.校驗(yàn)操作/ String name = old; if(name.equals("wangxingkui") /4。和傳統(tǒng)應(yīng)用不同之處。這一步需要將用戶感興趣的數(shù)據(jù)返回給頁(yè)面段，而不是將一個(gè)新的頁(yè)面發(fā)送給用戶 /寫(xiě)法沒(méi)有變化，本質(zhì)發(fā)生了改變 out.println("用戶名" + na

13、me + "已經(jīng)存在，請(qǐng)使用其他用戶名, " + temp); else out.println("用戶名" + name + "尚未存在，可以使用該用戶名注冊(cè), " + temp); catch(Exception e) e.printStackTrace(); AJAX還有一個(gè)比較重要那就是XMLHttpRequest。下面給出例2. 使用XMLHttpRequest進(jìn)行用戶名驗(yàn)證，其中xmlHttpRequest考慮了多中瀏覽器的兼容問(wèn)題。這些一般也就是一個(gè)套路了，以后也就沒(méi)有必要再寫(xiě)創(chuàng)建XMLHttpRequest對(duì)象的代碼了

14、，這些都可以進(jìn)行復(fù)用（軟件工程的思想）后面實(shí)際上也要考慮Servlet傳回來(lái)的數(shù)據(jù)的類型（html的文本格式還是xml格式的），這里就不再詳述了。/例2.使用XMLHttpRequest進(jìn)行用戶名驗(yàn)證/用戶名校驗(yàn)的方法/這個(gè)方法將使用XMLHTTPRequest對(duì)象來(lái)進(jìn)行AJAX的異步數(shù)據(jù)交互var xmlhttp;function verify() /0。使用dom的方式獲取文本框中的值 /document.getElementById("userName")是dom中獲取元素節(jié)點(diǎn)的一種方法，一個(gè)元素節(jié)點(diǎn)對(duì)應(yīng)HTML頁(yè)面中的一個(gè)標(biāo)簽，如果<input> /。v

15、alue可以獲取一個(gè)元素節(jié)點(diǎn)的value屬性值 var userName = document.getElementById("userName").value; /1.創(chuàng)建XMLHttpRequest對(duì)象 /這是XMLHttpReuquest對(duì)象無(wú)部使用中最復(fù)雜的一步 /需要針對(duì)IE和其他類型的瀏覽器建立這個(gè)對(duì)象的不同方式寫(xiě)不同的代碼 if (window.XMLHttpRequest) /針對(duì)FireFox，Mozillar，Opera，Safari，IE7，IE8 xmlhttp = new XMLHttpRequest(); /針對(duì)某些特定版本的mozillar瀏覽

16、器的BUG進(jìn)行修正 if (xmlhttp.overrideMimeType) xmlhttp.overrideMimeType("text/xml"); else if (window.ActiveXObject) /針對(duì)IE6，IE5.5，IE5 /兩個(gè)可以用于創(chuàng)建XMLHTTPRequest對(duì)象的控件名稱，保存在一個(gè)js的數(shù)組中 /排在前面的版本較新 var activexName = "MSXML2.XMLHTTP","Microsoft.XMLHTTP" for (var i = 0; i < activexName.

17、length; i+) try /取出一個(gè)控件名進(jìn)行創(chuàng)建，如果創(chuàng)建成功就終止循環(huán) /如果創(chuàng)建失敗，回拋出異常，然后可以繼續(xù)循環(huán)，繼續(xù)嘗試創(chuàng)建 xmlhttp = new ActiveXObject(activexNamei); break; catch(e) /確認(rèn)XMLHTtpRequest對(duì)象創(chuàng)建成功 if (!xmlhttp) alert("XMLHttpRequest對(duì)象創(chuàng)建失敗!"); return; else alert(xmlhttp.readyState); /2.注冊(cè)回調(diào)函數(shù) /注冊(cè)回調(diào)函數(shù)時(shí)，之需要函數(shù)名，不要加括號(hào) /我們需要將函數(shù)名注冊(cè)，如果加上括號(hào)

18、，就會(huì)把函數(shù)的返回值注冊(cè)上，這是錯(cuò)誤的 xmlhttp.onreadystatechange = callback; /3。設(shè)置連接信息 /第一個(gè)參數(shù)表示http的請(qǐng)求方式，支持所有http的請(qǐng)求方式，主要使用get和post /第二個(gè)參數(shù)表示請(qǐng)求的url地址，get方式請(qǐng)求的參數(shù)也在url中 /第三個(gè)參數(shù)表示采用異步還是同步方式交互，true表示異步 xmlhttp.open("GET","AJAXServer?name="+ userName,true); /POST方式請(qǐng)求的代碼 /xmlhttp.open("POST",&qu

19、ot;AJAXServer",true); /POST方式需要自己設(shè)置http的請(qǐng)求頭 /xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); /POST方式發(fā)送數(shù)據(jù) /xmlhttp.send("name=" + userName); /4.發(fā)送數(shù)據(jù)，開(kāi)始和服務(wù)器端進(jìn)行交互 /同步方式下，send這句話會(huì)在服務(wù)器段數(shù)據(jù)回來(lái)后才執(zhí)行完 /異步方式下，send這句話會(huì)立即完成執(zhí)行 xmlhttp.send(null);/回調(diào)函

20、數(shù)function callback() /alert(xmlhttp.readyState); /5。接收響應(yīng)數(shù)據(jù) /判斷對(duì)象的狀態(tài)是交互完成 if (xmlhttp.readyState = 4) /判斷http的交互是否成功 if (xmlhttp.status = 200) /獲取服務(wù)漆器端返回的數(shù)據(jù) /獲取服務(wù)器段輸出的純文本數(shù)據(jù) var responseText = xmlhttp.responseText; /將數(shù)據(jù)顯示在頁(yè)面上 /通過(guò)dom的方式找到div標(biāo)簽所對(duì)應(yīng)的元素節(jié)點(diǎn) var divNode = document.getElementById("result&

21、quot;); /設(shè)置元素節(jié)點(diǎn)中的html內(nèi)容 divNode.innerHTML = responseText; else alert("出錯(cuò)了！"); 上面的都是AJAX的一些知識(shí)，本想后面就介紹如何使用AJAX整合SSH進(jìn)行用戶名（數(shù)據(jù)庫(kù)中取得）存在和驗(yàn)證碼的例子，但介于博文字?jǐn)?shù)的限制，就留到下一篇博文中了，請(qǐng)閱讀下一篇博文 SSH整合AJAX驗(yàn)證用戶名存在和驗(yàn)證碼的完整實(shí)例二 ，不好意思。本博文提供下載：博文的word原稿，AJAX使用的代碼，AJAX + SSH 進(jìn)行用戶名（數(shù)據(jù)庫(kù)中取得）存在和驗(yàn)證碼的代碼。如果有什么問(wèn)題和好的建議請(qǐng)與木子（QQ：50681749

22、3）。木子寫(xiě)于2009年8月7日附源碼下載：博文的word原稿AJAX使用的代碼AJAX + SSH 進(jìn)行用戶名（數(shù)據(jù)庫(kù)中取得）存在和驗(yàn)證碼的代碼SSH整合AJAX驗(yàn)證用戶名存在和驗(yàn)證碼的完整實(shí)例二（含代碼）AJAX學(xué)習(xí)筆記在上一篇博文（SSH整合AJAX驗(yàn)證用戶名存在和驗(yàn)證碼的完整實(shí)例一）中介紹了AJAX的一些技術(shù)問(wèn)題，現(xiàn)在就來(lái)我們的實(shí)例：SSH整合AJAX驗(yàn)證用戶名存在和驗(yàn)證碼的完整實(shí)例了。先介紹這個(gè)實(shí)例中我遇到的問(wèn)題1. 用戶名是從數(shù)據(jù)庫(kù)中取得的，但是進(jìn)行驗(yàn)證用戶名是否存在的是個(gè)Servlet，這個(gè)時(shí)候就會(huì)想到在這個(gè)Servlet里建立一個(gè)Dao的對(duì)象對(duì)數(shù)據(jù)庫(kù)的操作，而SSH整合的時(shí)候S

23、pring對(duì)Servlet注入對(duì)象的機(jī)制是不一樣的。具體的情查看我寫(xiě)的博文：特殊情況（ActionForm，Servlet， Filter， Listener）下Spring如何注入對(duì)象現(xiàn)在介紹一下再Servlet里如何通過(guò)Spring注入對(duì)象使用Servlet進(jìn)行驗(yàn)證，這種思路很適合AJAX驗(yàn)證的思路，不過(guò)問(wèn)題出現(xiàn)了，還是空指針異常，Spring注入的對(duì)象根本沒(méi)有實(shí)例化。一開(kāi)始還以為和Servlet的生命周期有點(diǎn)關(guān)系，后來(lái)在網(wǎng)上搜了一些東西，還是感覺(jué)可以通過(guò)Spring進(jìn)行注入的。下面介紹在Servlet（或者Filter，或者Listener）中使用spring的IOC容器默認(rèn)情況下Ser

24、vlet容器創(chuàng)建spring容器對(duì)象，注入到servletContext中，servletContext對(duì)象又是注入到session對(duì)象中，session對(duì)象又是注入到request對(duì)象中，request對(duì)象又是注入到servlet對(duì)象中，（其實(shí)不是很標(biāo)準(zhǔn)的注入，是傳參數(shù)，或者對(duì)屬性直接付值）。層層依賴可以得到spring容器對(duì)象。ServletContext   servletContext   =   request.getSession().getServletContext();          

25、0;ApplicationContext   ctx   =   WebApplicationContextUtils.getWebApplicationContext(servletContext   ); UsersManager   um   =   (UsersManager)ctx.getBean( "UserManager");2. 驗(yàn)證碼如何生成驗(yàn)證碼的生成網(wǎng)上的代碼比較多了，有js生成的還有Servlet生成的，在本例中我使用了Servlet生成的一個(gè)驗(yàn)證碼。生成驗(yàn)證碼不難，但難

26、的是如何進(jìn)行驗(yàn)證碼的驗(yàn)證了，一般人想到的在生產(chǎn)驗(yàn)證碼的Servlet中把生成的驗(yàn)證碼加到session中，在通過(guò)jsp的判斷，一開(kāi)始我也是這樣寫(xiě)的，不過(guò)后來(lái)就有問(wèn)題了，什么問(wèn)題了？那就是Javascript獲取的驗(yàn)證碼和生成的驗(yàn)證碼不同的？session中的總是前一個(gè)顯示的驗(yàn)證碼？也就是jsp獲取的驗(yàn)證碼總是比Servlet中獲得的驗(yàn)證碼慢一拍了，在網(wǎng)上搜了很多竟然沒(méi)有完整的驗(yàn)證碼驗(yàn)證的實(shí)例，這應(yīng)該是我寫(xiě)這篇博文的一個(gè)原因吧（希望對(duì)大家有幫助）網(wǎng)上的這個(gè)問(wèn)題的解答大致是這樣的，一個(gè)就是說(shuō)這個(gè)是加載機(jī)制的問(wèn)題，jsp是在Servlet前面進(jìn)行的加載，所以說(shuō)雖然生成圖片的Servlet寫(xiě)人了session，不過(guò)jsp總是慢一拍