Strust2第（十四）篇《struts2+ajax實現異步驗證》

本文來自：曹勝歡博客專欄。轉載請註明出處：http://blog.csdn.net/csh624366188

由於老師佈置作業的需要，在添加管理員的時候，要實現驗證添加的管理員的用戶名是否在數據庫中已經存在，然後再客戶端給用戶一個提示。我首先想到的就是利用ajax實現異步驗證技術，由於利用的ssh框架，所以在這要對struts2和ajax進行整合，由於我還沒把ajax的一些知識總結出來，所以在這也不提了，有關ajax的詳細內容將會在以後的博客中寫出來。現在我們就以我做的這個添加管理員，驗證管理員的用戶名是否存在來說一下這個struts2+ajax實現異步驗證技術。

     首先我們來看一下我們的form表單：

<td>
用戶名
</td>
<td>
<input type="text" name="admin.username" value=""
onblur="checkusername(this,'AdminAction!exists')" />
</td>
<td>
<span id="namemessage" style="color: red;"></span>
</td>
</tr>
<tr bgColor="#d6fdd0">
<td>
密碼
</td>
<td>
<input type="password" name="admin.password" value="" />
</td>
<td>
<span></span>
</td>
</tr>

<td>
用戶名
</td>
<td>
<input type="text" name="admin.username" value=""
onblur="checkusername(this,'AdminAction!exists')" />
</td>
<td>
<span id="namemessage" style="color: red;"></span>
</td>
</tr>
<tr bgColor="#d6fdd0">
<td>
密碼
</td>
<td>
<input type="password" name="admin.password" value="" />
</td>
<td>
<span></span>
</td>
</tr>

我們可以看到當我們的用戶名的文本域註冊了一個onblur事件，當用戶名這個文本域失去焦點的時候我們就會讓他去執行checkusername方法，好，下面讓我們來看一下我們的js是怎麼實現的ajax：

<script type="text/javascript">
var xmlHttpRequest = null; //聲明一個空對象以接收XMLHttpRequest對象
function checkusername(field, url) {
var uername = field.value;
if (uername == "" || uername.length < 3) {
document.getElementById("namemessage").innerHTML = "用戶名應該不小於3位";
return;
} else {
if (window.ActiveXObject) // IE瀏覽器
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) //除IE外的其他瀏覽器實現
{
xmlHttpRequest = new XMLHttpRequest();
}
if (null != xmlHttpRequest) {
//當利用get方法訪問服務器端時帶參數的話，直接在"AjaxServlet"後面加參數，                   下面send方法爲參數null就可以，用post方法這必須在把參數加在send參數內，如下
xmlHttpRequest.open("get", url+"?admin.username="+uername, true);
//關聯好ajax的回調函數
xmlHttpRequest.onreadystatechange = ajaxCallback;
//真正向服務器端發送數據
// 使用post方式提交，必須要加上如下一行,get方法就不必加此句
xmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttpRequest.send(null);
}
}
}
function ajaxCallback() { //ajax一次請求會改變四次狀態，所以我們在第四次(即一次請求結束)進行處理就OK,
if (xmlHttpRequest.readyState == 4) { //請求成功
if (xmlHttpRequest.status == 200) {
var responseText = xmlHttpRequest.responseText;
document.getElementById("namemessage").innerHTML = responseText;
}
}
}
</script>

