继上次的用户注册登录案例之后，对其中的部分功能再做进一步改进。上一版中用户提交表单后才对用户名进行校验，虽然做了回显，但还是感觉功能弱了些。为了能有更好用户体验，不是在用户提交表单后才给提示，而是在用户输入用户名后就立即对该用户名进行数据库校验，经过晚上的测试现在可以使用纯js版和jquery版。
　　准备工作，先编写好验证用户名重复的后台Servlet程序，然后在jsp或html中使用js对用户名进行验证，当用户输入用户名文本框推动焦点时立即触发验证。
下面是jquery代码。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<% out.clear(); %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>使用ajax进行异步验证</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <style type="text/css">

        body{ font-size:12px;}

        table{ font-size:12px;}

        table input{ width:120px;}

        table em{ color:#ff0000;}

        #body{ margin-left:200px; margin-top:220px;}

    </style>

    <script type="text/javascript" src="Jquery/jquery-1.7.2.min.js"></script>

    <script language="javascript" type="text/javascript">

        $(document).ready(function(){

            $("#username").focus();

        });

        var hadoop = function(){

            // 异步验证用户是否重复

            if($.trim($("#username").val())==""){

                $("#message").html("用户名不能为空");

                $("#username").focus();

            }else{

                $.ajax({

                    type: "post",

                    url: "dumplicate.do",

                    data: "username=" + $("#username").val(),

                    success: function(message){

                        $("#message").html(message);

                    }

                });

            }

        };

    </script>

  </head>

  <body>

      <div id="body">

        <form action="#" method="post">

            <table>

                <tr>

                    <td>用户名：</td><td><input type="text" id="username" name="username" onblur="hadoop()" />

                    </td>

                    <td>

                        <em id="message"></em>

                    </td>

                </tr>

                <tr>

                    <td>密码：</td><td colspan="2"><input type="text" /></td>

                </tr>

            </table>

        </form>

    </div>

  </body>

</html>

下面是js版代码。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

            + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<% out.clear(); %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>使用ajax进行异步验证</title>

    <meta http-equiv="content-type" content="text/xml;charset=utf-8" />

    <style type="text/css">

        body{ font-size:12px;}

        table{ font-size:12px;}

        table input{ width:120px;font-size:12px;}

        table em{ color:#ff0000;}

        .tips{ text-align:right;}

        #body{ margin-left:200px; margin-top:220px;}

    </style>

    <script language="javascript" type="text/javascript">

        window.onload=function(){

            document.getElementById("username").focus();

        };

        var xmlhttp;

        function hadoop() {

            // 1.创建XMLHttpRequest对象

            if (window.XMLHttpRequest) {

                // IE7,IE8,FireFox,Mozilla,Safari,Opera

                xmlhttp = new XMLHttpRequest();

                if (xmlhttp.overrideMimeType) {

                    xmlhttp.overrideMimeType("text/xml");

                }

            } else if (window.ActiveXObject) {

                // IE6,IE5.5,IE5

                var activexName = [ "MSXML2.XMLHTTP", "Miscrosoft.XMLHTTP" ];

                for ( var i = 0; i < activexName.length; i++) {

                    try {

                        xmlhttp = new ActiveXObject(activexName[i]);

                        break;

                    } catch (e) {

                    }

                }

            }

            if (xmlhttp == undefined || xmlhttp == null) {

                alert('当前浏览器不支持创建XMLHttpRequest对象');

                return;

            }

            //2.注册回调函数

            xmlhttp.onreadystatechange = callback;

            // 注意方法调用后面不加括号

            //xmlhttp.onreadystatechange = callback();  

            // 获取文本框中输入的内容，经过两次编码防止中文乱码

            // 后台使用URLDecoder.decode(username,"utf-8")对username解码

            var userName = document.getElementById("username").value;

            if(userName==""){

                document.getElementById("message").innerHTML="用户名不能为空";

                $("#username").focus();

                return;

            }

            userName = encodeURI(encodeURI(userName));

            // 3.设置和服务器端交互参数

            xmlhttp.open("POST", "${pageContext.request.contextPath }/dumplicate.do?username=" + userName, true);

            // 4.设置向服务器端发送的数据，启动和服务器端的交互

            xmlhttp.send(null);

        }

        function callback() {

            // 5 .判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据

            if (xmlhttp.readyState == 4) {

                // 表示和服务器端的交互已经完成

                if (xmlhttp.status == 200) {

                    // 表示服务器的响应代码是200，正确的返回了数据

                    // 纯文本数据的接受方法

                    var message = xmlhttp.responseText;

                    // XML数据对应的DOM对象的接受方法

                    // 使用的前提是，服务器端需要设置content-type为text/xml

                    // var domXml = xmlhttp.responseXML;  

                    //向div标签中填充文本内容的方法

                    var div = document.getElementById("message");

                    if(message=="用户名已被注册"){

                        document.getElementById("username").focus();

                        document.getElementById("username").select();

                    }

                    div.innerHTML = message;

                }

            }

        }

    </script>

  </head>

  <body>

      <div id="body">

        <form action="#" method="post">

            <table>

                <tr>

                    <td class="tips">用户名：</td>

                    <td>

                        <input type="text" id="username" name="username" value="祁连山" onblur="hadoop()" />

                    </td>

                    <td>

                        <em id="message">*</em>

                    </td>

                </tr>

                <tr>

                    <td class="tips">密码：</td><td colspan="2"><input type="text" /></td>

                </tr>

            </table>

        </form>

    </div>

  </body>

</html>

　　从上面的代码量就可以看出来jquery的强大之处了，所以有空没空多看看jquery，自己会用才是王道。在这里也感谢一位网名叫牛腩的广西南宁朋友提供js版本，jquery版本出自jquery文档，看来还是得多看文档哪。

最新文章

  1. log4j详解（一）
  2. Using MSBuild to publish a VS 2012 SSDT .sqlproj database project
  3. LTE Module User Documentation（翻译15）——示例程序、参考场景以及故障检测和调试技巧
  4. android 之 XMLPull
  5. hdoj 1405 The Last Practice
  6. sql取指定时间段内的所有月份
  7. ehcache如何配置
  8. Extjs 在项目中碰到问题
  9. id: cannot find name for user ID xxx处理办法
  10. ORACLE分组查询和统计等
  11. 812. Largest Triangle Area
  12. AJAX（Jquery)
  13. 设计模式-生成器（Builder）
  14. char* a与char a[]的区别
  15. php Pthread 多线程 (三) Mutex 互斥量
  16. OSGi 系列（十）之 Blueprint
  17. PAT 1040
  18. 孩子们各显神通对付 iOS 12「屏幕使用时间」的限制
  19. 平台支持的从经典部署模型到 Azure Resource Manager 的 IaaS 资源迁移
  20. PHP网上支付

热门文章

  1. PHP静态延迟绑定简单演示样例
  2. HDU2188 悼念512汶川大地震遇难同胞——选拔志愿者
  3. 模拟实现Spring IoC功能
  4. org.hibernate.AssertionFailure: null id in com.you.model.User entry (don&amp;#39;t flush the Session after a
  5. 51nod-1359: 循环探求
  6. 去除iframe滚动条
  7. 1.future线程通信
  8. 51nod 1557 两个集合 (严谨的逻辑题)
  9. POJ 3617 Best Cow Line 贪心算法
  10. QT笔记 -- (3) 为QLabel添加鼠标响应方法1