．ＮＥＴ框架下基于ＡＪＡＸ的Ｗｅｂ數據分頁研究

摘要：數據分頁是Web應用中經常使用的一種技術，也是提高Web數據訪問性能的主要手段。這里分析了.NET框架下的幾種數據分頁技術，比較了這些分頁技術的優缺點；并給出.NET下AJAX + jQuery使用Sql2005存儲過程實現分頁的例子。

關鍵詞：.NET框架；Web數據分頁；AJAX；存儲過程

中圖分類號：TP311文獻標識碼：A 文章編號：1009-3044(2008)28-0030-03

The Research of Web Data Paging Based on AJAX in .Net Framework

ZHANG Xin，ZHU Zhan-li，LI Yong

(Xi'an Shiyou University， Xi'an 710065，China)

Abstract: Data paging is a common technology in Web application， and also it is a primary method to improve the performance of Web data access. There has been analyzed .NET frame lower several kinds data paging technology， parallel these paging technology shortcoming; And be given to out Under .Net ， AJAX + jQuery uses Sql2005 stored procedure to realize paging example.

Key words: .NET Framework; Web data paging; AJAX; Stored Procedure

1 引言

建立動態Web應用，分頁瀏覽功能不可或缺，這一問題是數據庫與Web頁面處理中常見的問題。其解決方案有很多，且隨著技術的發展，提出了許多新的分頁方案。特別是近幾年來AJAX技術的使用，使得頁面與用戶的異步交互成為可能；這給數據分頁技術帶來了新的思路。為本文將針對數據分頁問題給出了.NET中的幾種解決方案并分析了各自的優缺點，給出一個.NET+AJAX技術實現數據分頁的例子。

2 幾種常見分頁解決方案

本文使用.NET 3.5、C#、SQL Server 2005實現各種分頁過程，本文的jQuery是jQuery 1.2.6版，并使用了pagination插件實現翻頁鏈接。

2.1 使用DataGrid結合DataSet分頁

這是.NET默認的分頁方法，DataSet一次性從數據庫提取所有符合條件的數據到應用服務器，DataGrid控件從中選擇指定頁的數據，舍棄其余數據。這種方法編程簡單，在數據量很小時也不存在問題。但對于數據較多的情況，例如符合條件的記錄上萬條時，每次分頁檢索，都要加載所有這些數據到Web服務器中。這即加重了數據庫服務器的負擔，又嚴重影響Web應用服務器的速度；用戶數量多的時候，再高檔的服務器也無法滿足要求。這種方案適應面有限——僅適用于數據量很少的場合，但程序實現簡單。

2.2 傳統Web結合存儲過程的分頁

每次分頁檢索時，利用存儲過程只從數據庫取出需要顯示的指定頁的數據，然后顯示在Web上。由于存儲過程是在數據庫中預處理過的，因此執行起來很有效率。同時由于每次頁面顯示時只在Web服務器中加載指定頁數據，占用資源較少。這種方案可應用于數據量較大的場合，但由于數據庫和Web服務器間的通訊及頁面刷新延遲等原因，用戶在不同頁面間切換時有刷新延遲現象，特別是當數據量很大或頁面較復雜時尤為明顯。

2.3 存儲過程結合AJAX技術實現分頁

同上一種方案一樣，使用存儲過程每次取出指定頁的數據到Web服務器；然后將其序列化為JSON格式并發送到客戶端，客戶端腳本程序將數據顯示在本機頁面上。這種方案客戶端和服務器間通訊量很少，客戶端無刷新操作，所以延遲非常小，是比較理想的Web分頁查詢方式。

2.4 三種分頁方案比較

總結上述三點，對幾種方案比較（見表1）后，可得出結論：雖然存儲過程和AJAX實現起來較麻煩，但對用戶來說這種方式最為好用；對數據庫服務器、Web服務器以及網絡帶寬占用最少。雖然占用了一些瀏覽器資源，但客戶端計算機資源相對閑置資源較多，利用起來后可以更好地服務于用戶，盡量減少用戶操作延遲時間。

