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

快意江湖

2016-09-09

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

}

ajax js代码 xmlhttp js