使用Ajax实现分页-优快云博客

本文介绍了一种使用Ajax实现分页的技术方案，包括Ajax的基本原理、原生Ajax及jQuery封装后的Ajax实现方法，并通过实例展示了如何在网页上实现动态分页效果。

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

回顾一下如何使用Ajax进行分页
//ajax分页
function getpage(url,method){
	alert("1233");
	$.ajax({
		type:method,
		url:url,
		success:function(data){
			$("#content").html(data);
		}
		
	})
}

<div align="center" style="font-size:14px">
		<c:set var="url" value="${pageContext.request.contextPath}/student/ListAllFilesServlet"/>
			每页${pageBean.pageSize}行  共${pageBean.totalRows}行  页数 ${pageBean.curPage}/${pageBean.totalPages}
			<c:choose>
				  <c:when test="${pageBean.curPage==1}">首页 上一页</c:when>
				  <c:otherwise>
				  	<a href="javascript:getpage('${url}?page=1','post')">首页</a>
				  	<a href="javascript:getpage('${url}?page=${pageBean.curPage-1}','post')">上一页</a>
				  </c:otherwise>
			   </c:choose>
			   <c:choose>
				  <c:when test="${pageBean.curPage>=pageBean.totalPages}">下一页 尾页</c:when>
				  <c:otherwise>
				  	<a href="javascript:getpage('${url}?page=${pageBean.curPage+1}','post')">下一页</a>
				  	<a href="javascript:getpage('${url}?page=${pageBean.totalPages}','post')">尾页</a>
				  </c:otherwise>
			</c:choose>
		</div>

AJax的基本知识点

、Ajax
同步交互/异步交互异步传输
不用刷新页面而获取新的数据,从而局部更新页面
1.传统方式实现ajax
(1)获取XMlHttpRequest对象
(2)设置监听,处理响应
(3)开启连接
(4)发送请求
2.利用jquery实现ajax
$.get()
$.post()

3.ajax返回数据的格式:xml/html/json
json:javascript的原生格式,javascript直接可以访问其中数据

js原装Ajax和jquery封装后的Ajax
同步：客户端请求到服务器，当服务器回送数据之前都是处于等待状态
在响应期间不能操作其他动作
异步：客户端请求服务器，无论服务器回送数据不会送客户端都可以做其他事件
就是在响应期间可以操作其他的动作
Ajax运行原理：
页面请求通过Ajax引擎来实现，存在与客户端内核里的，ajax引擎会提交请求，ajax引擎接受数据了直接就触发事件
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，
Ajax引擎会提交请求到服务器端，
在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，
会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1 功能。
js原生Ajax技术
所有的异步访问都是ajax引擎实现
Ajax是XmlHttpRequest对象和javaScript,xml,css,Dom等技术的结合。
XmlHttpRequest对象：
初始化：

