ajax分页教程的前端代码，html部份我们就不讲了．直接开始script中的内容．首先我们定义了4个全局变量，分别是：
all_page：总页数，创建页码的根据
all_record：数据总条数，all_record/pagecount=all_page 得到总页数
current_page：当前请求的页码．传送给服务端
pagecount：每页显示的条数，传送给服务端
<html>
<head>
<title>ajax数据分页</title>
<style>
body{
font-size:12px;
}
table{
border-collaps教程e:collapse;
}
li{
list-style:none;
border:1px solid;
width:20px;
height:20px;
text-align:center;
margin:5px;
padding:2px;
float:left;
cursor:pointer;
}
</style>
</head>
<body>
默认显示每页为5条数据，你可以在下面文本框设置每页的显示条数<hr/>
输入每页要显示的条数:<input id="edit_count" type="text" /> <input type="button" type="button" value="确定" onclick="read()"/>
<table border="1"><!--该表格用来显示数据内容-->
<thead><tr><td>编号</td><td>内容</td></tr></thead>
<tbody id="a"></tbody>
</table>
<span id="msg" style="color:red"></span>
<br/>
<ul id="page"><!--页导航--></ul>
<script type="text/网页特效">
var all_page;//总页数
var all_record;//总条数
var current_page;//当前页
var pagecount;//每页显示的条数
function ajax_xmlhttp(){
//在ie中创建xmlhttprequest,适用于ie5.0以上所有版本
var msxmlhttp = new array("msxml2.xmlhttp.5.0","msxml2.xmlhttp.4.0","msxml2.xmlhttp.3.0","msxml2.xmlhttp","microsoft.xmlhttp");
for(var i=0; i<msxmlhttp.length; i++){
try
{
_xmlhttp=new activexobject(msxmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循环创建基于ie浏览器的xmlhttp.结束
//如果非ie浏览器，则创建基于firefox等浏览器的xmlhttprequest
if(!_xmlhttp && typeof xmlhttprequest != "undefined")
{
_xmlhttp=new xmlhttprequest();
}
return _xmlhttp;
}//获取元素函数
function $(elem){
return typeof elem == "string" ? document.getelementbyid(elem) : elem;
}//读取数据函数
function read(){
if(arguments.length!=0){//如果有参数传递过来，则证明你点击了某个页码
var e = arguments[0] || window.event; //标准化事件对象
var obj = e.target || e.srcelement; //获取事件对象,你点击的那个页码元素
current_page = parseint(obj.innerhtml);//获取元素中的数字值，证明你要请求的是第几页
$("msg").innerhtml = "当前为第"+current_page+"页";//提示信息：当前请求的页
}pagecount = $("edit_count").value;//获取文本框的值
if(pagecount.length == 0){ //如果文本框为空
pagecount = 5; //默认每页显示5条数据
}
var ajax = ajax_xmlhttp(); //将xmlhttprequest对象赋值给一个变量．
ajax.open("post","ajax_page.asp教程?action=read&pagecount="+pagecount+"& current_page="+current_page,true);//设置请求方式，请求的网页，url的action参数为read，异步请求
ajax.onreadystatechange = function(){//你也可以这里指定一个已经写好的函数名称
if(ajax.readystate == 4){//数据返回成功
if(ajax.status == 200){//http请求状态码返回ok
var xmldata = ajax.responsexml;//以xml格式接收返回的数据，并保存在xmldata变量里
all_record = xmldata.getelementsbytagname("allrecord")[0].firstchild.nodevalue;
all_page = all_record / pagecount;
var page_list = $("page");
while(page_list.childnodes.length!=0){
page_list.removechild(page_list.childnodes[0]);
}
for(var i=0;i<math.ceil(all_page);i++){ //动态创建页码列表
var li = document.createelement("li");
li.innerhtml = i+1;//因为i以0开始，所以要+1显示页码
li.onclick = function(e){read(e)};//为每个li的页码绑定单击事件
page_list.appendchild(li);//将生成好的页码元素放到div里
}
var list = xmldata.getelementsbytagname("list");//在返回的数据里，获取所有list标签
if(list.length!=0){
var t = document.getelementbyid("a");//获取展示数据的表格
while(t.rows.length!=0){ //在读取数据时如果表格已存在行．一律删除
t.removechild(t.rows[0]);
}
for(var i=0;i<list.length;i++){
var tr = t.insertrow(t.rows.length);//有几个list就为表格增加几行．
var td = tr.insertcell(0);//第一个单元格存放数据编号
td.innerhtml = list[i].childnodes[0].firstchild.nodevalue;
var td = tr.insertcell(1);//第二个单元格存放数据内容
td.innerhtml = list[i].childnodes[1].firstchild.nodevalue;
}
}
}
}
}
ajax.send(null);//提交请求，参数为null
}read();//运行read函数
</script>
</body>
</html>