網上搜了些實時監測使用者名稱的指令碼例子，沒效果，結合其他資料寫了下面這個，實現在使用者名稱輸入框失去焦點時，檢測使用者名稱是否可用，並修改當前頁面的樣式。

<form action="../CheckUserNameExistServerlet " method="post" name="signup_form">

        ............

<input class="input_1" id="user_name" maxlength="30" name="user[name]"   size="30" type="text" title="" onblur="validate_User_name();" />

        ............

//user_name輸入框失去焦點後，執行指令碼

function validate_User_name() {
    var user_already_exist = 0;

    var user_name = document.getElementById("user_name");

    /*同步驗證資料庫中是否已經存在該使用者名稱*/
    user_already_exist = check_User_Name_Exist();
    if(user_already_exist == 1){

        //如果使用者名稱已經存在，提示使用者使用者名稱不可用，樣式validation-failed讓輸入框變色
        user_name.setAttribute("title","使用者名稱已被佔用");
        user_name.setAttribute("class","input_1 validation-failed");
    }else{
        user_name.setAttribute("title","");
        user_name.setAttribute("class","input_1");
    }
    return;
}


/* 連線後臺檢查使用者名稱是否可用 */
function check_User_Name_Exist(){
    var user_Name_Used_Check = 0;
    var ajax = GetXMLHttpRequestObj();

    //將使用者名稱傳送給servlet或jsp處理，這裡傳送給servlet
    var urlString = "../CheckUserNameExistServerlet ?user[name]="+document.getElementById('user_name').value;
    //var urlString = "./checkUserNameExistServerlet.jsp?user[name]="+document.getElementById('user_name').value;


    //等待使用者名稱檢查完成
    ajax.open("get", urlString, false);
    ajax.send(null);

    ajax.onreadystatechange = (function(){
      if (ajax.readyState == 4 && ajax.status == 200){
        //ajax.responseText是伺服器的返回值，0：使用者名稱可用；1：使用者名稱已被佔用，

       //只需要在檢查的頁面或servlet試用out.print(XXX)即可將結果寫入ajax.responseText。             

       //responseText中有很多空格，需要處理掉才能正確判斷返回的結果

        if(ajax.responseText.trim() == "0"){
          user_Name_Used_Check = 0;
        } else {
          user_Name_Used_Check = 1;
        }
      }
    })();
    
    return user_Name_Used_Check;
}



/*建立XMLHttpRequest物件*/
function GetXMLHttpRequestObj()
{
  var ajax=false;
   try{
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e){
     try{
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
     }catch (E){
      ajax = false;
     }
   }
   if (!ajax && typeof XMLHttpRequest!='undefined')   {
    ajax = new XMLHttpRequest();
   }
   return ajax;
}

//servlet部分程式碼

public class CheckUserNameExistServerlet extends HttpServlet {

response.setContentType("text/html");

response.setCharacterEncoding("gb2312");

PrintWriter out = response.getWriter();

//顯示使用者的全部資訊

//得到要顯示的使用者名稱

String user_name = request.getParameter("user[name]");

Integer uer_Name_chechk_Exist_result = 0;

UserBeanBO ubo=new UserBeanBO();

//getUserBeanByUsername登陸資料庫查詢是否有名為user_name 的使用者存在，不存在則返回null。

UserBean ub=ubo.getUserBeanByUsername(user_name);

if(null == ub){

uer_Name_chechk_Exist_result = 0;

System.out.println("使用者名稱可用");

}else{

uer_Name_chechk_Exist_result = 1;

System.out.println("使用者名稱不可用");

}

//直接將結果用out.println輸出即可

out.println(uer_Name_chechk_Exist_result);