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