Ajax-总结

最新推荐文章于 2019-11-16 15:26:29 发布

原创最新推荐文章于 2019-11-16 15:26:29 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#向Java进发

Java学习笔记专栏收录该内容

41 篇文章

订阅专栏

查询分页

通用的分页参数

参数概览

总条数（从数据库中查询得到）
当前页 (前端页面传参)
每页条数 (前端页面传参)
总页数（由总条数和每页条数计算得知）
每页要展示数据

/*
	 * 记录数据总条数
	 * */
	private Integer totalCount;
	/*
	 * 记录每页展示条数
	 * */
	private Integer pageSize;
	/*
	 * 记录总页数
	 * */
	private Integer totalPage;
	
	/*
	 * 记录当前展示的页码
	 * */
	private Integer currentPage;
	
	/*
	 * 记录每页要展示的数据
	 * */
	private List<E> data;

	public Integer getTotalCount() {
		return totalCount;
	}

	public void setTotalCount(Integer totalCount) {
		this.totalCount = totalCount;
	}

	public Integer getPageSize() {
		return pageSize;
	}

	public void setPageSize(Integer pageSize) {
		this.pageSize = pageSize;
	}
	//由总条数和每页条数计算得知
	public Integer getTotalPage() {
		int totalPage = this.totalCount / this.pageSize;
		if(this.totalCount % this.pageSize != 0) {
			totalPage++;
		}
		return totalPage;
	}

	public Integer getCurrentPage() {
		return currentPage;
	}

	public void setCurrentPage(Integer currentPage) {
		this.currentPage = currentPage;
	}

	public List<E> getData() {
		return data;
	}

	public void setData(List<E> data) {
		this.data = data;
	}
	/**
	 * 判断是否是第一页
	 * @return
	 */
	public boolean isFirst() {
		return getCurrentPage() <= 1;
	}
	
	/**
	 * 判断是否是最后一页
	 * @return
	 */
	public boolean isLast() {
		return getCurrentPage() >= getTotalPage();
	}
	
}

计算公式

假设数据库使用的是mysql，第一页从1开始

总页数算法：总条数 / 每页条数，能整除就用商；不能整除商+1
取当前页数据
- 开始位置： (当前页 - 1) * 每页条数
- 结束位置(使用与逻辑分页) ：当前页 * 每页条数
- 取多少条（适用于mysql物理分页）：每页条数

物理分页

物理分页是指直接利用SQL语句通过数据库的特性，实现分页。每次从数据库中拿的数据都仅仅是一页的数据量。它是依赖于数据库，不同的数据库，分页语句也不同。

前端代码:

//和逻辑分页基本相同

后台主要代码:

// 获取页面传递过来的参数
	String sCurrentPage = req.getParameter("currentPage");
	String sPageSize= req.getParameter("pageSize");
	
	// 当前页码默认展示第一页
	int currentPage = 1;
	try {
		// 如果前端传递了具体的页码，我们就用前端传过来的
		currentPage = Integer.parseInt(sCurrentPage);
	} catch (NumberFormatException e) {
	}
	
	int pageSize = 10;
	try {
		// 如果前端传递了具体的页码，我们就用前端传过来的
		pageSize = Integer.parseInt(sPageSize);
	} catch (NumberFormatException e) {
	}
	
	Pagination<Student> pagination = new Pagination<>();
	pagination.setCurrentPage(currentPage);
	pagination.setPageSize(pageSize);
	
	// 分页查询
	studentDao.findByPageWithPhysical(pagination);
	
	req.setAttribute("page", pagination);
	
	req.getRequestDispatcher("physical.jsp").forward(req, resp);
}

逻辑分页

逻辑分页之所以叫逻辑分页是因为每次从数据查询数据时并没有做分页，而是将所有数据都拿到了内存中，页面需要展示一页数据时，在内存中对数据做裁剪。逻辑分页并不依赖数据库实现，所以所有的数据库逻辑分页实现方案都一样。

前端代码:

<body>
	<table border="1">
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>专业</th>
			<th>电话</th>
		</tr>

		<c:forEach var="item" items="${page.data }">
			<tr>
				<td>${item.stuId }</td>
				<td>${item.stuName }</td>
				<td>${item.sex }</td>
				<td>${item.age }</td>
				<td>${item.major }</td>
				<td>${item.phone }</td>
			</tr>
		</c:forEach>

	</table>

	<div>
		总条数:${page.totalCount }

		<c:if test="${page.first }">
			<span>首页</span>
			<span>上一页</span>
		</c:if>
		<c:if test="${!page.first }">
			<a href="pagination?type=logic&currentPage=1">首页</a>
			<a href="pagination?type=logic&currentPage=${page.currentPage-1 }">上一页</a>
		</c:if>


		页码： <input size="1" id="currentPage" type="text"
			value="${page.currentPage }" />/${page.totalPage }

		<c:if test="${page.last }">
			<span>下一页</span>
			<span>尾页</span>
		</c:if>
		<c:if test="${!page.last }">
			<a href="pagination?type=logic&currentPage=${page.currentPage+1 }">下一页</a>
			<a href="pagination?type=logic&currentPage=${page.totalPage }">尾页</a>
		</c:if>

	</div>
