Ajax讀取資料之分頁顯示篇實現代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

我覺得還是有必要把我的ajax分頁呈現給大家．我先講一下這個ajax分頁的實現核心，然後我們再看執行個體效果．所謂的ajax分頁與傳統的資料分頁，在服務端的代碼基本上是一樣的．我們主要做的是使用ajax在不重新整理的情況下，將請求的頁碼，和每頁要顯示的條數發送給服務端的處理網頁．大家點擊這個網址就可以看到要請求的資料："ajax_page.asp?action=read&pagecount=3 & current_page=1"
在這段URL裡，pagecount代表每頁要顯示幾條資料，current_page代表要請求的頁碼．服務端就是根據這兩個參數來傳回你想要請求的資料．下面我們看下執行個體效果：
這是前端的ajax代碼：複製代碼代碼如下:<html>
<head>
<title>ajax資料分頁</title>
<style>
body{
font-size:12px;
}
table{
border-collapse: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/javascript">
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>

上面是本次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")即可擷取該元素．
Read()：讀取資料的函數．也是我們的老朋友了，在前幾篇的教程裡都有使用．下面我們仔細來分析下，這一次我們在Read()函數裡做了些什麼．
(1)：if(arguments.length!=0)這是在判斷在調用Read()函數時，是否有參數傳遞過來．如果有參數，則證明你點擊了某個頁碼而觸發了Read()．這時我們應該擷取該頁碼，將頁碼數字賦值給Crrent_page變數．點擊瞭解：arguments
(2)：var e = arguments[0] || window.event;標準化事件對象，arguments[0]是為了FF瀏覽器，window.event是IE瀏覽器
(3)：var obj = e.target || e.srcElement;標準了事件對象以後，我們要擷取事件的源．也就是說是那個元素觸發了Read()函數．此時的obj就是你點擊的那個頁碼元素．
(4)：Current_page = parseInt(obj.innerHTML);擷取元素中的數字值，證明你要請求的是第幾頁，在下面的請求中會把該值發送給服務端．
(5)：PageCount = $("edit_count").value;擷取文字框裡的值，如果你沒有向文字框裡輸入值．那麼每頁預設顯示5條資料．再聲明一次，以前講過的內容我們不再重複講解．也就是說關於上面的代碼我在該教程裡沒有解釋到的．在以前的教程裡會找到相關解釋．
(6)：ajax.open("post","ajax_page.asp?action=read&pagecount="+PageCount+"& current_page="+Current_page,true);我們在請求的Url裡將Pagecount與Current_page變數傳遞給了服務端，服務端接收到這兩個變數以後會經過判斷．如果PageCount為空白那麼將預設為5．如果Current_page為空白則預設為第1頁，然後會將相應的資料傳回給用戶端．
(7)：All_Record = xmlData.getElementsByTagName("allrecord")[0].firstChild.nodeValue;從服務端接收一個allrecord標籤元素．該元素包含了一個數字值，該數字值是資料的總條數．
(8)：All_page = All_Record / PageCount;用總條數All_Record除以PageCount等於總頁，得出有幾頁資料以後．我們會根據All_page來建立當前頁碼列表．
(9)：var page_list = $("page");擷取存放頁碼列表的那個div元素．while(page_list.childNodes.length!=0)迴圈遍曆該div內的子項目．將其子項目全部刪除．每次根據當前頁顯示的條數不同，會產生不同的頁碼，所以必須刪除上次請求產生的頁碼列表，當然你也可以改進我這種做法！如果你還不瞭解什麼是子項目或如何刪除子項目，請參閱：childNodes與removeChild
(10)：for(var i=0;i < Math.ceil(All_page);i++);使用一個for迴圈根據總頁數來動態產生頁碼列表，如果All_page為5，則產生5個頁碼．因為考慮到了會有餘數．我使用了Math.ceil．如果你還不知道Math與ceil的作用，請參閱：Math與ceil
(11)：var li = document.createElement("li");建立一個li元素，並賦值給一個名字為li的變數．li.innerHTML= i+1;在li元素內寫入頁碼數值．因為i是從0開始的，所有要加1．
(12)：li.onclick = function(e){Read(e)};為每個li元素繫結單擊事件，這個是重點必須要理解清楚．我們向li綁定了Read(e)函數，並且利用e參數傳遞了事件對象．當你點擊每個頁碼的時候會再次觸發Read函數來讀取資料．這個時候啟動並執行Read(e)函數，是帶有參數的．我們正是從參數內獲得了你請求的頁碼，然後賦值給Current_page，利用url發送給了服務端．
你注意一下在script指令碼部份裡的最後一行：Read();此時Read()沒有參數，並且只有當開啟頁面或重新整理頁面時才會執行這個Read()，此時的Read()向服務端發送的Current_page是空的．PageCount預設是5，這個時候服務端接收到空的頁碼，只會讀取5條資料給你．與此同時我也從服務端接收了資料的總條數，利用總條數除以每頁顯示的條數．建立了頁碼．並且為每個頁碼綁定了 Read(e)函數．只有當你點擊這些頁碼時帶有參數的Read(e)再次執行資料讀取．但此時的讀取已經向服務端發送了頁碼．你明白了嗎？
(13)：page_list.appendChild(li);為li寫好了頁碼，綁定了事件以後添加到上面被擷取的div元素裡．請參閱：appendChild

哦了，上面講述的部份是本次ajax分頁教程中前端的核心部份，沒有講述的內容在前幾篇的ajax教程裡都有講解．下面我們來看下服務端的源碼並分析該源碼複製代碼代碼如下:
<%
'出自：http://Www.Web666.Net
'作者：康董
'如需轉載請務必保留以上資訊
'定義一個變數，來儲存xml資料
xml="<?xml version='1.0' encoding='gb2312'?><body>"
action=Request.QueryString("action") '使用get方式接受一個action來判斷用戶端想要執行什麼操作
Select case action
case "read" '如果為read則執行讀取資料的操作
Call Read
case else
xml = xml&"<msg>請求參數錯誤，請不要試圖非法操作！</msg>"
End Select
xml=xml&"</body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml
Response.End

Sub Read '自訂的讀取資料過程
Call OpenConn '開啟資料庫連結
Current_Page = Request("Current_Page") '當前的頁碼
PageCount = request("PageCount") '當前頁顯示的條數
xml = xml&"<page>"&pagecount&"</page>"
If Current_Page = "" Or Not IsNumEric(Current_Page) Then
Current_Page = 1
End If
If PageCount = "" Or Not IsNumEric(PageCount) Then '判斷條數輸入是否正確
PageCount = 5
End If
Sql = "Select count(*) From page_table" '讀取page_table表中共有多少條資料
Set Rs = Conn.Execute(Sql) '執行sql語句
xml = xml&"<allrecord>"&Rs(0)&"</allrecord>"
If Current_Page = 1 Then '如果是第１頁
Sql = "Select Top "&PageCount&" * From page_table order by id desc"
Else
Sql = "Select Top "&PageCount&" * From page_table where id<(Select Min(id) From (Select Top "&((Current_Page-1)*PageCount)&" id From page_table order by id desc)) order by id desc"
End If
Set Rs=Conn.Execute(Sql)
While Not Rs.Eof
xml = xml&"<list>"
xml = xml&"<id>"&Rs("id")&"</id>"
xml = xml&"<content>"&Rs("content")&"</content>"
xml = xml&"</list>"
Rs.MoveNext '下一條
Wend
End Sub
%>

上面是本次ajax分頁教程執行個體中請求的服務端網頁源碼．我在服務端使用的是Asp技術，當然你也可以使用jsp,php,.net等輕鬆類比．關於在服務端輸出xml資料．在前幾篇的ajax教程裡我都有講解．所以我們從該源碼中的Read讀取過程開始講起：

1、Current_Page = Request("Current_Page") ：接收用戶端ajax使用url參數傳遞過來的Current_page，請求的頁碼
2、PageCount = Request("PageCount") ：接收客端ajax使用url參數傳遞過來的PageCount，每頁顯示的條數
3、然後分別判斷Current_Page是否為空白．或者是否為數字．如果不符合條件．則將Current_page等於1．如果PageCount也為空白，或者不是數字，則將PageCount等於5，也就是每頁讀取5條資料
4、Sql = "Select count(*) From page_table"這條sql的作用是讀取表內一共有多少條資料，也就是我們在前端代碼所說的總條數．將這個總條數讀取以後並儲存在一個allrecord的元素裡．然後傳回給用戶端．用戶端每次讀取資料都會擷取這個數字．以該數字為依據，進行頁碼的建立．
5、If Current_Page = 1 Then 判斷Cruuent_Page是否為1，如果為1則執行：Sql = "Select Top "&PageCount&" * From page_table order by id desc"　該sql語句的意思很簡單，唯讀取表內的"PageCount"條資料．如果你在前端沒有設定要讀取的條數．那麼 PageCount等於5，也就是唯讀取5條資料．讀取順序為desc，倒序讀取！
6、Else如果Crrent_Page不等於1,只有在你點擊了頁碼列表中非第１頁時，Current_Page才不會是1，那麼就執行：Sql = "Select Top "&PageCount&" * From page_table where id<(Select Min(id) From (Select Top "&((Current_Page-1)*PageCount)&" id From page_table order by id desc)) order by id desc"，這條sql語句是分頁的核心．他的大致意思是說：在表中讀取PageCount條資料．這些資料的id必須小於已經顯示出來的資料中id最小的那條資料．比如你點擊的是第3頁，每頁顯示的條數為5條．那麼這第三頁中要顯示的資料的id，必須要小於第二頁id最小的那條資料，因為是倒序讀取．你明白了嗎？如果你根本無法理解該Sql的意思．請惡補Sql的相關知識．下面的代碼是從資料庫裡讀取資料，我在前幾篇都有過詳細的講解．ajax分頁至此完畢！
提示：＜!--#include file="Conn.Asp"--＞Conn.asp是我的資料庫連結檔案．沒什麼特別．你應該可以自己寫一個出來．網上也有很多現成的代碼．本次讀取的資料庫表名為：page_table 欄位分別為ID(自動編號)，content(資料內容)
今天就講到這裡，有什麼不明白地方．請加 ajax技術交流群：110167482

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More