Ajax进阶篇(一)——异步校验用户名

深碍√TFBOYSˉ_ 2021-12-13 14:17 339阅读 0赞

我们要做的是异步校验用户名的案例，很多网站上实现注册功能的时候，需要输入用户名，当光标离开文本框的时候，会给我们这样一个提示：显示用户名已经存在或者用户名可以使用！我们首先来看一下要做出来的效果：  
![在这里插入图片描述][20190707223256805.gif]

# 搭建环境 #

新建一个动态Web项目，比如AjaxProject。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]  
并在WebContent根目录下创建一个用户注册页面，即register.jsp。

然后，在MySQL数据库中新建一个user数据库，并在该数据库中新建一个t\_user表，表中记录类似如下：  
![在这里插入图片描述][20190707223315135.png]  
由于建库建表语句非常简单，所以这里我就省略不写了。

# 异步校验用户名 #

开发环境搭建好了之后，接下来我们就要编写程序，异步校验用户名了。

## 开发数据访问层(dao、dao.impl) ##

为了提升程序的数据库访问性能，我们通常应在项目开发中使用C3P0数据源。所以应在类目录下加入C3P0的配置文件：c3p0-config.xml。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]  
c3p0-config.xml配置文件的内容如下：

<?xml version="1.0" encoding="UTF-8"?>
    <c3p0-config>
    	
    	<default-config>
    		<property name="driverClass">com.mysql.jdbc.Driver</property>
    		<property name="jdbcUrl">jdbc:mysql://localhost:3306/user</property>
    		<property name="user">root</property>
    		<property name="password">liayun</property>
    
    		<property name="initialPoolSize">10</property>
    		<property name="maxIdleTime">30</property>
    		<property name="maxPoolSize">100</property>
    		<property name="minPoolSize">10</property>
    		<property name="maxStatements">200</property>
    	</default-config>
    
    	<named-config name="oracle">
    		<property name="acquireIncrement">50</property>
    		<property name="initialPoolSize">100</property>
    		<property name="minPoolSize">50</property>
    		<property name="maxPoolSize">1000</property>
    
    		
    		<property name="maxStatements">0</property>
    		<property name="maxStatementsPerConnection">5</property>
    
    		
    		<user-overrides user="master-of-the-universe">
    			<property name="acquireIncrement">1</property>
    			<property name="initialPoolSize">1</property>
    			<property name="minPoolSize">1</property>
    			<property name="maxPoolSize">5</property>
    			<property name="maxStatementsPerConnection">50</property>
    		</user-overrides>
    	</named-config>
    </c3p0-config>

也是为了简化JDBC的开发，我们使用Apache组织提供的一个开源JDBC工具类库——commons-dbutils-1.4.jar。然后在com.meimeixia.util包下创建一个工具类——JDBCUtil02.java，用于读取C3P0的xml配置文件创建数据源，该工具类的具体代码如下：

package com.meimeixia.util;
    
    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 JDBCUtil02 { 
    	static ComboPooledDataSource dataSource = null;
    	
    	static { 
    		dataSource = new ComboPooledDataSource();
    	}
    	
    	public static DataSource getDataSource() { 
    		return dataSource;
    	}
    	
    	/** * 获取连接对象 * @return * @throws SQLException */
    	public static Connection getConn() throws SQLException{ 
    		return dataSource.getConnection();
    	}
    	
    	/** * 释放资源 * @param conn * @param st * @param rs */
    	public static void release(Connection conn , Statement st , ResultSet rs){ 
    		closeRs(rs);
    		closeSt(st);
    		closeConn(conn);
    	}
    	
    	public static void release(Connection conn , Statement st){ 
    		closeSt(st);
    		closeConn(conn);
    	}
    	
    	private static void closeRs(ResultSet rs){ 
    		try { 
    			if(rs != null){ 
    				rs.close();
    			}
    		} catch (SQLException e) { 
    			e.printStackTrace();
    		}finally{ 
    			rs = null;
    		}
    	}
    	
    	private static void closeSt(Statement st){ 
    		try { 
    			if(st != null){ 
    				st.close();
    			}
    		} catch (SQLException e) { 
    			e.printStackTrace();
    		}finally{ 
    			st = null;
    		}
    	}
    	
    	private static void closeConn(Connection conn){ 
    		try { 
    			if(conn != null){ 
    				conn.close();
    			}
    		} catch (SQLException e) { 
    			e.printStackTrace();
    		}finally{ 
    			conn = null;
    		}
    	}
    }

