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
相关推荐
在接下来的博文中,我们将介绍如何实现自动加载更多的功能。 图1 微博加载更多功能 正文 假设,在我们的数据库中存放着用户的消息数据,现在,我们需要通过Web Service形式开放API接口让客户端调用,当然我们也可以...
10.24 在列表框中实现加载更多效果 10.25 自定义选择菜单 10.26 使用多个选择菜单进行组合选择 10.27 使用多选菜单选择多个值 10.28 创建双重范围的滑块 10.29 实现开关效果的选择功能 10.30 创建主题化的表单效果 ...
由于jQuery 1.5的Ajax模块内置使用了延迟对象,因此现在通过jQuery编写Ajax程序将自动获得这一功能。 开发人员借此可以使用无法立即获得的返回值(如异步Ajax请求的返回结果),而且第一次能够附加多个事件处理器。 ...
• 保持了与jqueryui的完全兼容,可以自行前往www.jqueryui.com网站下载更多酷炫界面风格,甚至自定义风格 • 涉及的PHP代码极少且足够建议,非PHP程序员也能使用 • 对系统要求非常低,只要普通PHP程序能够运行即可...
• 保持了与jqueryui的完全兼容,可以自行前往www.jqueryui.com网站下载更多酷炫界面风格,甚至自定义风格 • 涉及的PHP代码极少且足够建议,非PHP程序员也能使用 • 对系统要求非常低,只要普通PHP程序能够...
比如"在页面中编写加载时即执行的操作DOM的语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操作"的错误.jQuery提供了很多简便的方法帮助我们解决这些问题, 一旦使用jQuery你就...
2.保持了与jqueryui的完全兼容,可以自行前往www.jqueryui.com网站下载更多酷炫界面风格,甚至自定义风格 3.涉及的PHP代码极少且足够建议,非PHP程序员也能使用 4.对系统要求非常低,只要普通PHP程序能够运行...
第1章 jQuery入门 1.1 jQuery能做什么 1.2 jQuery为什么如此出色 1.3 第一个jQuery文档 1.3.1 下载jQuery 1.3.2 设置HTML文档 1.3.3 编写jQuery代码 1.4 小结 第2章 选择符...
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术...
这种类型的操作适合显示RSS提要中的新闻标题,或在大小禁止显示更多详细信息时滚动的其他信息。 图1显示了带有新闻标题行的任务窗格。 该示例演示如何执行以下任务: 将事件处理程序附加到HTML元素。 使用...
1.4.2 更多实时修复 1.4.1 更好的实时编辑 1.4.0 小布局修复的数量 1.3.3 修复德语维基百科的一个bug 1.3.2 更好的链接颜色 1.3.1 更新 jQuery,原生滑块,改进西里尔文 1.2.3 更好的西里尔文显示 1.2.0 现在自动...
单页应用程序更有能力减少页面的加载时间以及从服务器到客户端的数据传输量。 为什么呢在ASP.NET Core MVC应用程序中使用Javascript框架(如AngularJs,React,VueJs,Knockout,meteor等)工作时,要创建单页应用...
每次您再次访问该页面时,便笺将自动加载。 这些注释可以在同一页面或扩展的“仪表板”页面中创建,可以是空白注释,也可以是页面上的选定文本。 注释可以按域,网页或不使用过滤器进行过滤。 有很多可能性! 所有...
《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上...
■改进内置搜索表现,提供更多参数。 ■提供丰富的细致搜索。 ■在搜索主页提供svg代码式嵌入示范。 ■提供SASS(SCSS)引用规范 。 ■基于rem单位进行编程。 ■修正2018年节日功能-全部加载SVG矢量图形。 ■改进前端...
发行说明:1.0.7-更新图标以显示扩展名处于活动状态1.0.6-帮助chrome找出正在自动完成的字段类型1.0.5-更好地处理了被排除的URL模式1.0.4-对输入字段进行了更多监视在页面加载后添加。 1.0.3-更新扩展程序图标可更好...
ESP8266-MyWidget 该项目可以用作学习工具,也可以用作启动新ESP8266项目的模板。 它包含许多用于使用Web界面构建ESP8266项目的组件。 该项目包括: ... 再加上更多... 历史 我从亚马逊购买了 ,用
程序包含大小功能共约92个(不包括模板及插件的功能),涵盖了基本论坛应有的功能,可扩充更多插件及模板,或自定义功能。 HadSky轻论坛程序主要功能及亮点 1、模板、插件可卸可装,更支持一键云安装,方便灵活; ...
6.4 更多的jQuery事件概念 171 6.4.1 等待HTML载入 171 6.4.2 jQuery事件 173 6.4.3 事件对象 175 6.4.4 阻止事件的常规行为 176 6.4.5 删除事件 177 6.5 高级事件管理 178 6.6 教程:一页的FAQ 180 6.6.1 任务概览 ...
n47 小结n第5章 多语言本地化应用程序 n51 设置当前文化 n511 手动设置文化 n512 自动检测文化 n513 在Web配置文件中设置文化 n514 文化和ASPNET控件 n52 使用CultureInfo类 n521 使用CultureInfo类格式化字符串值 n...