SSH整合AJAX驗證用戶名存在和驗證碼的完整實例一（含代碼）
——AJAX學習筆記
SSH三大框架如何整合，在我前幾篇博文中已經很詳細的介紹了，如果還有什么問題的，請查看我的博文Struts+Spring+Hibernate整合注冊登錄,謝謝。
那么現在就詳細地介紹一下AJAX了。AJAX自己也是最近才學了一點，里面的一些框架或者知識只是略懂一些，寫的不好請大家原諒。
下面是一個簡單的使用AJAX進行驗證用戶名的，一般AJAX給人感覺的好處就是異步進行交互，讓我們感覺頁面并沒有其他的動作（刷新），還有一個我感覺就是屏蔽了以前很惱人的alert彈出框了（這種驗證在以前真的很多），讓我們感覺頁面做的更友好了，交互性更能跟上現在的web應用。
有人會說，Struts中不是有服務器端驗證碼，而且給人的交互也是很好的，那為什么還需要AJAX進行驗證了？以我的經驗和愛好的話說，我覺得服務器端和客戶端的驗證都必須要，這個有的時候是為了防止別人進行惡意的網址注入，也許現在我們做了更完善的驗證的話，以后我們的網站就少了很多不必要的惡意破壞。
好了，現在就來說說下面的AJAX技術了，下面的例1，是一個很簡單用戶名驗證存在的驗證js和Servlet，實際上是沒有技術含量的，其中返回的數據就可能有兩種了，一種以html的格式，另一種就是xml了，例1給的是html格式的，xml的格式的代碼就不貼了，說一下了。有兩個修改點了，修改點1----響應的Content-Type必須是text/xml
httpServletResponse.setContentType("text/xml;charset=utf-8");
修改點2-----返回的數據需要拼裝成xml格式
PrintWriter out = httpServletResponse.getWriter();
String old = httpServletRequest.getParameter("name");
//修改點2-----返回的數據需要拼裝成xml格式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
… …
builder.append("</message>");
out.println(builder.toString());
后面就是接收方法了，實際上也沒有太大區別，就是接收的是xml語句，我們需要解析后就可以一樣使用了。（具體實現請參考網上提供的教程或者我提供下載的代碼）
//例1：簡單的使用AJAX，返回的數據是html
//定義用戶名校驗的方法
function verify(){
//首先測試一下頁面的按鈕按下，可以調用這個方法
//使用javascript的alert方法，顯示一個探出提示框
//alert("按鈕被點擊了！！！");
//1.獲取文本框中的內容
//document.getElementById("userName"); dom的方式
//Jquery的查找節點的方式，參數中#加上id屬性值可以找到一個節點。
//jquery的方法返回的都是jquery的對象，可以繼續在上面執行其他的jquery方法
var jqueryObj = $("#userName");
//獲取節點的值
var userName = jqueryObj.val();
//alert(userName);
//2.將文本框中的數據發送給服務器段的servelt
//使用jquery的XMLHTTPrequest對象get請求的封裝
$.get("AJAXServer?name=" + userName,null,callback);
}
//回調函數
function callback(data) {
// alert("服務器段的數據回來了！！");
//3.接收服務器端返回的數據
// alert(data);
//4.將服務器段返回的數據動態的顯示在頁面上
//找到保存結果信息的節點
var resultObj = $("#result");
//動態的改變頁面中div節點中的內容
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，用于驗證用戶名的
*/
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.取參數
String old = httpServletRequest.getParameter("name");
//String name = new String(old.getBytes("iso8859-1"),"UTF-8");
String name = URLDecoder.decode(old,"UTF-8");
//2.檢查參數是否有問題
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.校驗操作
// String name = old;
if(name.equals("wangxingkui")){
//4。和傳統應用不同之處。這一步需要將用戶感興趣的數據返回給頁面段，而不是將一個新的頁面發送給用戶
//寫法沒有變化，本質發生了改變
out.println("用戶名[" + name + "]已經存在，請使用其他用戶名, " + temp);
} else{
out.println("用戶名[" + name + "]尚未存在，可以使用該用戶名注冊, " + temp);
}
}
} catch(Exception e){
e.printStackTrace();
}
}
}
AJAX還有一個比較重要那就是XMLHttpRequest。下面給出例2. 使用XMLHttpRequest進行用戶名驗證，其中xmlHttpRequest考慮了多中瀏覽器的兼容問題。這些一般也就是一個套路了，以后也就沒有必要再寫創建XMLHttpRequest對象的代碼了，這些都可以進行復用（軟件工程的思想）后面實際上也要考慮Servlet傳回來的數據的類型（html的文本格式還是xml格式的），這里就不再詳述了。
//例2.使用XMLHttpRequest進行用戶名驗證
//用戶名校驗的方法
//這個方法將使用XMLHTTPRequest對象來進行AJAX的異步數據交互
var xmlhttp;
function verify() {
//0。使用dom的方式獲取文本框中的值
//document.getElementById("userName")是dom中獲取元素節點的一種方法，一個元素節點對應HTML頁面中的一個標簽，如果<input>
//。value可以獲取一個元素節點的value屬性值
var userName = document.getElementById("userName").value;
//1.創建XMLHttpRequest對象
//這是XMLHttpReuquest對象無部使用中最復雜的一步
//需要針對IE和其他類型的瀏覽器建立這個對象的不同方式寫不同的代碼
if (window.XMLHttpRequest) {
//針對FireFox，Mozillar，Opera，Safari，IE7，IE8
xmlhttp = new XMLHttpRequest();
//針對某些特定版本的mozillar瀏覽器的BUG進行修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//針對IE6，IE5.5，IE5
//兩個可以用于創建XMLHTTPRequest對象的控件名稱，保存在一個js的數組中
//排在前面的版本較新
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//取出一個控件名進行創建，如果創建成功就終止循環
//如果創建失敗，回拋出異常，然后可以繼續循環，繼續嘗試創建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
//確認XMLHTtpRequest對象創建成功
if (!xmlhttp) {
alert("XMLHttpRequest對象創建失敗!!");
return;
} else {
alert(xmlhttp.readyState);
}
//2.注冊回調函數
//注冊回調函數時，之需要函數名，不要加括號
//我們需要將函數名注冊，如果加上括號，就會把函數的返回值注冊上，這是錯誤的
xmlhttp.onreadystatechange = callback;
//3。設置連接信息
//第一個參數表示http的請求方式，支持所有http的請求方式，主要使用get和post
//第二個參數表示請求的url地址，get方式請求的參數也在url中
//第三個參數表示采用異步還是同步方式交互，true表示異步
xmlhttp.open("GET","AJAXServer?name="+ userName,true);
//POST方式請求的代碼
//xmlhttp.open("POST","AJAXServer",true);
//POST方式需要自己設置http的請求頭
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式發送數據
//xmlhttp.send("name=" + userName);
//4.發送數據，開始和服務器端進行交互
//同步方式下，send這句話會在服務器段數據回來后才執行完
//異步方式下，send這句話會立即完成執行
xmlhttp.send(null);
}
//回調函數
function callback() {
//alert(xmlhttp.readyState);
//5。接收響應數據
//判斷對象的狀態是交互完成
if (xmlhttp.readyState == 4) {
//判斷http的交互是否成功
if (xmlhttp.status == 200) {
//獲取服務漆器端返回的數據
//獲取服務器段輸出的純文本數據
var responseText = xmlhttp.responseText;
//將數據顯示在頁面上
//通過dom的方式找到div標簽所對應的元素節點
var divNode = document.getElementById("result");
//設置元素節點中的html內容
divNode.innerHTML = responseText;
} else {
alert("出錯了！！！");
}
}
}
上面的都是AJAX的一些知識，本想后面就介紹如何使用AJAX整合SSH進行用戶名（數據庫中取得）存在和驗證碼的例子，但介于博文字數的限制，就留到下一篇博文中了，請閱讀下一篇博文 SSH整合AJAX驗證用戶名存在和驗證碼的完整實例二 ，不好意思。
本博文提供下載：
博文的word原稿，AJAX使用的代碼，AJAX + SSH 進行用戶名（數據庫中取得）存在和驗證碼的代碼。如果有什么問題和好的建議請與木子（QQ：506817493）。
木子寫于2009年8月7日
附源碼下載：
博文的word原稿
AJAX使用的代碼
AJAX + SSH 進行用戶名（數據庫中取得）存在和驗證碼的代碼
SSH整合AJAX驗證用戶名存在和驗證碼的完整實例二（含代碼）
——AJAX學習筆記
在上一篇博文（SSH整合AJAX驗證用戶名存在和驗證碼的完整實例一）中介紹了AJAX的一些技術問題，現在就來我們的實例：SSH整合AJAX驗證用戶名存在和驗證碼的完整實例了。
先介紹這個實例中我遇到的問題
1. 用戶名是從數據庫中取得的，但是進行驗證用戶名是否存在的是個Servlet，這個時候就會想到在這個Servlet里建立一個Dao的對象對數據庫的操作，而SSH整合的時候Spring對Servlet注入對象的機制是不一樣的。具體的情查看我寫的博文：
特殊情況（ActionForm，Servlet， Filter， Listener）下Spring如何注入對象
現在介紹一下再Servlet里如何通過Spring注入對象
使用Servlet進行驗證，這種思路很適合AJAX驗證的思路，不過問題出現了，還是空指針異常，Spring注入的對象根本沒有實例化。一開始還以為和Servlet的生命周期有點關系，后來在網上搜了一些東西，還是感覺可以通過Spring進行注入的。
下面介紹在Servlet（或者Filter，或者Listener）中使用spring的IOC容器默認情況下Servlet容器創建spring容器對象，注入到servletContext中，servletContext對象又是注入到session對象中，session對象又是注入到request對象中，request對象又是注入到servlet對象中，（其實不是很標準的注入，是傳參數，或者對屬性直接付值）。層層依賴可以得到spring容器對象。
ServletContext servletContext = request.getSession().getServletContext();
ApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(servletContext );
UsersManager um = (UsersManager)ctx.getBean( "UserManager");
2. 驗證碼如何生成
驗證碼的生成網上的代碼比較多了，有js生成的還有Servlet生成的，在本例中我使用了Servlet生成的一個驗證碼。生成驗證碼不難，但難的是如何進行驗證碼的驗證了，一般人想到的在生產驗證碼的Servlet中把生成的驗證碼加到session中，在通過jsp的判斷，一開始我也是這樣寫的，不過后來就有問題了，什么問題了？那就是Javascript獲取的驗證碼和生成的驗證碼不同的？session中的總是前一個顯示的驗證碼？也就是jsp獲取的驗證碼總是比Servlet中獲得的驗證碼慢一拍了，在網上搜了很多竟然沒有完整的驗證碼驗證的實例，這應該是我寫這篇博文的一個原因吧（希望對大家有幫助）
網上的這個問題的解答大致是這樣的，一個就是說這個是加載機制的問題，jsp是在Servlet前面進行的加載，所以說雖然生成圖片的Servlet寫人了session，不過jsp總是慢一拍了。
另一個就是建議我們使用AJAX進行了。這個也是我實現的，不過網上并沒有太多的代碼供我們參考，我也就在用戶名驗證的基礎上加了一個驗證碼的驗證了。測試通過是可以。
3. 在Servlet中驗證的時候，會出現對多個字段的驗證，象在我的這個例子中就有兩個：用戶名存在驗證和驗證碼驗證，那么如何處理驗證后的返回的信息了。
解決辦法那也只有用AJAX的xml數據格式了，可以通過解析獲取不同的驗證信息，這樣就可以驗證多個字段了。不過這時應該有個技巧怎么樣進行性能的優化了，不然每次一個字段的驗證都變成了所有字段的驗證。 我處理的時候就是在AJAX進行傳值的時候只傳需要驗證字段的值（在傳值之前當然要用js進行一個非空驗證了），這傳到Servlet里，在通過判斷哪個字段非空了，那這個時候就是驗證這個字段了，其他空字段就用ifelse進行處理掉了。應該還是可以節約一些性能的吧。如果有什么好的想法我們可以一起討論了。謝謝。
實例運行截圖如下：
代碼也就不貼了，后面會提供原代碼下載的。下載發現一個問題就是下載的代碼如何用了。說一下我的環境吧一般我寫的Java EE 的代碼是在MyEclipse + MySql + Tomcat下的，只需要這些環境就可以了，需要說明一點的是，博文中用的的Mysql數據庫的sql文件我都會提供給大家，大家只需導入就可以了，但還需注意一點的就是我的mysql數據庫密碼是和你的不一樣的，請大家修改Hibernate的配置文件修改為你自己的mysql用戶root的密碼。
其他的就請把Project導入，再在tomcat發布應該就可以運行了。
如果有什么問題請聯系木子（QQ：506817493）。
木子寫于2009年8月7日
本博文提供下載：
博文的word原稿，AJAX使用的代碼，AJAX + SSH 進行用戶名（數據庫中取得）存在和驗證碼的代碼。如果有什么問題和好的建議請與木子（QQ：506817493）。
附源碼下載：
博文的word原稿
AJAX使用的代碼
AJAX + SSH 進行用戶名（數據庫中取得）存在和驗證碼的代碼
博客中的一些下載已經放到了百度云了，請根據需要下載。【點我去百度云下載】
最后弱弱地說一下，如果可以的話，轉載請提供出處(
)，謝謝。
posted on 2010-01-07 21:13
李順利 閱讀(10815)
評論(5) 編輯 收藏