准备好以上这些工作之后，我们正式步入开发数据库访问层的阶段。在com.meimeixia.dao包下创建一个UserDao接口，该接口的具体代码如下：

package com.meimeixia.dao;
    
    import java.sql.SQLException;
    
    public interface UserDao { 
    	
    	/** * 用于检测用户名是否存在 * @param username * @return true：存在，false：不存在 */
    	boolean checkUsername(String username) throws SQLException;
    	
    }

紧接着在com.meimeixia.dao.impl包中新建UserDao接口的实现类，即UserDaoImpl类，该实现类的代码如下：

package com.meimeixia.dao.impl;
    
    import java.sql.SQLException;
    
    import org.apache.commons.dbutils.QueryRunner;
    import org.apache.commons.dbutils.handlers.ScalarHandler;
    
    import com.meimeixia.dao.UserDao;
    import com.meimeixia.util.JDBCUtil02;
    
    public class UserDaoImpl implements UserDao { 
    
    	@Override
    	public boolean checkUsername(String username) throws SQLException { 
    		QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
    		String sql = "select count(*) from t_user where username = ?";
    		Long result = (Long) runner.query(sql, new ScalarHandler(), username);
    		return result > 0;
    	}
    
    }

## 开发web层 ##

当某人在用户注册页面填写用户信息进行注册时，键入用户名之后，会发送请求给服务器端，所以应将请求交给一个Servlet进行处理。于是，我们要在com.meimeixia.servlet中新建一个CheckUsernameServlet，用于校验用户名是否在数据库中已存在。

package com.meimeixia.servlet;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.meimeixia.dao.UserDao;
    import com.meimeixia.dao.impl.UserDaoImpl;
    
    public class CheckUsernameServlet extends HttpServlet { 
    	
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    		try { 
    			//1. 检测是否存在
    			String name = request.getParameter("name");
    			
    			System.out.println("name = " + name);
    			
    			UserDao dao = new UserDaoImpl();
    			boolean isExist = dao.checkUsername(name);
    			
    			//2. 通知页面，到底有还是没有
    			if (isExist) { 
    				response.getWriter().println(1);//存在该用户名
    			} else { 
    				response.getWriter().println(2);//不存在该用户名
    			}
    		} catch (Exception e) { 
    			e.printStackTrace();
    		}
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    		doGet(request, response);
    	}
    
    }

这样，客户端发送请求的同时，不仅想传送一些数据，而且还想获取服务器端回送的数据，那么register.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>
    <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try { // Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } function checkUsername() { //获取输入框的值 var name = document.getElementById("name").value; //alert("name = " + name); //1. 创建对象 var request = ajaxFunction(); //2. 发送请求 request.open("POST", "/AjaxProject/CheckUsernameServlet", true); //注册状态改变监听，获取服务器传送过来的数据 request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { //alert(request.responseText); var data = request.responseText; if (data == 1) { //alert("用户名已存在"); document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>"; } else { //alert("用户名未存在"); document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>"; } } } request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send("name=" + name); } </script>
    </head>
    <body>
    	<table border="1" width="500">
    		<tr>
    			<td>用户名:</td>
    			<td><input type="text" name="name" id="name" onblur="checkUsername()" /><span id="span01"></span></td>
    		</tr>
    		<tr>
    			<td>密码</td>
    			<td><input type="text" name=""></td>
    		</tr>
    		<tr>
    			<td>邮箱</td>
    			<td><input type="text" name=""></td>
    		</tr>
    		<tr>
    			<td>简介</td>
    			<td><input type="text" name=""></td>
    		</tr>
    		<tr>
    			<td colspan="2"><input type="submit" value="注册"></td>
    		</tr>
    	</table>
    </body>
    </html>

如果文章有错的地方欢迎指正，大家互相交流。

[20190707223256805.gif]: /images/20211213/6d89b17690894dfe84adb3470c8b7bdd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]: /images/20211213/d2df034d38d44655bc4fc2a25f5ffba4.png
[20190707223315135.png]: /images/20211213/25fdacf9239743718bd39a8997066359.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]: /images/20211213/73179af545f14a438ccb6f9d2f235ea5.png