$("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>
上面是本次ajax分页教程的前端代码,html部份我们就不讲了.直接开始script中的内容.首先我们定义了4个全局变量,分别是:
All_page:总页数,创建页码的根据
All_Record:数据总条数,All_Record/PageCount=All_page 得到总页数
Current_page:当前请求的页码.传送给服务端
PageCount:每页显示的条数,传送给服务端
然后依次是我写的3个自定义函数,分别为:
ajax_xmlhttp();该函数的作用是创建一个可用的XMLHTTPRequest对象,如果你还不知道什么是XMLHTTPRequest.请了解什么是XMLHTTPRequest
$(elem);获取元素的函数,根据页面中元素的id来对某个元素的引用,其实就是document.getElementById的缩写与引用,写成函数以后直接可以使用$("元素id")即可获取该元素.









