Ajax和Jquery异步校验注册时用户名是否存在

Ajax的GET方式提交请求：

function ajax_get(){
    //1.创建异步对象
    var xhr = createXMLHttp();
    //2.设置状态改变的监听，回调函数（服务器响应请求后返回执行该操作）
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) { //请求发送成功
            if(xhr.status == 200) { //响应成功
                //获得相应数据
                var data = xhr.responseText;
                //将数据写到div中
                document.getElementById("id1").innerHTML = data;
            }
        }
    }

    //3.设置请求路径
    xhr.open("GET","/Web14/AjaxServlet1?name=aaa&pass=123",true);
    //4.发送请求
    xhr.send(null);
}

//创建异步对象
function createXMLHttp() {
    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {// Internet Explorer
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
            }
        }
    }

    return xmlHttp;
}

Ajax的POST方式提交请求：

function ajax_post() {
    //创建异步对象
    var xhr = createXMLHttp();
    //设置状态改变的监听，回调函数，响应请求返回执行
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) { //请求发送成功
            if(xhr.status == 200) { //响应成功
                //获得响应数据
                var data = xhr.responseText;
                //将数据写到div中
                document.getElementById("id1").innerHTML = data;
            }
        }
    }
    //设置请求路径
    xhr.open("POST","/Web14/AjaxServlet1",true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //发送请求
    xhr.send("name=post&pass=123");
}

案例：异步校验注册时用户名是否存在

1.采用传统Ajax方式：

表单中的input:

<tr>
    <td>用户名</td>
    <td><input type="text" id="username" name="username" onblur="checkUsername()"><span id="s1"></span></td>
</tr>

ajax_get.js:

function checkUsername() {
    //设置异步请求
    var xhr = createXMLHttp();
    //获取文本框的值
    var username = document.getElementById("username").value;
    //回调函数
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                var data = xhr.responseText;
                if(data == 1) {
                    document.getElementById("s1").innerHTML = "<font color='green'>用户名可用</font>";
                }
                if(data == 0) {
                    document.getElementById("s1").innerHTML = "<font color='red'>用户名已被占用</font>";
                }
            }
        }
    }
    //设置请求路径
    xhr.open("GET","/Web14/AjaxRegistServlet?username="+username,true);
    //发送请求
    xhr.send(null);
}

AjaxRegistServlet:

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            //接收数据
            String username = request.getParameter("username");
            AjaxService ajaxService = new AjaxService();
            User user = ajaxService.findUser(username);
            if(user != null) {
                response.getWriter().print(0);
            } 
            if(user == null) {
                response.getWriter().print(1);
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

AjaxService:

public User findUser(String username) throws SQLException {
        AjaxDao ajaxDao = new AjaxDao();
        User user = ajaxDao.findUser(username);
        return user;
    }

AjaxDao:

public User findUser(String username) throws SQLException {
        QueryRunner queryRunner = new QueryRunner(C3P0JDBCUtils.getDataSource());
        String sql = "select * from user where username = ?";
        User user = queryRunner.query(sql, new BeanHandler<User>(User.class), username);
        return user;
    }

---

2.采用JQuery方式：

jquery_regist方式：

/**
 * get方法
 */
$(function() {
    $("#username").blur(function() {
        //获取文本框的值
        var username = $(this).val();
        //采用get方法
        $.get("/Web14/JqueryRegistServlet",{"username":username},function(data) {
            if(data == 1) {
                $("#s1").html("<font color='green'>用户名可用</font>");
                //设置注册按钮不可点击
                $("#regBut").attr("disabled",false);
            }
            else if(data == 0) {
                $("#s1").html("<font color='red'>用户名已被占用</font>");
                //设置注册按钮可以点击
                $("#regBut").attr("disabled",true);
            }
        });
    });
});


/**
 * load方法：
 * $(function() {
    $("#username").blur(function() {
        //获得文本框的值
        var username = $(this).val();
        //load方法
        $("#s1").load("/Web14/JqueryRegistServlet",{"username":username});
    });
});
*/

JqueryRegistServlet:

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            response.setContentType("text/html;charset=UTF-8");
            response.setContentType("UTF-8");
            //接收username
            String username = request.getParameter("username");
            AjaxService ajaxService = new AjaxService();
            User user = ajaxService.findUser(username);

            if(user == null) {
                //response.getWriter().print("<font color='green'>用户名可用</font>");
                response.getWriter().print(1);
            }
            if(user != null) {
                //response.getWriter().print("<font color='red'>用户名已被占用</font>");
                response.getWriter().print(0);
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }