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

现在，我们经常使用的微博、微信或其他应用都有异步加载功能，简而言之，就是我们在刷微博或微信时，移动到界面的顶端或低端后程序通过异步的方式进行加载数据，这种方式加快了数据的加载速度，由于它每次只加载一部分数据，当我们有大量的数据，但不能显示所有，这时我们可以考虑使用异步方式加载数据。

数据异步加载可以发生在用户点击“查看更多”按钮或滚动条滚动到窗口的底部时自动加载；在接下来的博文中，我们将介绍如何实现自动加载更多的功能。

正文

假设，在我们的数据库中存放着用户的消息数据，现在，我们需要通过Web Service形式开放API接口让客户端调用，当然我们也可以使用一般处理程序（ASHX文件）让客户端调用（具体请参考这里）。

数据表 首先，我们在数据库中创建数据表T_Paginate，它包含三个字段ID、Name和Message，其中ID是自增值。

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

/// The message data object. /// [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中没有提供类似的函数，那么，我们可以发挥人的主观能动——自己实现一个吧，具体实现如下：

上面我们定义了公用表表达式Results_CTE，它获取T_Paginate表中的数据并且根据ID值由小到大排序，然后根据该顺序分配ROW_NUMBER值，其中@Start和@Offset是要查询的数据范围。

接下来，让我们实现方法GetListMessages()，具体实现如下：

<div class="jb51code">
<pre class="brush:xhtml;">
///

/// Get the user message.
///

/// <param name="groupNumber">the pagination number
/// the pagination data
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetListMessages(int groupNumber)
{
string query = string.Format("WITH Results_CTE AS (SELECT ID,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();
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);

}
}