Ajax使用原生态JS验证用户名是否存在

Ajax 2019-01-01

直接上代码: reg_ajax.html

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>

<Meta charset="UTF-8"> Ajax请求servlet实现<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>是否存在验证

<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("您的浏览器<a href="https://www.jb51.cc/tag/buzhichi/" target="_blank" class="keywords">不支持</a>AJAX！");
        return false;
      }
    }
  }
  return xmlHttp;
}
/** 
 * 发送ajax请求 
 * url--请求到服务器的URL 
 * methodtype(post/get) 
 * con (true(异步)|false(同步)) 
 * functionName(回调<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>名，不需要引号,这里只有成功的时候才<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>) 
 * (注意：这<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>有二个参数，<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>就是xmlhttp,<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>就是要处理的对象) 
 */
function ajaxrequest(url,methodtype,con,functionName) {
  //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>XMLHTTPRequest对象
  var xmlhttp = getajaxHttp();
  //设置回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>（响应的时候<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>的<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>）
  xmlhttp.onreadystatechange = function() {
    //这个<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>中的<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>在什么时候被XMLHTTPRequest对象<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>？
    //当服务器响应时，XMLHTTPRequest对象会<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a><a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>该回调<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>
    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;
  //<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>ajax请求Servlet
  ajaxrequest("userServlet?username="+username,"POST",true,ckUsernameResponse);
}
function ckUsernameResponse(responseContents){
  if (responseContents=='yes') {
    document.getElementById('usernameMsg').innerHTML="<font color='red'><a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>存在</font>";
    document.getElementById('username').style="background-color: red";
  }else{
    document.getElementById('usernameMsg').innerHTML="";
    document.getElementById('username').style="background-color: white";
  }
}

<table>
<tr>
<td>用户名</td>
<td><input type="text" id="username" onblur="checkUsername()"/></td>
<td><div id="usernameMsg">

</td>
</tr>
<tr>
<td>邮箱</td>
<td></td>
<td><div id="emailMsg">
</td>
</tr>
</table>

请求的Servlet代码如下，UserServlet.java

rush: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,IOException {
    String username=request.getParameter("username");
    //这里使用ArrayList代替从数据库中查询数据
    ArrayList userList =new ArrayList();
    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");
    }
    }

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

ajax验证用户名是否存在js验证用户名验证用户名是否存在

相关文章

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但...
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不...
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页...
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以...
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...