异步校验用户名的实现

今天是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("我是异步响应！！！");