一、环境搭建
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"%>
Insert title here
注册页面
注册页面
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.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"%>
Insert title here
注册页面
案例实现结果
输入数据库中没有的用户信息
用户注册
注册成功
输入数据库中已有的用户信息
用户名已经被注册
三、使用AJAX方式实现案例
在上面的案例中，我们可以发现，当用户输入完注册信息后，点击注册按钮，才会提示用户名已经被注册了，并且页面被刷新了，这样的页面用户体验较差。
现在我们想实现：用户名能够动态的进行判断，如果用户输入一个已经被注册的用户名，直接就会显示提示信息；如果用户点击用户名这个文本框后没有输入信息，并且又点击了其他地方，会提示用户没有输入用户名；并且在实现这些功能的时候，页面不会被刷新。
接下来我们对案例进行改写
对jsp页面进行修改
实现三个功能（页面不刷新）：
（1）用户名文本框失去焦点的时候，提示用户名不能为空
（2）用户名重复，提示用户名已经被注册了
（3）用户名不重复，提示用户名可以注册
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
Insert title here
注册页面
创建一个新的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方式实现案例成果
注册页面
用户名文本框不输入内容失去焦点时
用户名为空
用户名重复时
用户名重复
用户名不重复时
用户名不重复
完成注册
完成注册