IE浏览器：
var http_request=new ActiveXObject("Msxml2.XMLHTTP");或者：var http_request=new ActiveXObject("Microsoft.XMLHTTP");
非IE浏览器：
var http_request=new XMLHTTPRequest();
一般都是如下使用：
if(window.XMLHttpRequest){
http_request=new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP");

}catch(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP");

}catch(e){
}
}
}
window.ActiveXObject将返回一个对象，或者是null，null为false；
XmlHttpRequest对象常用的方法：
用于设置进行异步请求的URL，请求的参数信息。
open("method","URL"[,asyncFlag[,"username"[,",password"]]]);
asyncFlag:可选参数，异步为true，同步为false，默认异步；
例如：http_request.open("GET","reqist.jsp",true);
send();
send 用于向服务器发送请求，异步立即返回，否者等接受到相应为准，
例如：send(content);content为制定的数据可以为Dom，输入流，字符串，没有参数就为null;
sendRequestHeader("header","value")方法；
header:为Http的头，value 为http头的值；
请求头：
Accept: text/html,image/* 客户端可以接受的数据类型
Accept-Charset: ISO-8859-1 客户端接受数据需要使用的字符集编码
Accept-Encoding: gzip,compress 客户端可以接受的数据压缩格式
Accept-Language: en-us,zh-cn 可接受的语言环境
Host: www.it315.org:80 想要访问的虚拟主机名
If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT 这是和缓存相关的一个头，带着缓存资源的最后获取时间
Referer: http://www.it315.org/index.jsp 这个头表示当前的请求来自哪个链接，这个头和防盗链的功能相关
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) 客户端的一些基本信息
Cookie 会在后面讲会话技术的时候单讲
Connection: close/Keep-Alive 指定是否继续保持连接
Date: Tue, 11 Jul 2000 18:23:51 GMT 当前时间
abort()方法：
用于停止或放弃当前的异步请求，
getRequestHeader()方法：获取Http头信息
getRequestHeader("headerLabel");
getAllRequestHeaders()方法：获取Http完整的头信息
XmlHttpRequest常用的属性：
1.onreadystatechange属性：
用于指定状态改变时所触发事件处理器，通常会调用JavaScript函数；
例如：http_request.onreadystatechange=function(){

};
2.readyState属性：获取请求状态：
0：未初始化，1：正在加载，2:已加载，3：交互中，4：完成。
3.responseText属性：获取响应的字符串
4.responseXML属性：获取服务器的响应的xml可以解析为dom对象
5.status返回状态码：200成功；202：请求接受但为成功，400：错误的请求，404 500
6.statusText返回HTTP状态码对应得文本，如ok notFound；
发送请求：
Ajax通过XMLHttpRequest对象，实现异步发送请求，步骤：
1.初始化xmlHttpRequest对象，new
2.为xmlHttprequest指定一个返回结果的处理函数，.onreadystatechange=function(){}
3.创建一个与服务器的连接，在创建时需要指定请求方式，是否异步:open()
4.向服务器发送请求，.send()：get请求：.send(null);
post请求：var param="user="+form1.user.value+"&pwd="+form1.pwd.value+"&email="+form1.email.value;
在发送请求需要正确的设置请求头：
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(param);
处理响应：
发送请求后接下来就是处理服务器的响应，处理响应的属性有：responseTest属性，responseXml属性
1.处理字符串的
function getResult(){
if(http_request.readyState==4){
if(http_request.status==200){
alter(http_request.responseText);
}else{
alert(你请求的页面有误);
}

}

}
2.处理xml
和处理dom对象才差不多，只是需要有条件判断
function getresult(){
if(Http_request.readyState==4){
if(Http_request.status==200){
var xmldoc=http_request.responseXml;
var str="";
for(){

}
}
}

}
js原生的Ajax的使用：

json数据格式：
json是一种与语言无关的数据交换的格式，作用：
使用ajax进行前后台数据交换
移动端与服务端的数据交换
json是一种与语言无关数据交换的格式，
使用ajax进行前后台交换，
移动端与服务端数据交换
1.json的格式：
对象形式：
{"key":"obj"}
例如：
user对象：
{"username":"zan","age":"28","password:"123"}
对象嵌套对象
{"username":"zan","age":"28","password:"123","account":{"money":"2000","time":""}}
数组形式：
就是包含很多对象
[{"username":"zan"},{"age":"28"},{},{}]
对象形式和数组形式可以互相嵌套
jsno的可以可以为字符串也可以是对象
2．Json的转换插件

将java的对象或集合转成json形式字符串

json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。
常用的json转换工具有如下几种：
1）jsonlib
2）Gson：google
3）fastjson：阿里巴巴
Jquery的Ajax技术（重点）
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，
与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种
1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
其中：
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等

3）$.ajax( { option1:value1,option2:value2... } ); ---- 以后在掌握
常用的option有如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET

url：请求服务器端地址

使用ajax分页这是一种简单的方法，把所有的请求都封装到函数中，通过Ajax调用然后返回数据达到分页效果，通过把结果封装到实体bean中，然后通过实bean来获取参数，总页数为totalPages,当前页为curpage，通过参数传递到后台来实现页面的交互，在看后台代码的时候先看下实体PageBean：在这个实体中是把数据封装到list中然后取出即可用

/**
 * 分页的操作
 * @author 555
 *@date 2018年5月8日
 */
