zoukankan      html  css  js  c++  java

  • struts2+ajax实现异步验证

    由于老师布置作业的需要，在添加管理员的时候，要实现验证添加的管理员的用户名是否在数据库中已经存在，然后再客户端给用户一个提示。我首先想到的就是利用ajax实现异步验证技术，由于利用的ssh框架，所以在这要对struts2和ajax进行整合，由于我还没把ajax的一些知识总结出来，所以在这也不提了，有关ajax的详细内容将会在以后的博客中写出来。现在我们就以我做的这个添加管理员，验证管理员的用户名是否存在来说一下这个struts2+ajax实现异步验证技术。

         首先我们来看一下我们的form表单：

    [html] view plaincopyprint?
    1. <td>  
    2. 用户名  
    3. </td>  
    4. <td>  
    5. <input type="text" name="admin.username" value=""  
    6. onblur="checkusername(this,'AdminAction!exists')" />  
    7. </td>  
    8. <td>  
    9. <span id="namemessage" style="color: red;"></span>  
    10. </td>  
    11. </tr>  
    12. <tr bgColor="#d6fdd0">  
    13. <td>  
    14. 密码  
    15. </td>  
    16. <td>  
    17. <input type="password" name="admin.password" value="" />  
    18. </td>  
    19. <td>  
    20. <span></span>  
    21. </td>  
    22. </tr>  
    [javascript] view plaincopyprint?
    1. <script type="text/javascript">  
    2. var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象  
    3. function checkusername(field, url) {  
    4. var uername = field.value;  
    5. if (uername == "" || uername.length < 3) {  
    6. document.getElementById("namemessage").innerHTML = "用户名应该不小于3位";  
    7. return;  
    8. } else {  
    9. if (window.ActiveXObject) // IE浏览器  
    10. {  
    11. xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
    12. } else if (window.XMLHttpRequest) //除IE外的其他浏览器实现  
    13. {  
    14. xmlHttpRequest = new XMLHttpRequest();  
    15. }  
    16. if (null != xmlHttpRequest) {  
    17. //当利用get方法访问服务器端时带参数的话，直接在"AjaxServlet"后面加参数，                   下面send方法为参数null就可以，用post方法这必须在把参数加在send参数内，如下  
    18. xmlHttpRequest.open("get", url+"?admin.username="+uername, true);  
    19. //关联好ajax的回调函数  
    20. xmlHttpRequest.onreadystatechange = ajaxCallback;  
    21. //真正向服务器端发送数据  
    22. // 使用post方式提交，必须要加上如下一行,get方法就不必加此句  
    23. xmlHttpRequest.setRequestHeader("Content-Type",  
    24. "application/x-www-form-urlencoded");  
    25. xmlHttpRequest.send(null);  
    26. }  
    27. }  
    28. }  
    29. function ajaxCallback() { //ajax一次请求会改变四次状态，所以我们在第四次(即一次请求结束)进行处理就OK,  
    30. if (xmlHttpRequest.readyState == 4) { //请求成功  
    31. if (xmlHttpRequest.status == 200) {  
    32. var responseText = xmlHttpRequest.responseText;  
    33. document.getElementById("namemessage").innerHTML = responseText;  
    34. }  
    35. }  
    36. }  
    37. </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方法里面去看一下：

    [java] view plaincopyprint?
    1. public String exists() throws Exception{  
    2. System.out.println(admin==null);  
    3. boolean boo=dao.exists(admin.getUsername());  
    4.   //获取原始的PrintWriter对象,以便输出响应结果,而不用跳转到某个试图      
    5.         HttpServletResponse response = ServletActionContext.getResponse();      
    6.         //设置字符集      
    7.         response.setCharacterEncoding("UTF-8");      
    8.         PrintWriter out = response.getWriter();      
    9. if(boo){           
    10.         //直接输入响应的内容      
    11.         out.println("*用户名已存在*");      
    12.         /**格式化输出时间**/     
    13.         out.flush();      
    14.         out.close();      
    15. }  
    16. out.println("*用户名可用*");   
    17. return null;  
    18. }  



          熟悉ajax的同学看到这段代码应该很清楚了吧。这里主要是利用了PrintWriter 来把我们的后台信息输出到我们的前台，这里我 就不详细解释了。好了，写到这，我们这个利用struts2+ajax实现的我们的异步验证。下面就是具体的实现效果：
  • 相关阅读:
    C# 截取屏幕方法
    C# Tcp和Socket 网络(五)
    C# StmpClient使用 网络(四)
    C# IP地址和DNS 网络(三)
    C# WebBrowser使用 网络(二)
    C# HttpClient使用 网络(一)
    C# Transaction 事务处理 -依赖事务
    C# Transaction 事务处理 -环境事务
    LVM
    linux下安装Apache(https) 服务器证书安装配置指南
  • 原文地址：https://www.cnblogs.com/Evil-Rebe/p/4888165.html
Copyright © 2011-2022 走看看