本文共 4447 字，大约阅读时间需要 14 分钟。

前面我们做了一个AJAX练习，就是验证用户名是否存在，现在回到我们的图书管理系统，来写一个如何验证邮箱是否存在的。还是接着之前图书管理后台和前台这个项目，现在是在register.jsp的页面的邮箱验证。

1.项目环境准备

之前我们是在一个单独的AJAX web项目里做的用户名是否存在的验证，现在我们需要把js中获取创建XMLHttpRequest对象的js代码复制过来。这个图书管理系统中有一个js的文件夹，而且下有一个myJS.js，里面也有一段创建XMLHttpRequest对象的代码。

2.Register.jsp引入myJS.js并写checkEmail()方法

2.1表单找到email，添加onblur事件

编辑器打开register.jsp文件，大概在38 39行位置对name=email这个修改代码如下。

2.2 checkEmail()代码

在register.jsp 17 18行写这个checkEmail()方法。

// 验证邮箱是否存在	function checkEmail() {		// 得到用户输入的邮箱		var email =  document.getElementsByName("email")[0];		var xhr = getXMLHttpRequest();		xhr.onreadystatechange = function(){			if(xhr.readyState == 4){				if(xhr.status == 200){//查看服务器响应状态					// 得到font标签内容					var font = document.getElementsByTagName("font")[0];					if(xhr.responseText == "true"){						font.innerHTML="邮箱已被使用";						font.style.color = "red";					}else {						font.innerHTML="邮箱可以使用";						font.style.color = "green";					}				}			}		}		xhr.open("get", "${pageContext.request.contextPath}/checkEmailServlet?email=" + email.value);		xhr.send(null);	}

3.Dao层代码

这开始我们由于要和数据库交互，所以麻烦。我们得先创建一个用户表，我这里用小海豚工具快速创建了一个users表，里面填充两条数据。

3.1创建User这个Bean类

我们前面只有Book和PageBean这两个Bean类，这里来添加一个User.java

根据数据库表字段名称，我们来写User.java的代码

package com.anthony.domain;public class User {	private int id;	private String username;	private String password;	private String email;		public int getId() {		return id;	}		public void setId(int id) {		this.id = id;	}	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;	}	public String getEmail() {		return email;	}	public void setEmail(String email) {		this.email = email;	}		}

3.2 UserDao.java

先创建两个空的java文件，然后分别写代码。

以下是完整的UserDao.java代码

package com.anthony.dao;import java.sql.SQLException;import com.anthony.domain.User;public interface UserDao {	/**	 * 根据email查找用户	 * @param email	 * @return	 * @throws SQLException	 */	public User findUserByEmail(String email) throws SQLException;}

3.3 UserDaoImpl.java

package com.anthony.dao;import java.sql.SQLException;import org.apache.commons.dbutils.QueryRunner;import org.apache.commons.dbutils.handlers.BeanHandler;import com.anthony.datasource.C3P0Utils;import com.anthony.domain.User;public class UserDaoImpl implements UserDao {	@Override	public User findUserByEmail(String email) throws SQLException {		QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());		User user = qr.query("select * from users where email=?", new BeanHandler
   
    (User.class),email);		return user;	}}
   

4. Service层代码

上面完成了表的创建和Dao层的代码，开始写业务逻辑的代码，先创建下面两个文件。

接口文件的代码如下

package com.anthony.service;import com.anthony.domain.User;public interface UserService {		public User findUserByEmail(String email);}

具体实现的代码如下

package com.anthony.service;import java.sql.SQLException;import com.anthony.dao.UserDao;import com.anthony.dao.UserDaoImpl;import com.anthony.domain.User;public class UserServiceImpl implements UserService {		// 创建一个Dao层对象	UserDao ud = new UserDaoImpl();	@Override	public User findUserByEmail(String email) {		try {			return ud.findUserByEmail(email);		} catch (SQLException e) {			e.printStackTrace();		}		return null;	}}

下面开始创建Servlet和写Servlet的代码。

5. Servlet代码

创建一个CheckEmailServlet.java的文件，url映射是/checkEmailServlet

package com.anthony.web.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.anthony.domain.User;import com.anthony.service.UserService;import com.anthony.service.UserServiceImpl;public class CheckEmailServlet extends HttpServlet {	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {		request.setCharacterEncoding("UTF-8");		//1. 拿到参数		String email = request.getParameter("email");		// 根据email去查找用户		UserService us = new UserServiceImpl();		User user = us.findUserByEmail(email);				PrintWriter out = response.getWriter();		//判断邮箱是否存在		if ( user != null) {			out.print("true");		}else {			out.print("false");		}	}	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {		doGet(request, response);	}}

下面开始部署tomcat，重启服务

6. 部署测试

浏览器打开

邮箱输入框输入 , 看看效果

, 看看效果

这篇文章具体代码，都会上传到github项目上

转载地址：http://gjows.baihongyu.com/