3 本文用到的技術簡介

3.1 AJAX技術簡介

Ajax可以說是把JavaScript技術和XML HttpRequest對象放在Web表單和服務器之間。例如：當用戶指示翻到指定頁時，該數據發送給一些JavaScript代碼而不直接發送給服務器；JavaScript代碼處理這些數據并向服務器發送請求。同時用戶屏幕上的表單也不會閃爍、消失或延遲。換句話說，JavaScript腳本在后臺發送請求，用戶甚至不知道請求的發出。更好的是，請求是異步發送的，就是說用戶不用等待服務器的響應。因此用戶可以繼續輸入數據、滾動屏幕和使用應用程序。然后，服務器將數據返回給JS腳本，由腳本決定如何處理這些數據。它可以迅速更新表單數據，讓人感覺翻頁操作是立即完成的。

這就是XML Http Request的強大之處。它可以根據需要自行與服務器進行交互，用戶可以完全不知道后臺發生的一切。結果類似于桌面應用程序的動態、快速響應、高交互性，同B/S結構的簡便、互聯互通形成了完美的結合。

3.2 JOSN數據格式

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易于人閱讀和編寫。同時也易于機器解析和生成。JSON采用完全獨立于語言的文本格式，但是也使用了類似于C語言家族的習慣。這些特性使JSON成為理想的AJAX數據交換格式。JSON的另一優點是它的非冗長性。在XML中，打開和關閉標記是必需的，這樣才能滿足標記的依從性；而在JSON中，所有這些要求只需通過一個簡單的括號即可滿足。這樣能最大限度地減少AJAX通訊的數據量，有利于提高響應速度。

所以當前JSON格式在AJAX數據傳輸環節大有取代XML的趨勢，優勢明顯。

3.3 jQuery簡介

簡單的說，jQuery是javascript語言的一個輕量級的資源庫，或者說一個框架，它兼容CSS3，還兼容各種瀏覽器。jQuery能快速，簡潔的使用HTML documents， handle events， perform animations，并且能把Ajax交互應用到網頁。應用jQuery可以大大簡化Ajax操作，而且可以很方便地建出漂亮的頁面效果，為javascript應用的兼容性和簡易性提供了良好的平臺。

4 存儲過程結合AJAX技術實現分頁的實現

本文使用.NET 3.5、C#、SQL Server 2005實現各種分頁過程。

4.1 設計思路

用戶發出的換頁指令由JavaScript腳本截獲并異步發送到Web服務器，Web服務器調用數據庫的存儲過程得到頁面內容并轉換成JSON格式，JSON格式內容被異步發回JavaScript腳本，JavaScript腳本在瀏覽器后臺動態局部刷新用戶界面，完成換頁操作。（如圖1所示）。

4.2 SQL 2005提供Ranking函數實現分頁存儲過程

在SQL Server 2005里面，由于系統提供了內建的ranking函數；給待分頁的表行生成行號，我們不再需要利用Identity字段，只需利用Row_Number()函數即可，這給我們分頁存儲過程設計帶來極大便利，下面是使用Row_Number()寫的存儲過程核心部分源碼。

--獲取處第一頁外的頁面數據

Declare @List_ID1 int，@List_ID2 int;

Set @List_ID2=(@Page_Size*@Page);--當前頁記錄結束

Set @List_ID1=(@List_ID2-@Page_Size);--當前頁記錄開始

Set @SQL_String=

N'Select * From (

Select ROW_NUMBER() Over('+@SQL_Order+N')AS List_ID，'+@SQL_Fields

+N'from '+@SQL_TableName+N' where '+@SQL_Where+N'

)AS A

Where A.List_ID>'+Cast(@List_ID1 AS Nvarchar)+N'

and A.List_ID<='+Cast(@List_ID2 AS Nvarchar);

Execute sp_executesql @SQL_String;

4.3 Web服務器中調用存儲過程讀取頁面信息

