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

前端之家收集整理的这篇文章主要介绍了Ajax使用原生态JS验证用户名是否存在前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

直接上代码: 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>有二个参数,一个就是xmlhttp,一个就是要处理的对象) 
 */
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

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

}

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

原文链接:https://www.f2er.com/ajax/45957.html

猜你在找的Ajax相关文章