概述

数据库连接池
Ajax简介
JavaScript实现Ajax

jQuery实现Ajax


一:数据库连接池

数据库连接是一种关键的有限的昂贵的资源,对数据库连接的管理能显著影响到整个应用程序的性能。数据库连接池正是针对这个问题提出来的。
常见的数据库连接池有哪些:    C3p0、DBCP、 Tomcat Jdbc Pool、 Druid
1.  数据库连接池的原理:
         连接池基本的思想是在系统初始化的时候,将数据库连接作为对象存储在数据库连接池中,当用户需要访问数据库时,并非建立一个新的连接,而是从连接池中取出一个已建立的空闲连接对象。使用完毕后,用户也并非将连接关闭,而是将连接放回连接池中,以供下一个请求访问使用。而连接的建立、断开都由连接池自身来管理。
2.  C3P0连接池的使用:
      a. 导入相关jar包
      b.  在项目src目录下新建一个名叫  c3p0-config.xml,并配置连接池的相关信息
      c. 在代码中使用ComboPooledDataSource对象的getConnection()方法获取数据库连接对象

二:Ajax简介

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

三:JavaScript实现Ajax

1.获取Ajax对象
      var xhr=null;
      if(window.XMLHttpRequest){   //判断是否为空,如果有此对象,则实例化一个XMLHttpRequest对象
          xhr=new XMLHttpRequest();
      }else{
          xhr=new ActiveXObject("Micorsoft.XMLHttp");
      }
2. 使用Ajax对象调用open("请求方式","请求路径","是否为异步")     //"请求方式"为 "get"/"post" ; "是否为异步"默认为“true”
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中传参只是形式不同,本质都是传递参数。)

eg:


DBUtil.java


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 username=?";
           ps=conn.prepareStatement(sql);
           ps.setString(1,regName);
           rs=ps.executeQuery();
           if(rs.next()){
               flag=true;   // 如果已经存在此用户名,则改变flag为true
           }
       } catch (SQLException e) {
           e.printStackTrace();
       }finally{
           try {
               rs.close();
               ps.close();
               conn.close();
           } catch (SQLException e) {
               e.printStackTrace();
           }
       }
       return flag;
   }
}


CheckNameServlet.java


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


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" οnblur="checkUser(this)"/> <span id="msg" style="color:red"></span> <br/><br/>
        注册密码:<input type="password" name="regPwd"/> <br/><br/>
        <input type="submit" value="注册"/>
   </form>
</body>
</html>



四:jQuery实现Ajax

1.使用一个HTTP GET请求从服务器加载数据   :  $.get( url [, data ] [, success ] )
2.使用一个HTTP POST 请求从服务器加载数据  :  $.post( url [, data ] [, success ] )
3.执行一个异步的HTTP(Ajax)的请求 :   $.ajax( [settings ] )
   
 

<%@ 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="password" name="regPwd"/> <br/><br/>
        <input type="submit" value="注册"/>
   </form>
</body>
</html>