存儲過程在C#程序中被調用，得到要讀取的頁面信息，具體來說：利用SqlCommand建立命令字，并執行SqlCommand. ExecuteReader()方法得到要訪問頁面的SqlDataReader對象；由處理程序將該對象轉換成JSON格式的字符串。為節省篇幅，這里省略數據庫連接部分的源代碼，僅列出DataReader轉JSON的部分代碼。

StringBuilder sb = new StringBuilder();

sb.Append(\"Group:[\");

while(Dr.Read()) {

sb.Append(\"{\");

for (int i = 0; i

sb.Append(\"\\\"\");

sb.Append(Dr. GetName(i));

sb.Append(\"\\\":\\\"\");

sb.Append(Dr[i].ToString());

sb.Append(\"\\\"，\");

}

sb.Remove(jsonBuilder.Length - 1， 1);

sb.Append(\"}，\");

}

Dr.Close();

sb.Remove(sb.Length - 1， 1);

sb.Append(\"]}\");

4.4 Web服務器AJAX服務端實現

Web服務器在PageLoad事件中要加入如下指令，把JSON數據傳輸到客戶端為AJAX客戶端程序提供服務。

int PageNow， PageTotal;

PageNow = Str2Int(Request.Params[\"PageNow\"]);

JsonStr =GetJson(getGroup(PageNow，out PageTotal));

Response.Write(\"{\");

Response.Write(\"PageNow:\\\"\" + PageNow + \"\\\"\");

Response.Write(\"，PageTotal:\\\"\" + PageTotal + \"\\\"\");

if (JsonStr != 1) Response.Write(\"，\" + JsonStr);//內容寫入JSON

Response.Write(\"}\");

Response.End();

4.5 AJAX客戶端實現

客戶端JavaScript腳本完成JSON接收，并將其顯示在頁面上的核心代碼如下：

$.ajaxSetup({//初始化jQuery ajax

type: \"post\"，

dataType : \"json\" });

function AjaxGetPage(pp){

$.ajax({//ajax接收部分

data : \"AJAX=AjaxGetPagePageNow=\" + pp，

success : function(jsonobj){

// 刷新頁面底端的 “上一頁”，”下一頁”等按鈕

if(jsonobj.PageTotal jsonobj.PageNow){

$(\"#Pagination\").pagination(jsonobj.PageTotal， {

current_page: parseInt(jsonobj.PageNow)，

callback: function(page_id， jq){

AjaxGetPage(page_id);

}

});

PageNow=jsonobj.PageNow;

}

$(\"#AjaxTbody > tr\").remove();//刪除舊頁面

if(jsonobj.Groups){//重新繪制新頁面

for(var i=0;i

$(\"#AjaxTbody\").append(

\"\" + jsonobj.Groups[i].Name + \"\" +

\"\" + jsonobj.Groups[i].Notes+ \"\");

}

}

}

});

}

4.6 執行效果

利用AJAX技術結合jQuery實現的異步頁面顯示和SQL2005存儲過程的組合，執行效果非常理想；頁面刷新等待時間很短，無論數據源中數據量的多少，執行速度都很穩定。圖2為上述程序執行效果。

5 結束語

本文簡要說明了三種分頁技術及其優缺點，重點給出了組合AJAX、jQuery、JSON、SQL2005存儲過程等技術的一套較先進的Web數據分頁方案。如果網絡速度較慢或數據庫非常復雜而導致換頁時響應時間延長，可以采用頁面Cache技術，將“上一頁”、“下一頁”等頁面內容同本頁內容一起傳輸到前臺，翻頁就可實現無延遲。上述分頁技術是我們在開發實踐中總結出來的經驗，很高興和大家分享。

參考文獻：

[1] Introducing JSON [EB/OL]，http://json.org.

[2] （美）內格爾，等編著，C#高級編程(第4版)[M]，清華大學出版社，2006，10.

[3] 基于Ajax的Data Window框架分析[J]，計算機工程，(34，7).