<script type="text/javascript">
var xmlHttpRequest = null; //聲明一個空對象以接收XMLHttpRequest對象
function checkusername(field, url) {
var uername = field.value;
if (uername == "" || uername.length < 3) {
document.getElementById("namemessage").innerHTML = "用戶名應該不小於3位";
return;
} else {
if (window.ActiveXObject) // IE瀏覽器
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) //除IE外的其他瀏覽器實現
{
xmlHttpRequest = new XMLHttpRequest();
}
if (null != xmlHttpRequest) {
//當利用get方法訪問服務器端時帶參數的話，直接在"AjaxServlet"後面加參數，                   下面send方法爲參數null就可以，用post方法這必須在把參數加在send參數內，如下
xmlHttpRequest.open("get", url+"?admin.username="+uername, true);
//關聯好ajax的回調函數
xmlHttpRequest.onreadystatechange = ajaxCallback;
//真正向服務器端發送數據
// 使用post方式提交，必須要加上如下一行,get方法就不必加此句
xmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttpRequest.send(null);
}
}
}
function ajaxCallback() { //ajax一次請求會改變四次狀態，所以我們在第四次(即一次請求結束)進行處理就OK,
if (xmlHttpRequest.readyState == 4) { //請求成功
if (xmlHttpRequest.status == 200) {
var responseText = xmlHttpRequest.responseText;
document.getElementById("namemessage").innerHTML = responseText;
}
}
}
</script>

         通過上面的註釋我想大家應該能看懂一些內容吧，我們首先去驗證填寫的內容是否爲空，如果爲空就給用戶以提示。如果不爲空的話就去判斷一下當前的瀏覽器，然後根據瀏覽器去設置xmlHttpRequest對象，xmlHttpRequest對象是什麼東西呢？XMLHttpRequest 對象用於在後臺與服務器交換數據的對象，他主要的作用：

· 在不重新加載頁面的情況下更新網頁

· 在頁面已加載後從服務器請求數據

· 在頁面已加載後從服務器接收數據

· 在後臺向服務器發送數據

XMLHttpRequest是Ajax最核心的對象，它有以下幾個重要的方法或屬性：
    ●open()：建立到服務器的新請求。

    ●send()：向服務器發送請求。

    ●abort()：退出當前請求。

    ●readyState：提供當前 HTML 的就緒狀態。

    ●responseText：服務器返回的請求響應文本。

 其中XMLHttpRequest 對象的 open() 方法有以下五個參數：

 ●request-type：發送請求的類型。典型的值是 GET 或 POST，但也可以發送 HEAD 請求。

 ●url：要連接的 URL。

 ●asynch：如果希望使用異步連接則爲true，否則爲 false。該參數是可選的，默認爲 true。

 ●username：如果需要身份驗證，則可以在此指定用戶名。該可選參數沒有默認值。

●password：如果需要身份驗證，則可以在此指定口令。該可選參數沒有默認值。

        通常使用其中的前三個參數。事實上，即使需要異步連接，也應該指定第三個參數爲 “true”。這是默認值，但堅持明確指定請求是異步的還是同步的更容易理解。

          得到XMLHttpRequest 對象之後，我們就利用這個對象去後臺執行我們的請求，在執行我們請求的時候一定要注意關聯好我們的回調函數：xmlHttpRequest.onreadystatechange = ajaxCallback;這裏的回調函數的名字可以隨便起，並不是固定死的。我們可以看到我們上面的程序請求是發送給了AdminAction中的exists方法了，好，下面我們去action方法裏面去看一下：

public String exists() throws Exception{
System.out.println(admin==null);
boolean boo=dao.exists(admin.getUsername());
  //獲取原始的PrintWriter對象,以便輸出響應結果,而不用跳轉到某個試圖
        HttpServletResponse response = ServletActionContext.getResponse();
        //設置字符集
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
if(boo){
        //直接輸入響應的內容
        out.println("*用戶名已存在*");
        /**格式化輸出時間**/
        out.flush();
        out.close();
}
out.println("*用戶名可用*");
return null;
}

public String exists() throws Exception{
System.out.println(admin==null);
boolean boo=dao.exists(admin.getUsername());
  //獲取原始的PrintWriter對象,以便輸出響應結果,而不用跳轉到某個試圖    
        HttpServletResponse response = ServletActionContext.getResponse();    
        //設置字符集    
        response.setCharacterEncoding("UTF-8");    
        PrintWriter out = response.getWriter();    
if(boo){	     
        //直接輸入響應的內容    
        out.println("*用戶名已存在*");    
        /**格式化輸出時間**/   
        out.flush();    
        out.close();    
}
out.println("*用戶名可用*"); 
return null;
}

      熟悉ajax的同學看到這段代碼應該很清楚了吧。這裏主要是利用了PrintWriter 來把我們的後臺信息輸出到我們的前臺，這裏我 就不詳細解釋了。好了，寫到這，我們這個利用struts2+ajax實現的我們的異步驗證。下面就是具體的實現效果：