基于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
jquery ajax例子)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 INT
Declare @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:" + upNumber + "}",
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.loading = false;
}
},
error: function(xmlHttpRequest, textStatus, errorThrown) {
options.loading = true;
console.String());
}
});
};
上⾯，我们定义了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 (upNumber <= 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格式返回数据，最后，我们把数据显⽰到页⾯当中。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论