一、环境搭建

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页面

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表达式将用户名被注册的信息提示出来，并在用户名文本框中显示用户之前输入的用户名。

pageEncoding="UTF-8"%>

Insert title here

注册页面

用户名：${error}

密码：

案例实现结果

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

用户注册

注册成功

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

用户名已经被注册

三、使用AJAX方式实现案例

在上面的案例中，我们可以发现，当用户输入完注册信息后，点击注册按钮，才会提示用户名已经被注册了，并且页面被刷新了，这样的页面用户体验较差。

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

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

对jsp页面进行修改

实现三个功能(页面不刷新)：

(1)用户名文本框失去焦点的时候，提示用户名不能为空

(2)用户名重复，提示用户名已经被注册了

(3)用户名不重复，提示用户名可以注册

pageEncoding="UTF-8"%>

Insert title here

//为用户名文本框添加这个方法，在文本框失去焦点以后运行

//就是当用户填写完用户名后，进行下一步填写的时候，异步执行这个方法

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();

}

注册页面

用户名：

密码：

创建一个新的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方式实现案例成果

注册页面

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

用户名为空

用户名重复时

用户名重复

用户名不重复时

用户名不重复

完成注册

完成注册