JavaWeb之Ajax与数据库连接池

最新推荐文章于 2021-12-19 21:03:39 发布

陌凨107

最新推荐文章于 2021-12-19 21:03:39 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/west_xia_616/article/details/79758519

本文详细介绍了数据库连接池的概念、常见连接池如C3P0、DBCP和Druid，以及C3P0的使用步骤。接着讲解了Ajax技术，包括其异步更新网页的工作原理，以及JavaScript和jQuery实现Ajax的方法。最后，文中给出了实际应用示例，展示了如何在数据库连接池基础上结合Ajax实现用户注册功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、数据库连接池

使用数据库连接池的原因：

数据库连接是一种关键的有限的昂贵资源，对数据库连接的管理能显著影响到整个应用程序的性能。数据库的连接是非常困难的，非常多额消耗资源，如果我们的一个项目连接到数据库，然后另一个项目也连接数据库，当多个项目项目连接数据库的时候系统资源的消耗也会加剧，如果我们在连接数据之后使用的时间很短暂，然后就释放，重复这样，更是一种浪费。数据库连接池正是针对这个问题提出来的，

常见的数据库连接池：

C3P0、DBCP、Tomcat Jdbc Pool、Druid，其中C3P0用于成形的项目，DBCP用于教学、项目测试，Druid用于高性能高并发

数据库连接池的原理：

连接池的基本思想是在系统初始化的时候，将数据库连接对象存储在数据库连接池中，当用户需要访问数据库的时，并非建立一个新的连接，而是从连接池中取出一个已建立的空闲连接对象。使用完之后，用户也并非关闭连接，而是将连接放回连接池中，以供下一个请求访问使用。而连接的建立。断开都由连接池来管理。

C3P0连接池的使用：

1、导入相关jar包

2、在项目src目录建新建一个名叫c3p0-config.xml的文件，并配置连接池的相关信息，文件的名称是固定的，补课改变

3、在代码中使用ComboPooledDataSource对象的getConnection()方法获取数据库连接对象

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/mydb?characterEncoding=utf8</property>
			<property name="user">root</property>
			<property name="password">123456</property>
			<property name="initialPoolSize">10</property>
			<property name="maxIdleTime">30</property>
			<property name="maxPoolSize">100</property>
			<property name="minPoolSize">10</property>
		    <!-- c3p0全局的PreparedStatements缓存的SQL大小 -->
			<property name="maxStatements">200</property>
	 </default-config>
</c3p0-config>

配置文件中的内容跟JDBC的配置类似，第一步是加载数据库驱动程序，第二步是建立连接，在配置文件中首先要注明驱动程序，然后是要连接的数据库，接着写入数据库账户、密码可以规定初始连接池的大小，如果不规定，服务器默认为0，有最大响应时间以及连接池的最大最小值、最后规定c3p0全局的PreparedStatement缓存的SQL大小，如果没有规定，默认是0

二、Ajax简介

全称：Asynchronous JavaScript and XML（异步JavaScript和XML）

通过Ajax技术可以通过与后台服务器进行少量的数据交换，从而实现网页的异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部刷新。

三、JavaScript实现Ajax

1、获取Ajax对象

var xhr=null;
if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
}else{
    xhr=new ActiveXObject("Microsoft.XMLHttp");
}

一般情况下的浏览器直接进入到if块中，但有些浏览器或者版本较低的浏览器不支持XMLHttpRequest则会进入到else块中

2、使用Ajax对象调用open("请求方式","请求路径","是否为异步")

3、绑定状态改变事件

xhr.onreadystatechange=function(){
     if(xhr.readyState==4){//接收数据完毕
          if(xhr.status==200){//成功处理请求
               //交互成功时执行的代码
          }
     }
};

4、发送请求

xhr.send(参数);

注意：若为post提交，则必须设置请求头消息：

setRequestHeader("content-type","application/x-www-form-urlencoded");

采用application/x-www-form-urlencoded的POST数据和url中传参只是形式不同，本质都是传递参数。

四、jQuery实现Ajax

1、使用一个HTTP GET请求从服务器加载数据

$.get(url [,data] [,success])

2、使用一个HTTP POST请求从服务器加载数据

$.post(url [,data] [,success])

3、执行一个异步的HTTP(Ajax)的请求

$.ajax([settings])

实例：在本实例中用到了数据库连接池，在数据库连接池的基础之上用JS实现Ajax和用jQuery实现Ajax，实例中列举的例子是注册功能，但是并不是真正的注册，而是通过鼠标指针移动出输入框后的提示来了解Ajax

JavaScript实现Ajax：

