异步校验用户名的实现

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