快捷導(dǎo)航

Ajax驗(yàn)證用戶(hù)名或昵稱(chēng)是否已被注冊(cè)

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

本文主要介紹了Ajax驗(yàn)證用戶(hù)名或昵稱(chēng)是否已被注冊(cè)的實(shí)例方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

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

頁(yè)面：

簡(jiǎn)單的輸入框

<body>
  昵稱(chēng)：<input type="text" name="username" ><span id="msg">請(qǐng)輸入昵稱(chēng)</span><br>
  密碼：<input type="password" name="password">
 </body>

這里寫(xiě)圖片描述

JS代碼如下：

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

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

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：僅僅為了測(cè)試，并沒(méi)有真正從dao層查詢(xún)

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

    doGet(request, response);
  }

測(cè)試：

這里寫(xiě)圖片描述