1.1.1 摘要

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

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

本文目录

图1 微博加载更多功能

1.1.2 正文

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

数据表

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

-- =============================================
-- Author: JKhuang
-- Create date: 10/28/2013
-- Description: A table stores the user information.
-- =============================================
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中没有提供类似的函数,那么,我们可以发挥人的主观能动——自己实现一个吧,具体实现如下:

-- =============================================
-- Author: JKhuang
-- Create date: 10/26/2013
-- Description: Creates a pagination function
-- =============================================
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接口(跨源请求例子),具体实现如下:

/**
* Sends same origin request with ajax and json.
* @param options
* The options need to send to server.
* For instance: url and groupNumber.
*/
$.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自动加载更多程序,每当滚动条到底部时,发送异步请求获取服务器中的数据。

1.1.3 总结

我们通过一个Demo程序,介绍了通过jQuery实现异步加载数据,当然这里也涉及到数据的页面查询问题,这里我们使用了一个自定义的公用表表达式Results_CTE来获取分页数据,然后,通过$.ajax()方法发送同源请求调用Web Service API;当数据获取成功后,通过JSON格式返回数据,最后,我们把数据显示到页面当中。

[1]http://www.cnblogs.com/icebutterfly/archive/2009/08/05/1539657.html

[2]http://www.saaraan.com/2013/05/auto-load-records-on-page-scroll

Demo

jQuery自动加载更多程序的更多相关文章

  1. jQuery自动加载更多程序(转)

    jQuery自动加载更多程序   1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据 ...

  2. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  3. ListView下拉刷新,上拉自动加载更多

    下拉刷新,Android中非常普遍的功能.为了方便便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能.设计最初是参考开源中国的Android客户端源码.先看示例图.       ...

  4. javaScript和jQuery自动加载方法

    一.JavaScript自动加载 ①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下: <body onload="alert(1)"& ...

  5. UWP-ListView到底部自动加载更多数据

    原文:UWP-ListView到底部自动加载更多数据 ListView绑定的数据当需要“更多”时自动加载 ListView划到底部后,绑定的ObservableCollection列表数据需要加载的更 ...

  6. 实现Android ListView 自动加载更多内容

    研究了几个小时终于实现了Android ListView 自动加载的效果. 说说我是怎样实现的.分享给大家. 1.给ListView增加一个FooterView,调用addFooterView(foo ...

  7. Android RecyclerView 瀑布流滑动到最后自动加载更多

    mRecycleView.setOnScrollListener(new RecyclerView.OnScrollListener(){ //用来标记是否正在向最后一个滑动,既是否向下滑动 bool ...

  8. jquery实现加载更多效果

    情况是当滑动条滑动到最底部的时候,数据显示出一部分的更多 思路:获取到浏览器屏幕的高度client,文档的高度h和滑动距离顶部的距离scroll,当h<=client+scroll的时候就是滑动 ...

  9. jquery列表自动加载更多

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 1214 - Large Division -- LightOj(大数取余)

    http://lightoj.com/volume_showproblem.php?problem=1214 这就是一道简单的大数取余. 还想还用到了同余定理: 所谓的同余,顾名思义,就是许多的数被一 ...

  2. XML增、删、改

    今天有个需求需要操作xml节点.突然见遗忘了许多.上网看了些资料.才整出来.脑袋真不够用.在这里把我找到的资料共享一下.方便以后使用.本文属于网摘/ 一.简单介绍 using System.Xml; ...

  3. 说说Python中的闭包 - Closure

    转载自https://segmentfault.com/a/1190000007321972 Python中的闭包不是一个一说就能明白的概念,但是随着你往学习的深入,无论如何你都需要去了解这么一个东西 ...

  4. sass基本用法(转载)

    SASS入门教程及用法指南 2014年8月27日 8489次浏览 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是 ...

  5. well属性

    Bootstrap 有一个 class 属性叫做 well,它的作用是为设定的列创造出一种视觉上的深度感(一种视觉上的效果,动手写代码体会一下).

  6. [转]彻底征服Word 2007标题多级列表

    [转]彻底征服Word 2007标题多级列表 用Word编写文档的人都知道,一篇长文档一般是需要分章节来划分段落的.在Word中也有对应的工具来完成这项任务,这就是多级列表.然而绝大多数使用Micro ...

  7. 每天记一些php函数,jQuery函数和linux命令(三)

    简介:学习完了php和jQuery之后,对函数的记忆不到位,导致很多函数没记住,所以为了促进自己的记忆,每天花一点时间来写这个博客. 时间:2016-12-21   地点:太原    天气:雨夹雪 一 ...

  8. 8.4.4 Picasso

    Picasso 收到加载及显示图片的任务,创建 Request 并将它交给 Dispatcher,Dispatcher 分发任务到具体 RequestHandler,任务通过 MemoryCache ...

  9. linux(centos)源码安装git

    最近使用一个开源库,部署的的时候需要用git克隆依赖库.刚好系统没安装git.就尝试了源码安装git. 源码下载地址:http://codemonkey.org.uk/projects/git-sna ...

  10. 查看Linux内存状况的命令及工具

    1.cat  /proc/meminfo cat  /proc/<pid>/statm  和 cat  /proc/<pid>/status  获取特定的进程的内存信息: 2. ...