Ajax使用原生態(tài)JS驗證用戶名是否存在

更新時間：2020年05月26日 17:05:38 作者：chance2015

這篇文章主要為大家詳細介紹了Ajax使用原生態(tài)JS驗證用戶名是否存在的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS驗證用戶名是否存在的具體代碼，供大家參考，具體內容如下

直接上代碼:

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;
  }
  /** 
   * 發(fā)送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);
     }
    }
   };
   //創(chuàng)建請求
   xmlhttp.open(methodtype, url, con);
   //發(fā)送請求
   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");
  }
 }

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: