注册页面的异步交互

思路如下：创建注册页面，创建servlet响应数据，servlet查询到数据库所有的用户名，得到页面输入的用户名的值，判断是否跟数据库的用户名重复，如果重复，利用Ajax响应页面。

注册页面：仅为测试，无好看的样式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<form action="/addServlet" method="post">
用户名<input id="user" type="text" name="username"/>
    <span id="dulp" style="display:none;color: red">用户名已存在</span>
    <br/>
密码 <input type="password" name="password"><br/>
<input type="submit">
</form>
<script>
document.getElementById("user").onblur=function () {
    var xhttp=new XMLHttpRequest();
    var username=this.value;
    xhttp.open("GET","http://localhost:8088/selectAllServlet?username="+username,true)
    xhttp.send("")
    xhttp.onreadystatechange=function() {
        if(this.readyState=4&&this.status==200){
            if(this.responseText=="true"){
                document.getElementById("dulp").style.display='';
            }
            else {
                document.getElementById("dulp").style.display="none";
            }
        }
    }
}
</script>
</body>
</html>

servlet响应

@WebServlet(urlPatterns = "/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    private  UserService userService = new UserService();

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<UserInfo> userInfos = userService.selectAll();
        String t = request.getParameter("username");
        for (UserInfo userInfo : userInfos) {
            if(userInfo.getUserName().equals(t)){
                response.getWriter().write("true");
                System.out.println(true);
                return;
            }
        }
    }
}