get请求方式：register.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册用户</title>
<script type="text/javascript">
	function getXHR(){
		var xhr = null;
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}
		return xhr;
	}
	
	function checkUser(obj){
		var regName = obj.value;//获取填写的注册用户名
		var xhr = getXHR();   //获取Ajax对象
		xhr.open("get","/AjaxProject/checkServlet?registerName="+regName,true);
		//绑定onreadystatechange事件
		xhr.onreadystatechange=function(){
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					var txt = xhr.responseText;//获取后台传来的相应文本
					document.getElementById("msg").innerHTML=txt;
				}
			}
		};
		xhr.send(null);//发送请求
	}
</script>
</head>
<body>
	<form action="${pageContext.servletContext.contextPath}/registerServlet" method="post">
		注册用户名：<input type="text" name="regName" onblur="checkUser(this)" />
		<span id="msg" style="color:red"></span><br/><br/>
		注册密码：<input type="password" name="ragPwd" /><br/><br/>
		<input type="submit" value="注册" />
	</form>
</body>
</html>

psot请求方式：regpost.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册用户</title>
<script type="text/javascript">
	function getXHR(){
		var xhr = null;
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}else{
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}
		return xhr;
	}
	
	function checkUser(obj){
		var regName = obj.value;//获取填写的注册用户名
		var xhr = getXHR();//获取Ajax对象
		xhr.open("post","/AjaxProject/checkServlet",true);
		//post请求时必须设置请求头消息
		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
		//绑定onreadystatechange事件
		xhr.onreadystatechange=function(){
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					var txt = xhr.responseText;//获取后台传来的相应文本
					document.getElementById("msg").innerHTML = txt;
				}
			}
		};
		xhr.send("registerName=" + regName);//发送请求
	}
</script>
</head>
<body>
	<form action="${pageContext.servletContext.contextPath}/registerServlet" method="post">
		注册用户名：<input type="text" name="regName" onblur="checkUser(this)" />
		<span id="msg" style="color:red"></span><br/><br/>
		注册密码：<input type="password" name="ragPwd" /><br/><br/>
		<input type="submit" value="注册" />
	</form>
</body>
</html>

jQuery实现Ajax：

使用HTTP GET请求：register.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册用户</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
	$(function(){
		$("#registername").blur(function(){
			$.get("/AjaxProject/checkServlet",{"registerName":$("#registername").val()},
					function(data){
					$("#msg").html(data);
			});
		});
	});
</script>
</head>
<body>
	<form action="${pageContext.servletContext.contextPath}/registerServlet" method="post">
		注册用户名：<input type="text" id="registername" name="regName" />
		<span id="msg" style="color:red"></span><br/><br/>
		注册密码：<input type="text" name="regPwd" /><br/><br/>
		<input type="submit" value="注册" />
	</form>
</body>
</html>

执行异步HTTP（Ajax）请求：ajax.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册用户</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
	$(function(){
		$("#registername").blur(function(){
			$.ajax({
				method:"post",
				url:"/AjaxProject/checkServlet",
				data:{"registerName":$("#registername").val()},
				beforeSend:function(){
					alert("准备发送数据...");
				},
				success:function(data){
					$("#msg").html(data);
				}
			});
		});
	});
</script>
</head>
<body>
	<form action="${pageContext.servletContext.contextPath}/registerServlet" method="post">
		注册用户名：<input type="text" id="registername" name="regname" />
		<span id="msg" style="color:red"></span><br/><br/>
		注册密码：<input type="password" name="regPwd" /><br/><br/>
		<input type="submit" value="注册" />
	</form>
</body>
</html>

后台代码：

数据库工具类：

package util;

import java.sql.*;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class DBUtil {
	private static ComboPooledDataSource ds;
	static {
		ds = new ComboPooledDataSource();
	}
	
	//检查是否存在此注册名
	public static boolean checkRegisterName(String regName) {
		boolean flag = false;
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		try {
			conn = ds.getConnection();//获取数据库连接
			String sql = "select * from user where name=?";
			ps = conn.prepareStatement(sql);
			ps.setString(1,regName);
			rs = ps.executeQuery();
			if(rs.next()) {
				flag = true;//如果已经存在此用户名，则将falg设为true
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			try {
				rs.close();
				ps.close();
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		return flag;
	}
}

检验名字的Servlet类：

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import util.DBUtil;
@WebServlet(name="CheckNameServlet",urlPatterns= {"/checkServlet"})
public class CheckNameServlet extends HttpServlet {
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setHeader("content-type","application/x-www-form-urlencoded");
		resp.setCharacterEncoding("utf-8");
		PrintWriter pw = resp.getWriter();
		String regName = req.getParameter("registerName");
		System.out.println("后台接收到的注册名为：" + regName);
		boolean flag = DBUtil.checkRegisterName(regName);
		if(flag) {
			pw.println("sorry！该用户名已被注册，请选择其他用户名！");
		}else {
			pw.println("恭喜！可以使用该用户名~~~");
		}
		pw.flush();
		pw.close();
	}
}

完整的项目已上传到GitHub上，可以点击链接 https://github.com/AnsrFor/web.git下载查看