Ajax使用原生態JS驗證使用者名稱是否存在_javascript技巧

來源:互聯網
上載者:User

直接上代碼:
reg_ajax.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax請求servlet實現使用者名稱是否存在驗證</title></head><body>  <script type="text/javascript">    /**      * 得到XMLHttpRequest對象      */    function getajaxHttp() {      var xmlHttp;      try {        // Firefox, Opera 8.0+, Safari         xmlHttp = new XMLHttpRequest();      } catch (e) {        // Internet Explorer         try {          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");        } catch (e) {          try {            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");          } catch (e) {            alert("您的瀏覽器不支援AJAX!");            return false;          }        }      }      return xmlHttp;    }    /**      * 發送ajax請求      * url--請求到伺服器的URL      * methodtype(post/get)      * con (true(非同步)|false(同步))      * functionName(回調方法名,不需要引號,這裡只有成功的時候才調用)      * (注意:這方法有二個參數,一個就是xmlhttp,一個就是要處理的對象)      */    function ajaxrequest(url, methodtype, con, functionName) {      //擷取XMLHTTPRequest對象      var xmlhttp = getajaxHttp();      //設定回呼函數(響應的時候調用的函數)      xmlhttp.onreadystatechange = function() {        //這個函數中的代碼在什麼時候被XMLHTTPRequest對象調用?        //當伺服器響應時,XMLHTTPRequest對象會自動調用該回調方法        if (xmlhttp.readyState == 4) {          if (xmlhttp.status == 200) {            functionName(xmlhttp.responseText);          }        }      };      //建立請求      xmlhttp.open(methodtype, url, con);      //發送請求      xmlhttp.send();    }    function checkUsername() {      var username=document.getElementById('username').value;      //調用ajax請求Servlet      ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse);    }    function ckUsernameResponse(responseContents){      if (responseContents=='yes') {        document.getElementById('usernameMsg').innerHTML="<font color='red'>使用者名稱存在</font>";        document.getElementById('username').style="background-color: red";      }else{        document.getElementById('usernameMsg').innerHTML="";        document.getElementById('username').style="background-color: white";      }    }  </script>  <table>    <tr>      <td>使用者名稱</td>      <td><input type="text" id="username" onblur="checkUsername()"/></td>      <td><div id="usernameMsg"></div></td>    </tr>    <tr>      <td>郵箱</td>      <td><input type="text" id="email" /></td>      <td><div id="emailMsg"></div></td>    </tr>  </table></body></html>

請求的Servlet代碼如下,UserServlet.java

package cn.bestchance.servlet;import java.io.IOException;import java.util.ArrayList;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class UserServlet */@WebServlet("/userServlet")public class UserServlet extends HttpServlet {  private static final long serialVersionUID = 1L;  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {    doPost(request, response);  }  /**   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)   */  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {    String username=request.getParameter("username");    //這裡使用ArrayList代替從資料庫中查詢資料    ArrayList<String> userList =new ArrayList<String>();    userList.add("admin");    userList.add("test");    userList.add("chance");    //驗證使用者名稱是否存在    boolean flag = false;    for (String string : userList) {      if(string.equals(username)){        flag = true;        break;      }    }    if(flag){//使用者名稱已存在      response.getWriter().print("yes");    }else{//使用者名稱不存在      response.getWriter().print("no");    }  }}

以上就是本文的全部內容,希望對大家的學習有所協助,也希望大家多多支援雲棲社區。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.