Ajax

最新推荐文章于 2023-10-17 12:19:45 发布

沈念

最新推荐文章于 2023-10-17 12:19:45 发布

阅读量202

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/Seulementzh1010/article/details/79715011

版权

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、数据库连接池：

1、由来：数据库是一种关键的有限的昂贵的资源，对数据库链接的管理能显著影响到整个应用程序的性能。

2、常见的数据库连接池：C3p0、DBCP、Tomcat Idbc Pool、Druid

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

4、C3p0连接池使用操作：（1）导入相关jar包；（c3p0-0.9.5.2、c3p0-oracle-thin-extras-0.9.5.2、mchange-commons- java-0.2.11、mysql-connector-java-5.1.7-bin、）

（2）在项目src目录下新建一个名叫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>

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

二、Ajax简介：

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

可以不重新加载整个网页的情况下，对网页的某部分进行局部刷新。

三、JavaScript实现Ajax:

1、获取Ajax对象：

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

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");

eg1:注册用户登录：

(1)“post”请求方式：

<%@ 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);  
    	xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");  // post请求时必须设置该请求头
    	// 绑定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}/checkServlet" 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>

(2)"get"请求方式：

<%@ 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}/checkServlet" 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>

(3)注册工具类DBUtil:

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

(4)前端响应：

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

四、jQuery实现Ajax：

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

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

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

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

3、执行一个异步的 HTTP （ Ajax ）的请求

  $.ajax( [settings ] )

(1)$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(){
    		$.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>

(2)$.get(url [, data ] [, success ] );
<%@ 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>

沈念

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax

一、数据库连接池： 1、由来：数据库是一种关键的有限的昂贵的资源，对数据库链接的管理能显著影响到整个应用程序的性能。 2、常见的数据库连接池：C3p0、DBCP、Tomcat Idbc Pool、Druid 3、数据库连接池原理：在系统初始化的时候，将数据库连接作为对象存储在数据库连接池中，当用户需要访问数据库时，并非建立一个新的连接，而是从连接池取出一个已建立的空闲连接对象。使用完毕...
复制链接

扫一扫

专栏目录