Ajax技術概要複習及使用Ajax調用jsp或servlet進行非同步驗證

在註冊使用者等情況下會需要Ajax進行非同步驗證使用者是否存在，而這個驗證資訊在JAVA中可以放到JSP中，也可以放到servlet類中，而兩者的差異就如果我們使用jsp和servlet做web應用的差異是相同的。由此也體現了jsp和servlet的關係，在《Servlet和JSP的關係以及此關係在Tomcat中的體現》有所闡述！在簡單呈現和比對各自實現的代碼前先對AJAX的技術知識做個複習小結！

Ajax的主幹內容如下所示：

使用Ajax的主要過程包括1、建立XMLHttpRequest對象，2、設定回傳函數，3、指定資訊發送位置、提交的方式和非同步與否，4、發送請求。javaScript代碼如下所示：

   1:   <script type="text/javascript">

   2:          var XMLHttpRequestIns = null;

   3:          

   4:          function AjaxF() {

   5:              //建立Ajax核心對象並傳遞參數

   6:              CreateXMLHttpRequest();

   7:              //設定參數

   8:              XMLHttpRequestIns.onreadystatechange = handleStateChange;//設定回傳函數

   9:              //擷取內容的位置

  10:              XMLHttpRequestIns.open("GET", "XMLFile1.xml", true);

  11:              //發送

  12:              XMLHttpRequestIns.send(null);

  13:          }

  14:          function CreateXMLHttpRequest() {

  15:              if (window.ActiveObject) {

  16:                  XMLHttpRequestIns = new ActiveXObject("Microsoft.XMLHTTP");

  17:              }

  18:              else if(window.XMLHttpRequest )

  19:              {

  20:                  XMLHttpRequestIns = new XMLHttpRequest();

  21:              }

  22:          }

  23:          //對返回資料進行處理

  24:          function handleStateChange() {

  25:              if (XMLHttpRequestIns.readyState == 4) {

  26:   

  27:                  if (XMLHttpRequestIns.status == 200) {

  28:                      alert("伺服器訊息" + XMLHttpRequestIns.responseText);

  29:                  }

  30:              }

  31:          }

  32:      </script>

有了這個基礎和容易在java EE中使用Ajax調用jsp或servlet進行處理，但調用兩者有些細微的差異，這個差異也源自jsp和servlet的關係！代碼如下：

1、html代碼： 主要是在input的onblur方法中指定驗證方法，此標籤後的span標籤用於顯示Ajax驗證後返回的提示資訊（存在與否）

   1:                      <tr>

   2:                          <td width="22%" height="29">

   3:                              <div align="right">

   4:                                  <font color="#FF0000">*</font>使用者代碼:&nbsp;

   5:                              </div>

   6:                          </td>

   7:                          <td width="78%">

   8:                              <input name="userId" type="text" class="text1" id="userId"

   9:                                  size="10" maxlength="10" value="<%=userId %>" onblur 

  10:                                  ="validate(this)"/><span id="userIdspan"></span>

  11:                          </td>

  12:                      </tr>

