异步请求实现用户名校验是否存在

一直坚持不写博客，今天终于不坚持了，感觉知识点遗忘的太严重了，每次上过的知识没过几天就都忘了。今天写一篇关于利用ajax技术实现用户登录校验的功能。其实就是判断该用户是否已经存在了，判断能否再注册而已。
方法写了两种，一种是基础部分，老师叫我们每个人都要了解，另一种也就是高级部分，以后可能会用到的。

核心代码如下：

//基础篇
//采用异步请求的方式做用户名校验，很大程度上减轻数据库压力，提高运行效率。这里给填写用户名之后赋予了一个失去焦点就做判断的方法。
function checkusername(){
    //做异步请求处理
    //1、要创建异步请求对象:XMLHttpRequest
    var xmlRep=new XMlHttpRequest();
    //2、设置请求数据(分为get和post两种方式)
    xmlRep.open()
    function checkUsername(obj){//要异步请求处理
        //1.要创建异步请求对象;XmlHttpRequest
        var xmlReq=new XMLHttpRequest();
        //2,设置请求数据
        xmlReq.open("GET","ajaxControll.jsp?username="+obj.value,true);
        var param=null  //get方式没有参数
        xmlReq.open("POST","ajaxControll.jsp",true);
        xmlReq.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        param="username="+obj.value;//post 方式传递数据           
        //3.设置异步响应数据处理
            xmlReq.onreadystatechange=function(){
            //xmlReq.readyState :0(创建异步请求对象),1(异步请求初始化),2(发送异步请求准备),3(发送异步处理),4(响应完成)                           
            if(xmlReq.readyState==4){//是否返程响应
                if(xmlReq.status==200){//响应是否成功
                    //  var test=xmlReq.responseText;//接受响应的文本数据
                    var json=$.parseJSON(xmlReq.responseText.trim());//接收响应的文本数据                               
                    if(json.isCheck){//isCheck是我在其他类用来接收sql语句返回值的一个'变量'。
                        $("#usernameInfo").html("<img src='image/fail.png'/>用户名已经存在，请重新选择一个!!!");
                    }           
                }                                                       
            }
        }
        //4.发送请求
        xmlReq.send(param);         
}

显然基础版本的很繁琐，所以我们学习基础的是要掌握它的原理。下面将介绍用jquery方式来实现异步验证,记住要导入jquery的工具包

function checkUsername(obj) {
    //要异步请求处理
    //使用jQuery框架
    //第一个参数：异步请求地址
    //第二个参数：异步请求的请求参数
    //第三个参数：异步请求响应数据处理的回调处理，data参数就是响应的数据
    //第四个参数：异步请求响应数据的类型

    $.post("page/ajaxControll.jsp", "username=" + obj.value, function(data) {
    if (data.isCheck) {
        $("#usernameInfo").html("<img src='image/fail.png'>用户名已经被占用，请重名选择一个!!!");
        $("#usernameInfo").css("color", "red");
    } else {
        $("#usernameInfo").html("<img src='image/right.png'>用户可以使用...");
        $("#usernameInfo").css("color", "green");
        }
   }, "json");
}

另一个类的控制代码：

public boolean usernameExists(String name) throws Exception {
    String sql = String.format("select 1 from users where username='%s'",
name);
        return DbHelper.findSingleObject(sql) != null;
        }

        request.setCharacterEncoding("utf-8");
        String name=request.getParameter("username");
        //json:对象或map 使用{},集合或数组使用【】
        //属性名，方法，字符串类型的属性值，使用双引号引起
        out.println("{\"isCheck\":"+usernameExists(name)+"}");
        out.flush();