Ajax案例——检验用户名是否重复

作者: 嗷老板 | 来源:发表于2018-04-08 10:06 被阅读0次

一、环境搭建

1、导包

这个案例中使用的jar包有三个，需要导入到WEB-INF目录下的lib文件夹中。

导包

2、导入工具库

本案例使用的工具类是之前用过的JDBCUtils。

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import javax.sql.DataSource;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class JDBCUtils {
    // 创建一个连接池：但是这个连接池只需要创建一次即可。
    private static final ComboPooledDataSource dataSource = new ComboPooledDataSource();
    
    /**
     * 获得连接的方法
     * @throws SQLException 
     */
    public static Connection getConnection() throws SQLException{
        return dataSource.getConnection();
    }
    
    /**
     * 获得数据源:
     */
    public static DataSource getDataSource(){
        return dataSource;
    }
    
}

3、创建数据库和表

打开mysql数据库，创建数据库和表，并添加一些记录。

create database ajax_test;

use ajax_test;

create table user (
    uid int primary key auto_increment,
    username varchar(30),
    password varchar(20)
);

insert into user(username,password) values ('itheima','123456');
insert into user(username,password) values ('itcast','qwerty');

数据库

4、修改配置文件

配置文件

二、使用传统的方式实现案例

1、创建JavaBean

package com.itheima.domain;

import java.io.Serializable;

public class User implements Serializable {
    private int uid;
    private String username;
    private String password;

    public User() {
        super();
        // TODO Auto-generated constructor stub
    }

    public int getUid() {
        return uid;
    }

    public void setUid(int uid) {
        this.uid = uid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

}

2、编写regist.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h1>注册页面</h1>
    <form action="${pageContext.request.contextPath}/RegistServlet" method="post">
    用户名：<input type="text" name="username"/>
    <br />
    密码：<input type="text" name="password"/>
    <br />
    <input type="submit" value="注册"/>
    </form>
</body>
</html>

注册页面

3、编写RegisterServlet类

RegisterServlet类中仅仅实现请求数据的获取和返回响应信息，逻辑放入UserService类中进行判断。

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

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.itheima.domain.User;
import com.itheima.service.UserService;

public class RegisterServlet extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置响应类型定和编码
        response.setContentType("text/html;charset:UTF-8");
        //获取输出流对象
        PrintWriter out = response.getWriter();
        
        //获取表单提交的数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        
        //封装数据
        User user = new User(null,username,password);
        
        //将数据传入service进行逻辑判断
        UserService service = new UserService();
        Boolean flag = service.checkUsername(username);
    }

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

}

4、编写UserService类

UserService类实现对逻辑的判断，用户名是否已经被注册，但是数据库中数据的获取需要在UserDao类中实现。

import java.util.List;

import com.itheima.dao.UserDao;
import com.itheima.domain.User;

public class UserService {
    public Boolean checkUsername(String username){
        //查询数据库中是否已经有该用户名
        UserDao dao = new UserDao();
        User user = dao.findUserByUsername(username);
    }
}

5、编写UserDao类

在UserDao类中实现对数据库中数据的查询，查询数据库中是否有用户注册时输入的用户名的信息。

package com.itheima.dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;

import com.itheima.domain.User;
import com.itheima.utils.JDBCUtils;

public class UserDao {
    

    public User findUserByUsername(String username) {
        User user = null;
        QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
         try {
            user = qr.query("select * from user where username = ?", new BeanHandler<User>(User.class), username);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
        return user;
    }
}

6、完善UserService类

如果UserDao类中返回的User对象为空，说明这个用户名没有被注册过，返回一个true，否则返回false。

package com.itheima.service;

import java.util.List;

import com.itheima.dao.UserDao;
import com.itheima.domain.User;

public class UserService {
    public Boolean checkUsername(String username){
        //查询数据库中是否已经有该用户名
        UserDao dao = new UserDao();
        User user = dao.findUserByUsername(username);
        
        //如果返回null，说明该用户名没有注册
        if(user == null){
            return true;
        }
        
        return false;
    }
}

7、完善RegisterServlet类

如果UserService中的service方法返回的是true，说明用户名没有被注册，返回注册成功的提示信息；如果返回的是false，说明用户名已经被注册，设置域对象，转发请求信息，提示用户名已经被注册。

package com.itheima.servlet;

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

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.itheima.domain.User;
import com.itheima.service.UserService;

public class RegisterServlet extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置响应类型定和编码
        response.setContentType("text/html;charset:UTF-8");
        //获取输出流对象
        PrintWriter out = response.getWriter();
        
        //获取表单提交的数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        
        //封装数据
        User user = new User(null,username,password);
        
        //将数据传入service进行逻辑判断
        UserService service = new UserService();
        Boolean flag = service.checkUsername(username);
        
