介绍 & lt; ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0,过渡//EN",“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比;
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比;
& lt; head>
& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/比;
& lt; title> AJAX实现分页,& lt;/title>
& lt; script src=癮jax.js"祝辞& lt;/script>
& lt; script>
window=function ()
{
var 才能;oUl=. getelementbyid (& # 39; ul1& # 39;);
var 才能;aBtn=document.getElementsByTagName(& # 39;一个# 39;);
var 才能;i=0;
,,(i=0; i< aBtn.length;我+ +)
{才能
,,,//给每一个按钮附一个初值索引
,,,aBtn[我].index=我;
,,,aBtn[我].onclick=function ()
,,,{
,,,,,//调用AJAX函数
,,,,,ajax(& # 39;页面# 39;+ (this.index + 1) + & # 39; . txt # 39;,, function (str) {
,,,,,,,//获得其中的数据
,,,,,,,var aData=eval (str);
,,,,,,,oUl.innerHTML=& # 39; & # 39;;
,,,,,,,,(i=0; i< aData.length;我+ +)
,,,,,,,{
,,,,,,,,,var 奥利=document.createElement(& # 39;李# 39;);
,,,,,,,,,oLi.innerHTML=& # 39; & lt; strong> & # 39; + aData[我].user + & # 39; & lt;/strong> & lt; i> & # 39; + aData[我]. pas + & # 39; & lt;/i> & # 39;;
,,,,,,,,,oUl.appendChild(奥利);
,,,,,,,}
,,,,,});
,,,};
,,}
}；
& lt;/script>
& lt;/head>
& lt; body>
& lt; ul id=皍l1"祝辞
& lt;/ul>
& lt; a href=癹avascript:“在1 & lt;/a>
& lt; a href=癹avascript:“在2 & lt;/a>
& lt; a href=癹avascript:“在3 & lt;/a>
& lt;/body>
& lt;/html> /*
AJAX封装函数
url:系统要读取文件的地址
fnSucc:一个函数,文件取过来,加载完会调用
*/function ajax (url, fnSucc,, fnFaild)
{//1 .创才能建Ajax对象
var 才能oAjax=零;
如果(window.XMLHttpRequest)才能
{才能
,,,oAjax=new XMLHttpRequest ();
,,}
其他的才能
{才能
,,,oAjax=new ActiveXObject (“Microsoft.XMLHTTP");
,,}//2 .连才能接服务器
oAjax.open才能(& # 39;得到# 39;,,url,,真的);//3 .发才能送请求
oAjax.send才能();//4 .接才能收服务器的返回
oAjax.onreadystatechange才能=function ()
{才能
,,,如果(oAjax.readyState==4),//完成
,,,{
,,,,,如果(oAjax.status==200),,//成功
,,,,,{
,,,,,,,fnSucc (oAjax.responseText);
,,,,,}
,,,,,
,,,,,{
,,,,,,,如果(fnFaild)
,,,,,,,,,fnFaild (oAjax.status);
,,,,,}
,,,}
,,};
}
这篇文章将为大家详细讲解有关如何使用AJAX实现无刷新数据分页,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>一、实现过程
注意:一下的内容都是在服务器内使用的。
首先要在服务器的路径下建立几个文件,比如,page1.txt, page2.txt page3。txt .
每个文件中放入数组,如下:
代码如下:
[{用户:& # 39;蓝# 39;,通过:& # 39;123 & # 39;},{用户:& # 39;aaa # 39;,通过:& # 39;dsfaa& # 39;},{用户:& # 39;阿瑞斯# 39;,通过:& # 39;12346 & # 39;}]
图一,页面一的内容
前台HTML代码:
封装的AJAX, JavaScript代码:
最终实现效果:
什么是ajax
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。
关于“如何使用ajax实现无刷新数据分页”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
