Java程式員從笨鳥到菜鳥之（七十五）細談struts2（十四）struts2+ajax實現非同步驗證

      

         由於老師布置作業的需要，在添加管理員的時候，要實現驗證添加的管理員的使用者名稱是否在資料庫中已經存在，然後再用戶端給使用者一個提示。我首先想到的就是利用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>

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

<script type="text/javascript">var xmlHttpRequest = null; //聲明一個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;}

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