</body>
<script type="text/javascript">
	var cpInput = document.getElementById("currentPage");
	cpInput.onkeydown = function(event) {
		console.log("keyCode: " + event.keyCode);
		if (event.keyCode == 13) {
			window.location.href = "pagination?type=logic&currentPage="
					+ cpInput.value;
		}
	}
</script>

后台主要代码:

// 获取页面传递过来的参数
		String sCurrentPage = req.getParameter("currentPage");
		String sPageSize= req.getParameter("pageSize");
		
		// 当前页码默认展示第一页
		int currentPage = 1;
		try {
			// 如果前端传递了具体的页码，我们就用前端传过来的
			currentPage = Integer.parseInt(sCurrentPage);
		} catch (NumberFormatException e) {
		}
		
		int pageSize = 10;
		try {
			// 如果前端传递了具体的页码，我们就用前端传过来的
			pageSize = Integer.parseInt(sPageSize);
		} catch (NumberFormatException e) {
		}
		
		Pagination<Student> pagination = new Pagination<>();
		pagination.setCurrentPage(currentPage);
		pagination.setPageSize(pageSize);
		
		// 分页查询
		studentDao.findByPageWithLogic(pagination);
		
		req.setAttribute("page", pagination);
		
		req.getRequestDispatcher("logic.jsp").forward(req, resp);
	}

Cookie&Session

Cookie

Cookie是什么？（What）

Cookie是一项在Web请求中，基于客户端的用于存储数据的技术。

为什么要用Cookie？（Why)

我们知道HTTP协议是一种无状态协议，服务端无法区分每个请求对应的是哪个用户。 Cookie就是为了解决这个问题而生的，它通过在浏览器端存储一些数据，在请求时附加到请求头中，这样服务端一读取请求头就知道了这次请求是哪个用户发起的。

什么情况下要使用Cookie?(When)

Cookie的使用分为在业务程序中显式使用和通过容器隐式使用。

隐式使用：首次访问JSP、Servlet时，Servlet容器会自动往响应头中添加一个Cookie(Tomcat中是JSESSIONID)
显式使用：当我们有一些安全性要求不高，数据量不大的用户数据需要存储时，可以考虑使用Cookie

怎么使用Cookie?（How)

Cookie的创建

// 两种方法
// 1. 构造时将数据传入
Cookie cookie = new Cookie("key", "value");

// 2. 构造时无参，然后通过set方法设置数据
Cookie cookie = new Cookie();
cookie.setName("key");
cookie.setValue("value");


// 除了核心的数据之外，我们还可以设置一些其他属性
// 1. 设置过期时间
cookie.setMaxAge(60);	//单位：秒(60秒后,Cookie会自动删除)
// 2. 设置Domain
cookie.setDomain("www.baidu.com"); // 代表只有访问www.baidu.com这个域名下的请求，才能获取到此Cookie
cookie.setDomain(".baidu.com");	// 代表所有www.baidu.com下的二级域名包括www.baidu.com这个一级域名都可以共享此Cookie（注意这种情况下domain必须以"."开头）
// 3. 设置Path 
cookie.setPath("/StudentServlet");	// 一旦设置了Path，那么要获取Cookie，当前的请求地址必须满足Path的规则，否则获取不到此Cookie     http://xxx:port/student/StudentServlet/getstu/3

Cookie的添加

// 使用响应对象写入浏览器

reponse.addCookie(cookie); //本质上会在响应中添加一个Set-Cookie响应头。

Cookie删除

// Cookie没有delete方法

// 我们可以通过设置过期时间为0实现删除
cookie.setMaxAge(0);
response.addCookie(cookie);

Cookie的修改

// Cookie的修改其实就是覆盖添加

// 具体来说分三步
// 1. 先获取已有Cookie，
// 2. 然后修改其中的数据，
// 3. 最后调用response.addCookie()重新添加到浏览器，浏览器看到Key相同的Cookie会自动更新

获取Cookie中的数据

// 1. 先通过请求对象获取请求中携带的所有Cookie数组
Cookie[] cookies = request.getCookies();

// 2. 迭代Cookie数组，寻找要操作的Cookie
for(Cookie cookie : cookies) {
    // 根据cookie.getName()判断是否是自己要获取数据的cookie
	
    // 3. 找到后，调用cookie.getValue()获取数据
}

Session

Session是什么？（What）

Session和Cookie类似，都是用来存储用户信息的。不同于Cookie的是Session是存储在服务器端。他们两者通过JSESSIONID关联起来。

为什么要用Session？（Why)

虽然Cookie已经可以标识出哪个请求是属于哪个用户的。但是不足的是Cookie本身是存储于客户端硬盘上，安全性不高，不适合存储敏感数据，还有Cookie本身能存储的数据很有限（数据大小本身限制、数据类型限制、字符集限制）。而存储在服务端的Session完全没有这些问题。

