Ajax非同步處理當使用者申請新使用者

Ajax非同步處理當使用者申請新使用者時，輸完使用者名稱滑鼠點擊其他地方後就彈出提示該使用者名稱是否註冊的方法：

 

Ajax處理的JS代碼:

<script language="javascript">

var xmlHttpReq;
function createXmlHttpRequest() {
 if (window.XMLHttpRequest) {
  xmlHttpReq = new XMLHttpRequest();
 } else {
  xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
 }
}
function checkUser() {
 createXmlHttpRequest();
 xmlHttpReq.onreadystatechange = handle;
 var username = document.getElementById("username").value;
 var test_username = document.getElementById("test_username");
 test_username.style.display = "none";
 if (username == "") {
  test_username.style.display = "block";
  alert("username Can not be empty");
 } else {

  //url是一個跳轉地址，把使用者名稱傳過去跳到Action層去調用checkUser方法進行驗證
  var url = "system/login-checkUser?username=" + username + "&time=" + new Date().getTime();
  xmlHttpReq.open("get", url, true);
  xmlHttpReq.onreadystatechange = handle;
  xmlHttpReq.send(null);
 }
}
function handle() {
 if (xmlHttpReq.readyState == 4) {
  if (xmlHttpReq.status == 200) {
   var res = xmlHttpReq.responseText;
   var result = document.getElementById("test_username");
   result.style.display = "";
   result.innerHTML = res;   //設定提示資訊
  }
 }
}

</script>

 

JSP頁面調用：

<tr>
      <td width="104"><div align="right">使用者名稱：${userexist}</div></td>
      <td width="201" height="24"><input name="userdto.username" type="text"        class="inputcontent" id="username" value="" onblur="checkUser()" size="20" >       
      <span class="star">*</span></td>
    <td width="473"><div id="test_username" style="display:none"><font color="#FF0000">使用者名稱不可為空</font></div></td>
    </tr>

 

Action層驗證使用者是否存在方法：

 

/**驗證使用者名稱是否存在**/
 public void checkUser(){
  try {
   HttpServletRequest request = ServletActionContext.getRequest();
   HttpServletResponse response = ServletActionContext.getResponse();
   PrintWriter pw = response.getWriter();
   String username = request.getParameter("username");
   if(userManageBiz.checkUser(username)){
    pw.println("<font color='red'> 該使用者名稱已經存在，請重新輸入！</font><input type='hidden'  name='userexist' value='userexist'/>");
   }else pw.println("<font color='blue'> 恭喜你，這個使用者名稱可以用！</font>");
   
  } catch (IOException e) {
   e.printStackTrace();
  }
 }