SSH整合AJAX驗(yàn)證用戶名存在和驗(yàn)證碼的完整實(shí)例一（含代碼）
——AJAX學(xué)習(xí)筆記
SSH三大框架如何整合，在我前幾篇博文中已經(jīng)很詳細(xì)的介紹了，如果還有什么問題的，請(qǐng)查看我的博文Struts+Spring+Hibernate整合注冊(cè)登錄,謝謝。
那么現(xiàn)在就詳細(xì)地介紹一下AJAX了。AJAX自己也是最近才學(xué)了一點(diǎn)，里面的一些框架或者知識(shí)只是略懂一些，寫的不好請(qǐng)大家原諒。
下面是一個(gè)簡(jiǎn)單的使用AJAX進(jìn)行驗(yàn)證用戶名的，一般AJAX給人感覺的好處就是異步進(jìn)行交互，讓我們感覺頁(yè)面并沒有其他的動(dòng)作（刷新），還有一個(gè)我感覺就是屏蔽了以前很惱人的alert彈出框了（這種驗(yàn)證在以前真的很多），讓我們感覺頁(yè)面做的更友好了，交互性更能跟上現(xiàn)在的web應(yīng)用。
有人會(huì)說，Struts中不是有服務(wù)器端驗(yàn)證碼，而且給人的交互也是很好的，那為什么還需要AJAX進(jìn)行驗(yàn)證了？以我的經(jīng)驗(yàn)和愛好的話說，我覺得服務(wù)器端和客戶端的驗(yàn)證都必須要，這個(gè)有的時(shí)候是為了防止別人進(jìn)行惡意的網(wǎng)址注入，也許現(xiàn)在我們做了更完善的驗(yàn)證的話，以后我們的網(wǎng)站就少了很多不必要的惡意破壞。
好了，現(xiàn)在就來說說下面的AJAX技術(shù)了，下面的例1，是一個(gè)很簡(jiǎn)單用戶名驗(yàn)證存在的驗(yàn)證js和Servlet，實(shí)際上是沒有技術(shù)含量的，其中返回的數(shù)據(jù)就可能有兩種了，一種以html的格式，另一種就是xml了，例1給的是html格式的，xml的格式的代碼就不貼了，說一下了。有兩個(gè)修改點(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 StringBuilder();
builder.append("<message>");
… …
builder.append("</message>");
out.println(builder.toString());
后面就是接收方法了，實(shí)際上也沒有太大區(qū)別，就是接收的是xml語句，我們需要解析后就可以一樣使用了。（具體實(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方法，顯示一個(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ù)據(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ù)回來了！！");
//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)容
resultObj.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 java.net.URLDecoder;
/**
*Servlet，用于驗(yàn)證用戶名的
*/
public class AJAXServer extends HttpServlet{
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) 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 inte = (Integer) httpServletRequest.getSession().getAttribute("total");
int temp = 0;
if (inte == null) {
temp = 1;
} else {
temp = inte.intValue() + 1;
}
httpServletRequest.getSession().setAttribute("total",temp);
//1.取參數(shù)
String old = httpServletRequest.getParameter("name");
//String 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.getBytes("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ā)送給用戶
//寫法沒有變化，本質(zhì)發(fā)生了改變
out.println("用戶名[" + name + "]已經(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考慮了多中瀏覽器的兼容問題。這些一般也就是一個(gè)套路了，以后也就沒有必要再寫創(chuàng)建XMLHttpRequest對(duì)象的代碼了，這些都可以進(jìn)行復(fù)用（軟件工程的思想）后面實(shí)際上也要考慮Servlet傳回來的數(shù)據(jù)的類型（html的文本格式還是xml格式的），這里就不再詳述了。
//例2.使用XMLHttpRequest進(jìn)行用戶名驗(yàn)證
//用戶名校驗(yàn)的方法
//這個(gè)方法將使用XMLHTTPRequest對(duì)象來進(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>
//。value可以獲取一個(gè)元素節(jié)點(diǎn)的value屬性值
var userName = document.getElementById("userName").value;
//1.創(chuàng)建XMLHttpRequest對(duì)象
//這是XMLHttpReuquest對(duì)象無部使用中最復(fù)雜的一步
//需要針對(duì)IE和其他類型的瀏覽器建立這個(gè)對(duì)象的不同方式寫不同的代碼
if (window.XMLHttpRequest) {
//針對(duì)FireFox，Mozillar，Opera，Safari，IE7，IE8
xmlhttp = new XMLHttpRequest();
//針對(duì)某些特定版本的mozillar瀏覽器的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.length; i++) {
try{
//取出一個(gè)控件名進(jìn)行創(chuàng)建，如果創(chuàng)建成功就終止循環(huán)
//如果創(chuàng)建失敗，回拋出異常，然后可以繼續(xù)循環(huán)，繼續(xù)嘗試創(chuàng)建
xmlhttp = new ActiveXObject(activexName[i]);
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)，就會(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","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ù)，開始和服務(wù)器端進(jìn)行交互
//同步方式下，send這句話會(huì)在服務(wù)器段數(shù)據(jù)回來后才執(zhí)行完
//異步方式下，send這句話會(huì)立即完成執(zhí)行
xmlhttp.send(null);
}
//回調(diào)函數(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è)面上
//通過dom的方式找到div標(biāo)簽所對(duì)應(yīng)的元素節(jié)點(diǎn)
var divNode = document.getElementById("result");
//設(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)證碼的代碼。如果有什么問題和好的建議請(qǐng)與木子（QQ：506817493）。
木子寫于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ù)問題，現(xiàn)在就來我們的實(shí)例：SSH整合AJAX驗(yàn)證用戶名存在和驗(yàn)證碼的完整實(shí)例了。
先介紹這個(gè)實(shí)例中我遇到的問題
1. 用戶名是從數(shù)據(jù)庫(kù)中取得的，但是進(jìn)行驗(yàn)證用戶名是否存在的是個(gè)Servlet，這個(gè)時(shí)候就會(huì)想到在這個(gè)Servlet里建立一個(gè)Dao的對(duì)象對(duì)數(shù)據(jù)庫(kù)的操作，而SSH整合的時(shí)候Spring對(duì)Servlet注入對(duì)象的機(jī)制是不一樣的。具體的情查看我寫的博文：
特殊情況（ActionForm，Servlet， Filter， Listener）下Spring如何注入對(duì)象
現(xiàn)在介紹一下再Servlet里如何通過Spring注入對(duì)象
使用Servlet進(jìn)行驗(yàn)證，這種思路很適合AJAX驗(yàn)證的思路，不過問題出現(xiàn)了，還是空指針異常，Spring注入的對(duì)象根本沒有實(shí)例化。一開始還以為和Servlet的生命周期有點(diǎn)關(guān)系，后來在網(wǎng)上搜了一些東西，還是感覺可以通過Spring進(jìn)行注入的。
下面介紹在Servlet（或者Filter，或者Listener）中使用spring的IOC容器默認(rèn)情況下Servlet容器創(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();
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)證碼不難，但難的是如何進(jìn)行驗(yàn)證碼的驗(yàn)證了，一般人想到的在生產(chǎn)驗(yàn)證碼的Servlet中把生成的驗(yàn)證碼加到session中，在通過jsp的判斷，一開始我也是這樣寫的，不過后來就有問題了，什么問題了？那就是Javascript獲取的驗(yàn)證碼和生成的驗(yàn)證碼不同的？session中的總是前一個(gè)顯示的驗(yàn)證碼？也就是jsp獲取的驗(yàn)證碼總是比Servlet中獲得的驗(yàn)證碼慢一拍了，在網(wǎng)上搜了很多竟然沒有完整的驗(yàn)證碼驗(yàn)證的實(shí)例，這應(yīng)該是我寫這篇博文的一個(gè)原因吧（希望對(duì)大家有幫助）
網(wǎng)上的這個(gè)問題的解答大致是這樣的，一個(gè)就是說這個(gè)是加載機(jī)制的問題，jsp是在Servlet前面進(jìn)行的加載，所以說雖然生成圖片的Servlet寫人了session，不過jsp總是慢一拍了。
另一個(gè)就是建議我們使用AJAX進(jìn)行了。這個(gè)也是我實(shí)現(xiàn)的，不過網(wǎng)上并沒有太多的代碼供我們參考，我也就在用戶名驗(yàn)證的基礎(chǔ)上加了一個(gè)驗(yàn)證碼的驗(yàn)證了。測(cè)試通過是可以。
3. 在Servlet中驗(yàn)證的時(shí)候，會(huì)出現(xiàn)對(duì)多個(gè)字段的驗(yàn)證，象在我的這個(gè)例子中就有兩個(gè)：用戶名存在驗(yàn)證和驗(yàn)證碼驗(yàn)證，那么如何處理驗(yàn)證后的返回的信息了。
解決辦法那也只有用AJAX的xml數(shù)據(jù)格式了，可以通過解析獲取不同的驗(yàn)證信息，這樣就可以驗(yàn)證多個(gè)字段了。不過這時(shí)應(yīng)該有個(gè)技巧怎么樣進(jìn)行性能的優(yōu)化了，不然每次一個(gè)字段的驗(yàn)證都變成了所有字段的驗(yàn)證。 我處理的時(shí)候就是在AJAX進(jìn)行傳值的時(shí)候只傳需要驗(yàn)證字段的值（在傳值之前當(dāng)然要用js進(jìn)行一個(gè)非空驗(yàn)證了），這傳到Servlet里，在通過判斷哪個(gè)字段非空了，那這個(gè)時(shí)候就是驗(yàn)證這個(gè)字段了，其他空字段就用ifelse進(jìn)行處理掉了。應(yīng)該還是可以節(jié)約一些性能的吧。如果有什么好的想法我們可以一起討論了。謝謝。
實(shí)例運(yùn)行截圖如下：
代碼也就不貼了，后面會(huì)提供原代碼下載的。下載發(fā)現(xiàn)一個(gè)問題就是下載的代碼如何用了。說一下我的環(huán)境吧一般我寫的Java EE 的代碼是在MyEclipse + MySql + Tomcat下的，只需要這些環(huán)境就可以了，需要說明一點(diǎn)的是，博文中用的的Mysql數(shù)據(jù)庫(kù)的sql文件我都會(huì)提供給大家，大家只需導(dǎo)入就可以了，但還需注意一點(diǎn)的就是我的mysql數(shù)據(jù)庫(kù)密碼是和你的不一樣的，請(qǐng)大家修改Hibernate的配置文件修改為你自己的mysql用戶root的密碼。
其他的就請(qǐng)把Project導(dǎo)入，再在tomcat發(fā)布應(yīng)該就可以運(yùn)行了。
如果有什么問題請(qǐng)聯(lián)系木子（QQ：506817493）。
木子寫于2009年8月7日
本博文提供下載：
博文的word原稿，AJAX使用的代碼，AJAX + SSH 進(jìn)行用戶名（數(shù)據(jù)庫(kù)中取得）存在和驗(yàn)證碼的代碼。如果有什么問題和好的建議請(qǐng)與木子（QQ：506817493）。
附源碼下載：
博文的word原稿
AJAX使用的代碼
AJAX + SSH 進(jìn)行用戶名（數(shù)據(jù)庫(kù)中取得）存在和驗(yàn)證碼的代碼
博客中的一些下載已經(jīng)放到了百度云了，請(qǐng)根據(jù)需要下載。【點(diǎn)我去百度云下載】
最后弱弱地說一下，如果可以的話，轉(zhuǎn)載請(qǐng)?zhí)峁┏鎏?
)，謝謝。
posted on 2010-01-07 21:13
李順利 閱讀(10814)
評(píng)論(5) 編輯 收藏