以前在使用Asp.Net的時候用過GridView這個控件,這個控件自帶分頁的功能,雖然很丑,但是功能還是很強大的。這裡呢,給大家展示一下更加給力的方式——利用AJAX無刷新直接從服務器獲取數據分頁。
一、實現過程
注意:一下的內容都是在服務器內使用的。
首先要在服務器的路徑下建立幾個文件,比如,page1.txt,page2.txt,page3.txt。
每個文件中放入數組,如下:
復制代碼 代碼如下:[{user:'blue',pass:'123'},{user:'aaa',pass:'dsfaa'},{user:'Ares',pass:'12346'}]
圖一 頁面一的內容
前台HTML代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AJAX實現分頁、</title> <script src="ajax.js"></script> <script> window.onload=function () { var oUl=document.getElementById('ul1'); var aBtn=document.getElementsByTagName('a'); var i=0; for(i=0;i<aBtn.length;i++) { //給每一個按鈕附一個初值索引 aBtn[i].index=i; aBtn[i].onclick=function () { //調用AJAX函數 ajax('page'+(this.index+1)+'.txt', function (str){ //獲得其中的數據 var aData=eval(str); oUl.innerHTML=''; for(i=0;i<aData.length;i++) { var oLi=document.createElement('li'); oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>'; oUl.appendChild(oLi); } }); }; } }; </script> </head> <body> <ul id="ul1"> </ul> <a href="javascript:;">1</a> <a href="javascript:;">2</a> <a href="javascript:;">3</a> </body> </html>
封裝的AJAX ,JavaScript代碼:
/* AJAX封裝函數 url:系統要讀取文件的地址 fnSucc:一個函數,文件取過來,加載完會調用 */ function ajax(url, fnSucc, fnFaild) { //1.創建Ajax對象 var oAjax=null; if(window.XMLHttpRequest) { oAjax=new XMLHttpRequest(); } else { oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } //2.連接服務器 oAjax.open('GET', url, true); //3.發送請求 oAjax.send(); //4.接收服務器的返回 oAjax.onreadystatechange=function () { if(oAjax.readyState==4) //完成 { if(oAjax.status==200) //成功 { fnSucc(oAjax.responseText); } else { if(fnFaild) fnFaild(oAjax.status); } } }; }
最終實現效果:
圖二 展示效果
二、小結
AJAX這個還是要多多嘗試的,還要多多的練習。分頁是很好的想法,可以提高訪問的速度,很好的方法,以後還會更好的給大家帶來收獲。