基于jquery实现页面滚动到底自动加载数据的功能

现在，我们经常使用的微博、微信或其他应用都有异步加载功能，简而言之，就是我们在刷微博或微信时，移动到界面的顶端或低端后程序通过异步的方式进行加载数据，这种方式加快了数据的加载速度，由于它每次只加载一部分数据，当我们有大量的数据，但不能显示所有，这时我们可以考虑使用异步方式加载数据。
数据异步加载可以发生在用户点击“查看更多”按钮或滚动条滚动到窗口的底部时自动加载；在接下来的博文中，我们将介绍如何实现自动加载更多的功能。

图1 微博加载更多功能
正文
假设，在我们的数据库中存放着用户的消息数据，现在，我们需要通过Web Service形式开放API接口让客户端调用，当然我们也可以使用一般处理程序（ASHX文件）让客户端调用（具体请参考这里）。
数据表
首先，我们在数据库中创建数据表T_Paginate，它包含三个字段ID、Name和Message，其中ID是自增值。

CREATE TABLE [dbo].[T_Paginate]（[ID] [int] IDENTITY（1,1） NOT NULL,[Name] [varchar]（60） COLLATE Chinese_PRC_CI_AS NULL,[Message] [text] COLLATE Chinese_PRC_CI_AS NULL, CONSTRAINT [PK_T_Paginate] PRIMARY KEY CLUSTERED （[ID] ASC）WITH （IGNORE_DUP_KEY = OFF） ON [PRIMARY]） ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

图2 数据表T_Paginate
数据对象模型
我们根据数据表T_Paginate定义数据对象模型Message，它包含三个字段分别是：Id、Name和Comment，具体定义如下：

/// <summary>/// The message data object./// </summary>[Serializable]public class Message{public int Id { get; set; }public string Name { get; set; }public string Comment { get; set; }}

Web Service方法
现在，我们需要实现方法GetListMessages（），它根据客户端传递来的分页数来获取相应的分页数据并且通过JSON格式返回给客户端，在实现GetListMessages（）方法之前，我们先介绍数据分页查询的方法。
在Mysql数据库中，我们可以使用limit函数实现数据分页查询，但在SQL Server中没有提供类似的函数，那么，我们可以发挥人的主观能动——自己实现一个吧，具体实现如下：

Declare @Start AS INTDeclare @Offset AS INT;WITH Results_CTE AS （SELECT ID, Name, Message, ROW_NUMBER（） OVER （ORDER BY ID） AS RowNum FROM T_Paginate WITH（NOLOCK））SELECT * FROM Results_CTE WHERE RowNum BETWEEN @Start AND @Offset

上面我们定义了公用表表达式Results_CTE，它获取T_Paginate表中的数据并且根据ID值由小到大排序，然后根据该顺序分配ROW_NUMBER值，其中@Start和@Offset是要查询的数据范围。
接下来，让我们实现方法GetListMessages（），具体实现如下：

/// <summary>/// Get the user message./// </summary>/// <param name="groupNumber">the pagination number</param>/// <returns>the pagination data</returns>[WebMethod][ScriptMethod（ResponseFormat = ResponseFormat.Json）]public string GetListMessages（int groupNumber）{string query = string.Format（"WITH Results_CTE AS （SELECT ID, Name, Message, ROW_NUMBER（） OVER （ORDER BY ID） AS RowNum " + "FROM T_Paginate WITH（NOLOCK）） " + "SELECT * FROM Results_CTE WHERE RowNum BETWEEN "{0}" AND "{1}";",（groupNumber - 1） * Offset + 1, Offset * groupNumber）;var messages = new List<Message>（）;using （var con = new SqlConnection（ConfigurationManager.ConnectionStrings["RadditConn"].ToString（）））using （var com = new SqlCommand（query, con））{con.Open（）;using （var reader = com.ExecuteReader（CommandBehavior.CloseConnection））{while （reader.Read（））{var message = new Message{Id = （int）reader["ID"],Name = （string）reader["Name"],Comment = （string）reader["Message"]};messages.Add（message）;}}// Returns json data.return new JavaScriptSerializer（）.Serialize（messages）;}}

上面，我们定义了GetListMessages（）方法，为了简单起见，我们把数据库的操作直接写在Web Service上了请大家见谅，它通过调用公用表表达式Results_CTE来获取分页数据，最后，我们创建一个JavaScriptSerializer对象序列化数据成JSON格式返回给客户端。
Javascript
由于，我们调用的是本地Web Service API，所以，我们发送同源请求调用API接口（跨源请求例子），具体实现如下：

$.getData = function（options） {var opts = $.extend（true, {}, $.fn.loadMore.defaults, options）;$.ajax（{url: opts.url,type: "POST",contentType: "application/json; charset=utf-8",dataType: "json",data: "{groupNumber:" + opts.groupNumber + "}",success: function（data, textStatus, xhr） {if （data.d） {// We need to convert JSON string to object, then// iterate thru the JSON object array.$.each（$.parseJSON（data.d）, function（） {$（"#result"）.append（"<li id="">" +this.Id + " - " + "<strong>" +this.Name + "</strong>" + " —?" + "<span class="page_message">" +this.Comment + "</span></li>"）;}）;$（".animation_image"）.hide（）;options.groupNumber++;options.loading = false;}},error: function（xmlHttpRequest, textStatus, errorThrown） {options.loading = true;console.log（errorThrown.toString（））;}}）;};

上面，我们定义了getData（）方法，它通过使用jQuery.ajax（）方法，发送同源请求调用GetListMessages接口，当数据获取成功加载到result div中显示并且分页数量（groupNumber）加一。
现在，我们已经实现了getData（）方法，每当用户把滚动条拖到最底端时，就调用getData（）方法获取数据，那么，我们需要把getData（）方法和滚动条事件进行绑定，具体实现如下：

// The scroll event.$（window）.scroll（function（） {// When scroll at bottom, invoked getData（） function.if （$（window）.scrollTop（） + $（window）.height（） == $（document）.height（）） {if （trackLoad.groupNumber <= totalGroups && ！trackLoad.loading） {trackLoad.loading = true; // Blocks other loading data again.$（".animation_image"）.show（）;$.getData（trackLoad）;}}}）;

上面，我们实现了jQuery的scroll事件，当滚动条滚动到最底部时，调用getData（）方法获取服务器中的数据。
CSS样式
接下来，我们给程序添加CSS样式，具体定义如下：

@import url（"reset.css"）;body,td,th {font-family: "Microsoft Yahei", Georgia, Times New Roman, Times, serif;font-size: 15px;}.animation_image {background: #F9FFFF;border: 1px solid #E1FFFF;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;}#result{width: 500px;margin-right: auto;margin-left: auto;}#result ol{margin: 0px;padding: 0px;}#result li{margin-top: 20px;border-top: 1px dotted #E1FFFF;padding-top: 20px;}

图3 加载更多程序
上面，我们实现了jQuery自动加载更多程序，每当滚动条到底部时，发送异步请求获取服务器中的数据。
我们通过一个Demo程序，介绍了通过jQuery实现异步加载数据，当然这里也涉及到数据的页面查询问题，这里我们使用了一个自定义的公用表表达式Results_CTE来获取分页数据，然后，通过$.ajax（）方法发送同源请求调用Web Service API；当数据获取成功后，通过JSON格式返回数据，最后，我们把数据显示到页面当中。
以上就是本文的全部内容，希望对大家的学习有所帮助。