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

2019-11-20 09:02:22

字体：大中小

来源：转载

供稿：网友

直接上代码:
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");    }  }}

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

上一篇：js动态生成form 并用ajax方式提交的实现方法

下一篇：jQuery子元素过滤选择器用法示例