        //如果返回true，说明用户名没有被创建，可以注册
        if(flag){
            out.println("恭喜您！注册成功！");
        }else{
            //如果用户名已经被注册了，则设置域对象，返回提示性信息
            request.setAttribute("error", "用户名已经被注册了！");
            request.setAttribute("user", user);
            //将请求转发回注册页面
            request.getRequestDispatcher("/register.jsp").forward(request, response);
            return;
        }
    }

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

}

8、完善注册页面

对注册页面进行完善，使用el表达式将用户名被注册的信息提示出来，并在用户名文本框中显示用户之前输入的用户名。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h1>注册页面</h1>
    <form action="${pageContext.request.contextPath}/registServlet" method="post">
    用户名：<input type="text" name="username" value="${user.username}"/><span>${error}</span>
    <br />
    密码：<input type="text" name="password"/>
    <br />
    <input type="submit" value="注册"/>
    </form>
</body>
</html>

案例实现结果

输入数据库中没有的用户信息

用户注册

注册成功
输入数据库中已有的用户信息

用户名已经被注册

三、使用AJAX方式实现案例

在上面的案例中，我们可以发现，当用户输入完注册信息后，点击注册按钮，才会提示用户名已经被注册了，并且页面被刷新了，这样的页面用户体验较差。
现在我们想实现：用户名能够动态的进行判断，如果用户输入一个已经被注册的用户名，直接就会显示提示信息；如果用户点击用户名这个文本框后没有输入信息，并且又点击了其他地方，会提示用户没有输入用户名；并且在实现这些功能的时候，页面不会被刷新。

接下来我们对案例进行改写

对jsp页面进行修改
实现三个功能（页面不刷新）：
（1）用户名文本框失去焦点的时候，提示用户名不能为空
（2）用户名重复，提示用户名已经被注册了
（3）用户名不重复，提示用户名可以注册

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //为用户名文本框添加这个方法，在文本框失去焦点以后运行
    //就是当用户填写完用户名后，进行下一步填写的时候，异步执行这个方法
    function checkUsername(){
        //获取用户名文本框对象
        var username = document.getElementsByName("username")[0].value;
        //获取提示信息span对象
        var span1 = document.getElementsByTagName("span")[0];
        if(username == ""){
            span1.innerHTML = "用户名不能为空！";
            return;
        }
        
        //创建请求对象
        var xmlHttp = new XMLHttpRequest();
        
        //设置请求状态变化时触发的事件
        xmlHttp.onreadystatechange = function(){
            //如果请求状态码为4，说明请求已经完成，响应已经就绪
            if(xmlHttp.readyState == 4){
                //响应状态码为200，响应完成
                if(xmlHttp.status == 200){
                    //获取服务器返回的信息
                    var data = xmlHttp.responseText;
                    //判断返回的信息，输出响应的提示信息
                    if(data == 0){
                        //如果返回0，说明用户名不重复，可以使用
                        span1.innerHTML = "用户名可以使用！";
                    }else{
                        //说明用户名重复，不能使用
                        span1.innerHTML = "用户名已经被注册！";
                    }
                }
            }
        }
            //创建连接
            xmlHttp.open("GET","/web14_test1/RegisterAJAXServlet?username="+username,true);
            
            //发送请求
            xmlHttp.send();
        
    }
</script>
</head>
<body>
    <h1>注册页面</h1>
    <form action="${pageContext.request.contextPath}/RegisterServlet" method="post">
    用户名：<input type="text" name="username" onblur="checkUsername();"/><span></span>
    <br />
    密码：<input type="text" name="password"/>
    <br />
    <input type="submit" value="注册"/>
    </form>
</body>
</html>

创建一个新的RegisterAJAXServlet
我们可以将RegisterServlet类的代码复制过来进行修改，返回简单的提示信息，由js方法进行判断，所以就不用设置响应编码，也不用获取用户输入的密码。
这里就体现了我们MVC三层架构的好处，只需要修改servlet，逻辑层和数据层都不需要修改。

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

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.itheima.domain.User;
import com.itheima.service.UserService;

public class RegisterAJAXServlet extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取输出流对象
        PrintWriter out = response.getWriter();
        
        //获取表单提交的数据
        String username = request.getParameter("username");

        //将数据传入service进行逻辑判断
        UserService service = new UserService();
        Boolean flag = service.checkUsername(username);
        
        //AJAX方式
        if(flag){
            //如果返回true，说明用户名没有被创建，可以注册,返回0
            out.println(0);
        }else{
            //用户名已经被注册，返回1
            out.println(1);
        }
    }

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

}

AJAX方式实现案例成果

注册页面
用户名文本框不输入内容失去焦点时

用户名为空
用户名重复时

用户名重复
用户名不重复时

用户名不重复
完成注册

完成注册