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);
    }