ajax方式提交表单数据并判断当前注册用户是否存在

项目的目录结构

源代码：

regservlet.java

package register;

import java.io.IOException;
import java.io.PrintWriter;

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 regservlet
 */
@WebServlet("/regservlet")
public class regservlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public regservlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();

        // 获取用户名
        String name = request.getParameter("username");

        // 模拟数据库
        if ("张运涛".equals(name)) {
            // out.println("用户名已存在");
            out.println("<font color=red>用户名已存在</font>");
        } else if (name.equals("")) {
            out.println("<font color=red>用户名不能为空</font>");
        } else {
            // out.println("用户名可以使用");
            out.println("<font color=blue>用户名可以使用</font>");
        }

        out.flush();
        out.close();

    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

window.onload = function() {
    document.getElementById("username").onblur = function() {

        // 获取<input type="text" name="username" value="" id="username">
        var username = document.getElementById("username").value;

        // 1
        var xmlHttp = ajaxFunction();

        // 2
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200 || xmlHttp.status == 304) {
                    var data = xmlHttp.responseText;
                    document.getElementById("divcheck").innerHTML = data;
                }
            }

        }

        // 3
        xmlHttp.open("post", "../regservlet?timeStamp=" + new Date().getTime(),
                true);
        xmlHttp.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded");

        // 4
        xmlHttp.send("username=" + username);
    }
}

function ajaxFunction() {
    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {// Internet Explorer
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
            }
        }
    }
    return xmlHttp;
}

<%@ page language="java" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>校验用户名是否存在</title>
<script type="text/javascript" src="./register.js">
    
</script>
</head>
<body>
    <center>
        <form action="" enctype="application/x-www-form-urlencoded">
            <h3>请填写用户注册信息</h3>
            <table border="1">
                <tr>
                    <td>用户名:</td>
                    <td><input type="text" name="username" value="" id="username">
                        <!--  用户名已存在显示在div 中 -->
                        <div id="divcheck"></div>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="psw" value=""></td>
                </tr>

            </table>

        </form>
    </center>
</body>

</html>

运行截图：

完整源代码https://pan.baidu.com/s/1PSjQuU96emWL1UYYMKwlaA