public class PageBean {
	private int curPage;      //当前页数
	private int totalPages;   //总页数
	private int totalRows;    //总行数
	private int pageSize;     //每页显示行数
	private List data;        //每页显示的数据
	public int getCurPage() {
		if (curPage > getTotalPages()) {// 当前行数大于总行数
			curPage = getTotalPages();
		}
		else if(curPage<1){        //当前行数小于1
			curPage=1;
		}
		return curPage;
	}
	public void setCurPage(int curPage) {
		this.curPage = curPage;
	}
	//总页数
	public int getTotalPages() {
		if(totalRows%pageSize==0){
			totalPages=totalRows/pageSize;
		}else{
			totalPages=totalRows/pageSize+1;
		}
		return totalPages;
	}
	public void setTotalPages(int totalPages) {
		this.totalPages = totalPages;
	}
	public int getTotalRows() {
		return totalRows;
	}
	public void setTotalRows(int totalRows) {
		this.totalRows = totalRows;
	}
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public List getData() {
		return data;
	}
	public void setData(List data) {
		this.data=data;
	}
}

servlet具体实现代如下：现获取当前页然后判断当前页的值然后去请求dao层

                            String page = request.getParameter("page");
					// 当前的页数
					int curPage = 0; 
					//没有获得page值的处理
					if (page == null || page.length() < 1) { 
						curPage = 1;
					} else {
						curPage = Integer.parseInt(page);
					}

		           PageBean pageBean=service.getAllPageBean(curPage);
				request.setAttribute("pageBean", pageBean);

在dao层中具体操作数据库如下：dao层接受数据以用来与数据库进行操作进行分页操作，

/**
	 * 获得PageBean分页
	 * @param curPage
	 * @return
	 */
	public PageBean getPageBean(int curPage) {
		// TODO Auto-generated method stub
		//用于后面截取sql的操作
		String sql="select id,uuidname,filetitle,realname,uplaodip,savepath,description,uploadtime,uploadteacherid from files ";
		DBUtils db=new DBUtils();
//		String[] params={};
//		System.out.println(params);
		System.out.println();
		return db.getPageBean(sql,new String[]{}, curPage);
	}

在这里并没用到groupby字句所以会直接去执行else语句获得总的行数，

// 执行数据库查询操作时，返回结果的记录总数。
		public int getTotalRows(String sql, String[] params) {
			int totalRows = 0;
			sql = sql.toLowerCase();
			String countSql = "";
			if(sql.indexOf("group")>=0){
				//总记录数
				countSql = "select count(*) from ("+sql+") as tempNum";
				System.out.println("new:"+countSql);
			}else{
				//当前记录数
				countSql = "select count(*) as tempNum "+ sql.substring(sql.indexOf("from"));
				System.out.println("new1:"+countSql);
			}
				System.out.println(params);
			// count中存放总记录数
			String count = String.valueOf(getMap(countSql,params).get("tempnum"));
				
			System.out.println(count);
			totalRows = Integer.parseInt(count);	
			return totalRows;
		}

		// 分页显示查询结果时，将当前页中的所有信息封装到PageBean中
		public PageBean getPageBean(String sql, String[] params, int curPage){
			System.out.println("参数为：："+params);
			//分页语句
			String newSql = sql + " limit " + (curPage-1)*pageSize+","+pageSize;
			List data=this.getList(newSql, params);
			System.out.println("分页："+data);
			PageBean pb=new PageBean();
			//设置当前页数
			pb.setCurPage(curPage);
			//设置当前页数显示的行
			pb.setPageSize(pageSize);
			//设置总行数
			pb.setTotalRows(getTotalRows(sql, params));
			//每页显示的数据
			pb.setData(data);
			return pb;
		}

总之在分页操作有一定的难度但是通过反复的练习能够明白其中的原理然后能够实现应用就可以了。