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应用上的对比！