1.給使用者名稱文字框繫結失去焦點事件
<input type="text" name="username" onblur="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();
    }