SSH整合AJAX驗證用戶名存在和驗證碼的完整實例

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

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

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

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

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

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

7、sultObj.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，用于驗證用戶名的*/public class AJAXSe

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

9、letResponse) 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(); Integer

10、 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"); /S

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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