基于ajax实现无刷新分页的方法
更新时间：2015年02月03日 11:20:09 作者：php_小杰
这篇文章主要介绍了基于ajax实现无刷新分页的方法,实例分析了Ajax实现分页的技巧,需要的朋友可以参考下
本文实例讲述了基于ajax实现无刷新分页的方法。分享给大家供大家参考。具体如下：
在普通的分页中，一旦页码改变，则url改变，整个页面都会刷新，如果我们希望页码的改变不影响整个网页的变动，可以使用ajax技术。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
通过客户端html代码，用ajax把服务器中的数据通过get方式传递过来，显示在html中。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>ajax实现无刷新分页</title>
<script type="text/javascript">
function f1(url){
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function() {
if(xhr.readyState==4){
document.getElementById('d').innerHTML = xhr.responseText;
}
}
xhr.open("get",url);
xhr.send(null);
}
//页面加载完成后，就调用该函数
window.onload = function(){
f1("fenye-data.php");
}
</script>
</head>
<body>
<h2 align='center'>ajax实现无刷新分页</h2>
<div id='d'></div>
</body>
</html>
在分页类中，我们只需更改超链接的地址，将原来的地址更改为通过js调用f1()方法，将链接传递给js中的f1()方法。
<a href='javascript:f1(\"{$this->uri}&page=".($this->page+1)."\")'>
进一步的，可以使用json实现无刷新效果的分页，与ajax相比，json将html和css都写在客户端，从而节省了服务器带宽，也使用户的请求速度加快，具体方法不再赘述。
希望本文所述对大家的Ajax程序设计有所帮助。
相关文章
这篇文章主要介绍了webform使用ajax访问后端接口的两种方法小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了如何利用ajax异步处理POST表单中的数据，下面有个不错的示例，大家可以参考下2014-06-06
所谓的长连接，就是不断去发送请求，把请求阻塞在服务器端，每次超过请求时间就去重新发送请求，下面以一个实例为大家详细介绍下，感兴趣的朋友可不要错过了哈2013-08-08
本篇文章跟大家介绍不用库（框架）自己写ajax，感兴趣的朋友跟着脚本之家小编一起学习吧2015-10-10
这篇文章主要与大家探讨下关于多个Ajax请求执行返回先后的问题,需要的朋友可以参考下2014-07-07
这篇文章主要介绍了AJAX简单测试代码,以一个简单实例分析了Ajax的实现技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
上一篇我们讲了如何使用ajax向数据库添加数据，今天我们要大家学习的课程是：使用ajax修改数据库数据，并在客户网页立即显示新的内容．当然在修改的过程中同样不会有刷新网页的情况发生！2010-10-10
AJAX入门之XMLHttpRequest慨述...2006-06-06
这篇文章主要介绍了ajax 实现微信网页授权登录的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本篇文章通过两种方法实例讲解ajax定时刷新局部页面，当然方法有很多种，也可以不使用ajax来刷新页面，可以使用jquery中的append来给指定内容加东西，但是都不太实用，最实用的方法还是ajax加载数据了。2015-09-09
最新评论