快捷導(dǎo)航

Ajax驗證用戶名或昵稱是否已被注冊

更新時間：2017年04月05日 14:15:30 作者：甄情

本文主要介紹了Ajax驗證用戶名或昵稱是否已被注冊的實例方法。具有很好的參考價值。下面跟著小編一起來看下吧

JavaScript中XMLHttpRequest對象是整個Ajax技術(shù)的核心，它提供了異步發(fā)送請求的能力。而用戶名或昵稱的驗證就可以使XMLHttpRequest對象實現(xiàn)。下面是個小例子。

頁面：

簡單的輸入框

<body>
  昵稱：<input type="text" name="username" ><span id="msg">請輸入昵稱</span><br>
  密碼：<input type="password" name="password">
 </body>

這里寫圖片描述

JS代碼如下：

window.onload=function()
    {
      var nameElement=document.getElementsByName("username")[0];
      //為昵稱選項注冊onblur事件
      nameElement.onblur=function()
      {
        var name=this.value;
        //1.獲取XMLHttpRequest對象
        var req=getXMLHttpRequest();
        //4.處理響應(yīng)結(jié)果
        req.onreadystatechange=function(){
          if(req.readyState==4){//XMLHttpRequest對象讀取成功
            if(req.status==200){//服務(wù)器相應(yīng)正常
              var msg=document.getElementById("msg");
              //根據(jù)返回的結(jié)果顯示不同的信息
              if(req.responseText=="true"){
                msg.innerHTML="<font color='red'>該昵稱已注冊</font>";
              }else{
                msg.innerHTML="<font color='green'>可以使用</font>";
              }
            }
          }
        }
        //2.建立一個連接
        req.open("get","${pageContext.request.contextPath}/servlet/checkUserServlet?name="+name);
        //3.發(fā)送get請求
        req.send(null);
      }
    }

getElementsByName方法，根據(jù)瀏覽器的不同獲得不同的XMLHttpRequest對象（提供異步發(fā)送請求的能力）：

function getXMLHttpRequest(){
  var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}

servlet：僅僅為了測試，并沒有真正從dao層查詢

public void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    PrintWriter pw=response.getWriter();
    String name=request.getParameter("name");
    //判斷昵稱是否已被使用
    if("tom".equals(name)){
      pw.print(true);
    }else{
      pw.print(false);
    }
  }
  public void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    doGet(request, response);
  }

測試：

這里寫圖片描述