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

2019-11-19 16:55:32

字體：大中小

供稿：網(wǎng)友

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

頁(yè)面：

簡(jiǎn)單的輸入框

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

這里寫(xiě)圖片描述

JS代碼如下：

window.onload=function()    {      var nameElement=document.getElementsByName("username")[0];      //為昵稱選項(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'>該昵稱已注冊(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層查詢

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);  }

測(cè)試：

這里寫(xiě)圖片描述