JS检验用户名是否存在

<form action="" >
    用户姓名:<input type="text" 
                name="name" id="name" 
                οnblur="checkNameFun()"/>
                <span id="namespan"></span>
                <br>
    用户密码:<input type="password" name="pwd" id="pwd"/><br>
    <input type="submit" value="注册"/>
</form>

 

 

<script type="text/javascript">
    //返回xhr对象
    function getXHR(){
        //1.定义变量
            var xhr;
        //2.判断
        if(window.XMLHttpRequest){
            //现阶段所有的浏览器都支持的对象
            xhr = new XMLHttpRequest();
        }else{
            //兼容IE5 IE6
            xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        return xhr;
    }

    //name文本框失去焦点事件处理函数
    function checkNameFun(){
        //1.创建xhr对象
        var xhr = getXHR();
        //2.监听事件,处理事件
        xhr.onreadystatechange=function(){
            //判断状态是第五种,并且响应的状态码是200
            if(xhr.readyState==4&&xhr.status==200){
                var message = xhr.responseText;
                //alert(xhr.responseText);
                //获取namespan的节点
                var node = 
                    document.getElementById("namespan");
                if(message=="0"){
                    node.innerHTML = "用户名已被占用";
                }else{
                    node.innerHTML = "用户名可以使用";
                }
                
            }
        };
        //3.打开连接
        var nameValue = document.
                getElementById("name").value;
        xhr.open("get","${pageContext.request.contextPath}/user/checkName.do?name="+nameValue,true);
        //4.发送请求
        xhr.send();
    }
</script>