Ajax如何異步檢查用戶名是否存在

這篇文章主要介紹了Ajax如何異步檢查用戶名是否存在，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

下面是用JS獲取用戶Id然后將其發送給user_validate.jsp頁面，然后通過callback方法接收頁面返回的消息并通知用戶。

function validate(field) { 
  if (trim(field.value).length != 0) { 
    //創建Ajax核心對象XMLHttpRequest 
    createXMLHttpRequest(); 
     
    var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime(); 
     
    //設置請求方式為GET，設置請求的URL，設置為異步提交 
    xmlHttp.open("GET", url, true); 
     
    //將方法地址復制給onreadystatechange屬性 
    //類似于電話號碼 
    xmlHttp.onreadystatechange=callback; 
     
    //將設置信息發送到Ajax引擎 
    xmlHttp.send(null); 
  } else { 
    document.getElementById("spanUserId").innerHTML = ""; 
  } 
} 
 
function callback() { 
  //alert(xmlHttp.readyState); 
  //Ajax引擎狀態為成功 
  if (xmlHttp.readyState == 4) { 
    //HTTP協議狀態為成功 
    if (xmlHttp.status == 200) { 
      if (trim(xmlHttp.responseText) != "") { 
        //alert(xmlHttp.responseText); 
        document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"; 
      }else { 
        document.getElementById("spanUserId").innerHTML = ""; 
      } 
    }else { 
      alert("請求失敗，錯誤碼=" + xmlHttp.status); 
    } 
  } 
}

user_validate.jsp頁面接收用戶Id并根據Id查詢是否已存在，如果存在返回，不存在什么也不返回。

<% 
  String userId = request.getParameter("userId"); 
  if(UserManager.getInstance().findUserById(userId) != null) { 
    out.println("用戶代碼已經存在"); 
  } 
%>

當光標離開用戶代碼文本框觸發檢查方法。

<input name="userId" type="text" id="userId" size="10" maxlength="10"  value="<%=userId %>" onblur="validate(this)">

效果圖

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Ajax如何異步檢查用戶名是否存在”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!