javaweb基础----使用ajax校验用户名是否重复

首先是前端js的代码：

 <script type="text/javascript">
        function checkForm(){
            //1.验证用户名不能为空
            var userName = document.getElementById("userName").value;
            if(userName==""){
                 var tip1 = document.getElementById("tip1");
                tip1.innerHTML = "用户名不能为空！";
                //alert("用户名不能为空！")
                return false;
            };
            //2.验证昵称不能为空
            var nickName = document.getElementById("nickName").value;
            if(nickName==""){
                 var tip2 = document.getElementById("tip2");
                tip2.innerHTML = "昵称不能为空！";
                //alert("用户名不能为空！")
                return false;
            };
              //3.验证密码不能为空
            var pwd = document.getElementById("pwd").value;
            if(pwd==""){
                 var tip3 = document.getElementById("tip3");
                tip3.innerHTML = "密码不能为空！";
                //alert("用户名不能为空！")
                return false;
            };
            //4.验证两次密码是否一致
            var repwd = document.getElementById("repwd").value;
            if(pwd!=repwd){
                 var tip4 = document.getElementById("tip4");
                tip4.innerHTML = "两次密码不一致！";
                //alert("用户名不能为空！")
                return false;
            };
            //5.验证验证码不能为空
            var code = document.getElementById("code").value;
            if(code==""){
                 var tip5 = document.getElementById("tip5");
                tip5.innerHTML = "验证码不能为空！";
                //alert("用户名不能为空！")
                return false;
            };
            //6.修改全局变量exist的值
            if(exist){
                return false;
            }
            return true;
        }
        //7.后端数据传回的校验信息
        if("${msg }"){
            alert("${msg }")
        }
        //定义全局变量exist，用于表示用户名是否存在，默认不存在
        var exist = false;
        // 获取XMLHttpRequest对象
        function getXMLHttpRequest() {
            var xmlhttp;
            // code for IE7+, Firefox, Chrome, Opera, Safari
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            // code for IE6, IE5
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        }
            //7.利用ajax检测用户名是否重复
            function  checkName(username) {
                if(username){
                    //1.获取XmlHttpRequest对象
                    var xhr = getXMLHttpRequest();
                    //2.监听服务器返回状态
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState==4&&xhr.status==200){
                            //3.获取后台返回的结果
                            var data = xhr.responseText;
                            //判断返回信息
                            if(data=="1"){
                                //data=="1"，用户名可用，表单可提交
                                document.getElementById("tip12").innerHTML="用户名可用";
                                exist = false;
                            }else{
                                //data==其它，用户名不可用，表单不可提交
                                document.getElementById("tip11").innerHTML="用户名不可用";
                                exist = true;
                            }
                        }
                    }
                    //4.发送请求
                    xhr.open("POST","${root }/checkNameServlet",true);
                    // 使用表单的方式 POST 数据
                    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    xhr.send("username="+username);
                }
            }
    </script>

然后是表单中的form设置：

<form action="${root }/registerServlet" method="post" onsubmit="return checkForm();" id="registForm">
            <dl class="register_row">
                <dt>用户名：</dt>
                <dd><input id="userName" name="username" class="register_input" onblur="checkName(value)"/><font id="tip11" color="red"></font><font id="tip12"color="green"></font></dd>
            </dl>

说明:重点看43-46行，53行，79-86行。

后端代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        UserService us =new  UserServiceImpl();
        String data = us.check(username);
        response.getWriter().write(data);
    }