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

來源:互聯網
上載者:User

我覺得還是有必要把我的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教程裡都有講解.下面我們來看下服務端的源碼並分析該源碼 複製代碼 代碼如下:<!--#include file="Conn.Asp"-->
<%
'出自: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 '如果是第1頁
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,只有在你點擊了頁碼列表中非第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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.