AJAX-校验用户名是否可用

1.给用户名文本框绑定失去焦点事件
<input type="text" name="username" οnblur="validateUsername()" id="username"/>

2.创建XMLHttpRequest对象
if (window.XMLHttpRequest)
{
    xhr=new XMLHttpRequest();
}else if (window.ActiveXObject)
{
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

3.创建请求，指定回调函数，并定义回调函数，发送请求

xhr.open("get","UserServlet/validateUsername?username="+username,true);//创建请求

xhr.onreadystatechange=callback;//callback是一个函数的名称

xhr.send();//发送请求    

4.定义回调函数：

function callback()
    {
        //alert(4);
        //server会拿着用户名去数据库的用户表中查，如果存在，则notuse，如果不存在，则canuse
        //我们需要拿到这个返回信息，然后根据结果进行提示
        if(xhr.readyState==4)//这个值有5种情况：0,1,2,3,4，4表示HTTP 响应已经完全接收
        {
            if(xhr.status==200)//HttpServletResponse
            {
                //alert(2);
                var mess=xhr.responseText;
                //alert(mess);
                if(mess=="canuse")
                {
                    document.getElementById("message").innerHTML="<font color='green'>请放心使用</font>";
                }else
                {
                    document.getElementById("message").innerHTML="<font color='red'>此用户名太受欢迎,请更换一个</font>";
                }
            }
        }
    }

5.定义服务器端的servlet：
private void validateUsername(HttpServletRequest request,
            HttpServletResponse response) {
        String username=request.getParameter("username");
        System.out.println(username);
        
        //怎么响应客户端呢？
        //数据传输过程中预防乱码
        response.setCharacterEncoding("utf-8");
        //告诉浏览器使用什么方式解析
        response.setContentType("text/plain;charset=utf-8");
        PrintWriter out=null;
        try {
            out=response.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        if("zhangsan".equals(username))//名字是zhangsan，不能用
        {
            out.write("notuse");
        }else {//其他可用
            out.write("canuse");
        }
        out.flush();
    }