什么情况下要使用Session?(When)

Session可以用来存储用户的所有信息，理论上所有能在Cookie中存储的数据都可以放到Session中。考虑到Session是基于内存的，如果存储太多不太重要的数据会大大增加服务器端内存压力，一般Session会配合Cookie一起使用。

怎么使用Session?（How)

创建Session

// Session是由容器自动创建的，我们可以在代码中直接获取Sesssion

HttpSession session = request.getSession();

往Session中存储数据

session.setAttribute();

获取Session中的数据

session.getAttribute();

删除Session中的数据

session.removeAttribute();

修改Session中的数据

// 修改Session中的数据和修改Cookie中的数据类似，都是覆盖添加

// 1. 获取要修改的数据
Object data = session.getAttribute("key");

// 2. 修改数据对应的属性
data.setXXX();

// 3. 将修改后的数据重新存入Session
session.setAttribute("key", data);

强制让Session失效

session.invalidate();	//调用后session对象会失效，同时客户端Cookie中的JSESSIONID也会发生变化

Ajax

是什么?

“Asynchronous Javascript And XML”（异步JavaScript和XML），

并不是新的技术，只是把原有的技术，整合到一起而已。

1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

有什么用?

咱们的网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

原生Ajax

创建ajax请求对象

function  ajaxFunction(){
	    var xmlHttp;
	    try{ // Firefox, Chrome, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
	        try{// Internet Explorer（高版本）
	            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	        }
	        catch (e){
	            try{// Internet Explorer（低版本）
	                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	            }
	            catch (e){}
	        }
	    }
	    return xmlHttp;
	}

发送请求

//1. 创建xmlhttprequest 对象
var request = ajaxFunction();

//2. 发送请求。
/*	
 *	参数一： 请求类型  GET or  POST
 *	参数二： 请求的路径
 *	参数三： 是否异步， true  or false
 */
request.open("GET" ,"TestServlet" ,true );
request.send();

get请求流程

post请求流程

<script type="text/javascript">
	//1. 创建对象
	// 和get请求一样
	
	function post() {
		//1. 创建请求对象
		var request = ajaxFunction();
		
		// 2. 设置请求地址、参数、类型(post、get)
		request.open("post", "StudentServlet", true);
		
		//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
	    request.onreadystatechange = function(){
	        //前半段表示 已经能够正常处理。  再判断状态码是否是200
	        if(request.readyState == 4 && request.status == 200){
	            //弹出响应的信息
	            console.log("请求完成");
	            var h1 = document.getElementById("h1");
	        	h1.innerHTML = request.responseText;
	        }
	    }
		
	 	// 4. 如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		
		// 5. 发送请求
    	// 如果是GET请求，参数写在这里是无效的
		request.send("id=555");
	}

</script>

jQuery Ajax

$.ajax()的使用

// 语法：$.ajax(url, [settings]);

$.ajax("TestServlet", {
    type: "GET",
    data: {
        action: "json",
        uname: "zhangsan"
    },
    dataType: "json",
    success: function(data, status_text){
        console.log(data);
        console.log("status_text: " + status_text);
    },
    error: function(xhr, textStatus, errorThrow) {
        console.log("请求失败");
    }
});

$. a j a x 方法是其他所有 a j a x 相关方法的底层实现，其他方法都是在它的基础上给我们封装的更方便使用的方法。关于$ .ajax的详细介绍参见 <http://jquery.cuishifeng.cn/jQuery.Ajax.html

$.get()的使用

/*
 * 参数：
 *  url: 请求地址
 *  data: 待发送 Key/value 参数
 *  fn: 请求成功后回调函数
 *  type: 返回内容格式，xml, html, script, json, text, _default
 */

$.get( "url",{pid:pid} ,function(data,status_text){
    console.log(data);
    console.log("status_text: " + status_text);
},"json" );	// 指定请求返回的格式是json，jquery会帮我们把服务端返回的json字符串转换成js的json对象

$.post()的使用

/*
 * 参数：
 *  url: 请求地址
 *  data: 待发送 Key/value 参数
 *  fn: 请求成功后回调函数
 *  type: 返回内容格式，xml, html, script, json, text, _default
 */

$.post( "url",{pid:pid} ,function(data,status){
    console.log(data);
    console.log("status_text: " + status_text);
},"json" );	// 指定请求返回的格式是json，jquery会帮我们把服务端返回的json字符串转换成js的json对象

$.getJSON();的使用

$.getJSON("url", {id:1, name: "zhangsan"} function(json){
  console.log(json);
});

以上四个方法的关系和区别？

$. a j a x (); 对$ .get()、 $. p o s t () 、$ .getJSON();三个方法进行了封装，也是对原生的ajax进行的JQuery方式的封装更方便使用。
2. $.get()方法对JQuery内部对get方法进行的进一步封装;
$.post()方法对JQuery内部对post方法进行的进一步封装;
$.getJSON();方法对JQuery内部对JSON字符串进行的进一步封装;

Jquery会自动将响应结果做对应的类型转换