快捷導(dǎo)航

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

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

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

本文實(shí)例為大家分享了JS驗(yàn)證用戶(hù)名是否存在的具體代碼，供大家參考，具體內(nèi)容如下

直接上代碼:

reg_ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax請(qǐng)求servlet實(shí)現(xiàn)用戶(hù)名是否存在驗(yàn)證</title>
</head>
<body>

 <script type="text/javascript">

  /** 
   * 得到XMLHttpRequest對(duì)象 
   */
  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請(qǐng)求 
   * url--請(qǐng)求到服務(wù)器的URL 
   * methodtype(post/get) 
   * con (true(異步)|false(同步)) 
   * functionName(回調(diào)方法名，不需要引號(hào),這里只有成功的時(shí)候才調(diào)用) 
   * (注意：這方法有二個(gè)參數(shù)，一個(gè)就是xmlhttp,一個(gè)就是要處理的對(duì)象) 
   */
  function ajaxrequest(url, methodtype, con, functionName) {
   //獲取XMLHTTPRequest對(duì)象
   var xmlhttp = getajaxHttp();
   //設(shè)置回調(diào)函數(shù)（響應(yīng)的時(shí)候調(diào)用的函數(shù)）
   xmlhttp.onreadystatechange = function() {
    //這個(gè)函數(shù)中的代碼在什么時(shí)候被XMLHTTPRequest對(duì)象調(diào)用？
    //當(dāng)服務(wù)器響應(yīng)時(shí)，XMLHTTPRequest對(duì)象會(huì)自動(dòng)調(diào)用該回調(diào)方法
    if (xmlhttp.readyState == 4) {
     if (xmlhttp.status == 200) {
      functionName(xmlhttp.responseText);
     }
    }
   };
   //創(chuàng)建請(qǐng)求
   xmlhttp.open(methodtype, url, con);
   //發(fā)送請(qǐng)求
   xmlhttp.send();
  }
  function checkUsername() {
   var username=document.getElementById('username').value;
   //調(diào)用ajax請(qǐng)求Servlet
   ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse);
  }
  function ckUsernameResponse(responseContents){
   if (responseContents=='yes') {
    document.getElementById('usernameMsg').innerHTML="<font color='red'>用戶(hù)名存在</font>";
    document.getElementById('username').style="background-color: red";
   }else{
    document.getElementById('usernameMsg').innerHTML="";
    document.getElementById('username').style="background-color: white";
   }
  }

 </script>

 <table>
  <tr>
   <td>用戶(hù)名</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>

請(qǐng)求的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代替從數(shù)據(jù)庫(kù)中查詢(xún)數(shù)據(jù)
  ArrayList<String> userList =new ArrayList<String>();
  userList.add("admin");
  userList.add("test");
  userList.add("chance");
  //驗(yàn)證用戶(hù)名是否存在
  boolean flag = false;
  for (String string : userList) {
   if(string.equals(username)){
    flag = true;
    break;
   }
  }
  if(flag){//用戶(hù)名已存在
   response.getWriter().print("yes");
  }else{//用戶(hù)名不存在
   response.getWriter().print("no");
  }
 }

}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: