NET框架下基于AJAX的Web数据分页研究

摘要：数据分页是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

Execute sp_executesql @SQL_String;

4.3 Web服务器中调用存储过程读取页面信息

存储过程在C#程序中被调用，得到要读取的页面信息，具体来说：利用SqlCommand建立命令字，并执行SqlCommand. ExecuteReader()方法得到要访问页面的SqlDataReader对象；由处理程序将该对象转换成JSON格式的字符串。为节省篇幅，这里省略数据库连接部分的源代码，仅列出DataReader转JSON的部分代码。

StringBuilder= 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 != null) 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=AjaxGetPage&PageNow=" + 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]，.

[2] （美）内格尔,等编著，C#高级编程(第4版)[M]，清华大学出版社，2006,10.

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