2020-03-05

Ajax实现校验用户名

一、搭建环境

1.新建jsp页面

新建jsp页面(主要代码)

<table border="1" width="400px">
  <tr>
	<td>用户名:</td>
	<td><input type="text" name="name" id="name"></td> <span id="span01"></span>
  </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>

jsp页面：

2.建立数据库(添加jar和xml配置文件)

需要导入DBUtils和C3P0数据池的jar文件以及数据池配置文件xml(修改数据库为user)

C3P0数据池配置文件内容：

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>

	<!-- default-config 默认的配置，  -->
  <default-config>
    <property name="driverClass">com.mysql.jdbc.Driver</property>   <!-- 要和不用配置文件的set方法的后面一样 -->
    <property name="jdbcUrl">jdbc:mysql://localhost/user?characterEncoding=utf-8</property>
    <property name="user">root</property>
    <property name="password">njdxrjgc7777777.</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>
  
   <!-- This app is massive! -->
  <named-config name="oracle">                            <!-- oracle数据库用 -->
    <property name="acquireIncrement">50</property>
    <property name="initialPoolSize">100</property>
    <property name="minPoolSize">50</property>
    <property name="maxPoolSize">1000</property>

    <!-- intergalactoApp adopts a different approach to configuring statement caching -->
    <property name="maxStatements">0</property> 
    <property name="maxStatementsPerConnection">5</property>

    <!-- he's important, but there's only one of him -->
    <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>

数据库建立如下(以前的校验都是if判断)：

二、逻辑实现

使用MVC模式解决问题：

三、具体分析

对于实现的分析图：

四、具体代码如下：

最终实现代码框架：

UserDao类：

public interface UserDao {
	
	//检测用户名是否存在
		boolean checkUserName(String username) throws SQLException;
}

UserDaoImpl类：

public class UserDaoImpl implements UserDao {
	@Override
	public boolean checkUserName(String username) throws SQLException{		
		//使用DBUtils的类
		QueryRunner runner=new QueryRunner(JDBCUtil02.getDataSource());  //要从JDBCUtil02获取数据池对象
		
		//执行sql语句
		String sql="select count(*) from t_user where name=?";  //使用聚合函数count查出来就只有username一个属性
		Long result=(Long) runner.query(sql,new ScalarHandler(),username);  //第一个为sql语句 第二个返回值 第三个是传入的值username		
		return result>0; 
	}

checkUserNameServlet类代码：

public class checkUserNameServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
		//数据库有中文
			request.setCharacterEncoding("UTF-8");
	
		//1.获取name--然后通过面向接口的方式调用方法--通过sql语句聚集函数得到username是否存在
			String name=request.getParameter("name");
			System.out.println("name="+name);
			
			UserDao dao = new UserDaoImpl();
			boolean  isExist=dao.checkUserName(name);  //如果是true(daoImpl的值是1)--匹配到了
			
		//2.通知页面-- 到底有没有
			if(isExist)
			{
				response.getWriter().println(1);  //存在
			}
			else
			{
				response.getWriter().println(2);  //不存在
			}			
		} catch (SQLException e) {
			// TODO 自动生成的 catch 块
			e.printStackTrace();
		}	
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

主页demo03.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;
			
			//1.创建xmlhttprequest对象
				var request=ajaxFunction();
			 
			//2.发送请求
			request.open("POST","/day16/checkUserNameServlet",true);
			
			//注册状态改变监听，获取服务器传送过来的数据
			request.onreadystatechange=function(){
				if(request.readyState==4&&request.status==200)  // 已经能够正常处理 && 判断状态码是不是200
					{
						var data=request.responseText;
						if(data==1){
							document.getElementById("span01").innerHTML="<font color='red'>用户名已经存在!</font>";
						}
						else{
							document.getElementById("span01").innerHTML="<font color='red'>用户名可以使用!</font>";
						}
					}
			}	
				
			//如果是post方式就必须要添加头  --说明提交的数据类型是一个经过url编码的form表单数据
			request.setRequestHeader("Content-type","application/x-www-form-urlencoded"	
			request.send("name="+name);
			
		}
	</script>
</head>

<body>
  <table border="1" width="400px">
  <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>