2、javaScript代碼：這的重點就是掌握Ajax中建立XMLHttpRequest類的方法，指定處理次驗證過程的jsp類或servlet類（此處是jsp類，見下面validate(field)中的url變數），再有就是回呼函數的指定和編寫，此處使用了匿名函數，但也將編寫好的回呼函數放到了下面以供參考。

   1:  <script type="text/javascript">        

   2:                                 var xmlHttp;

   3:              

   4:          function createXMLHttpRequest() {

   5:              //表示當前瀏覽器不是ie，如firefox

   6:              if(window.XMLHttpRequest){

   7:                  xmlHttp = new XMLHttpRequest();

   8:              }else if(window.ActiveXObject){

   9:                  xmlHttp = new ActiveXObject("Microsoft.XMLHttp");

  10:              }

  11:          }

  12:          

  13:          function validate(field) {            

  14:              if(trim(field.value).length != 0){

  15:                  //建立XMLHttpRequest

  16:                  createXMLHttpRequest();

  17:                  var url = "user_validate.jsp?userId=" + trim(field.value) + "&timestamp=" + new Date().getTime();

  18:                  //alert(url);

  19:                  xmlHttp.open("GET",url,true);

  20:                  

  21:                  //方法地址。處理完成後自動調用，回調。一定不要加括弧，否則就變成調用了

  22:                  //xmlHttp.onreadystatechange = callback;

  23:                  xmlHttp.onreadystatechange = function() {    //匿名函數

  24:                          if(xmlHttp.readyState == 4){    //ajax引擎初始化成功

  25:                          if(xmlHttp.status == 200) {    //Http協議成功                    

  26:                              document.getElementById("userIdspan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";

  27:                          }else {

  28:                              alert("請求失敗，錯誤碼=" + xmlHttp.status);

  29:                          }

  30:                      }

  31:                  };

  32:                  //將參數發送到ajax引擎,不是執行

  33:                  xmlHttp.send(null);

  34:              }else {

  35:                  document.getElementById("userIdspan").innerHTML = "";

  36:              }

  37:          }

  38:          

  39:          function callback(){//此處是回呼函數，但在此Ajax應用中為未調用此方法，而是採用了上面的匿名函數的方法

  40:              if(xmlHttp.readyState == 4){    //ajax引擎初始化成功

  41:                  if(xmlHttp.status == 200) {    //Http協議成功                    

  42:                      document.getElementById("userIdspan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";

  43:                  }else {

  44:                      alert("請求失敗，錯誤碼=" + xmlHttp.status);

  45:                  }

  46:              }

  47:          }

  48:  </script>

3、上面validate(field)方法中變數url指定的驗證過程的jsp或servlet類，此處使用列舉的是jsp（user_validate.jsp）。

   1:  <%@ page language="java" contentType="text/html; charset=GB18030"

   2:      pageEncoding="GB18030"%>

   3:  <%@ page import="com.bjpowernode.drp.sysmgr.manager.*" %>

   4:      <%

   5:          String userId = request.getParameter("userId");

   6:          if(UserManager.getInstance().findUserById(userId) != null) {

   7:              out.println("使用者代碼已經存在！");

   8:          }

   9:      %>

4、3中用到的UserManager是具體從資料庫中根據userId查詢user的類，此處略去！

5、至此Ajax調用jsp處理驗證的編碼完成，如果是調用servlet來進行驗證，則上文的變數url需指向servlet類，如下所示：

   1:  var url = "../servlet/UserValidateServlet?UsertId=" + trim(field.value) + "&timestamp=" + new Date().getTime();//加個時間戳記，是每次的url不同，防止緩衝

6、在servlet中的驗證過程比對上文中的第3步，代碼如下所示：

   1:  public class UserValidateServlet extends HttpServlet {

   2:   

   3:      @Override

   4:      protected void service(HttpServletRequest request, HttpServletResponse response)

   5:              throws ServletException, IOException {

   6:          //設定contentType

   7:          response.setContentType("text/html; charset=GB18030");

   8:          

   9:          //擷取代碼

  10:          String userId=request.getParameter("usertId");

  11:          //執行查詢，判斷是否存在

  12:          if(UserManager.getInstance().findUserByUserId(userId)!=null){

  13:              //提示存在了此代碼

  14:              response.getWriter().print("使用者代碼已經存在！");

  15:          }

  16:      }

  17:   

  18:  }

對比3和6可以發現除了指定contentType的方式不同外（jsp在@page命令中指定，servlet在response方法中指定），其他的沒有區別。但要想使用此servlet來完成驗證過程還需要像《Servlet和JSP的關係以及此關係在Tomcat中的體現》所提到的配置下web.xml檔案。代碼如下：

- <servlet>  <servlet-name>ClientIdValidateServlet</servlet-name>   <servlet-class>com.bjpowernode.drp.util.servlet.ClientIdValidateServlet</servlet-class>   </servlet>- <servlet-mapping>  <servlet-name>ClientIdValidateServlet</servlet-name>   <url-pattern>/servlet/ClientIdValidateServlet</url-pattern>   </servlet-mapping>

通過上面的代碼可以請到在java中使用Ajax和在一般網頁中使用Ajax沒有太大區別，其主要還是掌握好了XMLHttmRequest的用法！此文也算是對jsp和servlet在Ajax應用上的對比！