异步校验用户名的实现

来源:互联网 发布:淘宝中推广方法有哪些 编辑:程序博客网 时间:2024/06/13 21:01

今天是2016.8.26,作为一名算不上刚入门的程序员,我开始写我人生中的第一篇博客,博客的内容呢是关于实现异步用户名校验。很多人都知道,在我们做登录操作的时候需要对用户名进行验证,为了减轻数据库的负担,我们在每次输入完用户名时就对这个用户名进行异步检验操作。

大致代码如下://用户名异步请求代码(ajsx实现)function checkUsername(obj){            //要异步请求处理            //1.要创建异步请求对象:XMLHttpRequest            var xmlReq = new XMLHttpRequest();            //2.设置请求数据            xmlReq.open("GET","ajaxControl.jsp?username="+obj.value,true);            var param = null;   //get方式没有参数            /*xmlReq.open("POST","ajaxControl.jsp",true);            xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");            var param = "username=" + obj.value; //post方式传递数据              //3.设置异常响应数据处理            xmlReq.onreadystatechange = function(){                //xmlReq.readyState : 0(创建异步请求对象) 1(异步请求初始化) 2(发送异步请求准备) 3(发送异步请求) 4(响应完成)                if(xmlReq.readyState == 4){ //是否完成响应                    if(xmlReq.status == 200){   //响应是否是成功的 200 OK                        //var test = xmlReq.responseText;   //接收响应的文本数据                        //alert(test.trim());                        //var xml = xmlReq.responseXML; //接收响应的XML数据                        var json = $.parseJSON(xmlReq.responseText.trim());                        if(json.isCheck){                            $("#userinfo").html("<img src='images/fail.png'/>用户名已存在");//针对用户名后面的检测span标签                            $("#userinfo").css("color","red");                        }else{                            $("#userinfo").html("<img src='images/right.png'/>用户名可以使用");                            $("#userinfo").css("color","green");                        }                    }                }            };            //4.发送请求            xmlReq.send(param);=========================================//当然了,更简单的验证方法可以利用jQuery框架去实现    function checkUsername(obj){            //使用jQuery框架            //第一个参数:异步请求地址            //第二个参数:异步请求的请求参数            //第三个参数:异步请求响应数据处理的回调处理, data参数就是响应的数据            //第四个参数:异步请求响应数据的类型            $.post("ajaxControl.jsp","username=" +obj.value,function(data){                if(data.isCheck){                    $("#userinfo").html("<img src='images/fail.png'/>用户名已存在");                    $("#userinfo").css("color","red");                }else{                    $("#userinfo").html("<img src='images/right.png'/>用户名可以使用");                    $("#userinfo").css("color","green");                }            },"json");        }//用jQuery框架去实现的代码量大大减少,执行的结果也是一样的处理代码    //处理异步请求    request.setCharacterEncoding("utf-8");    String name = request.getParameter("username");    //System.out.println("name ==>" + name);    //out.print("我是异步响应!!!");
1 0