使用 jQuery Ajax 在页面滚动时从服务器加载数据
简介
文本将演示怎么在滚动滚动条时从服务器端下载数据。用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用户滚动滚动条再从服务器端加载。
背景
是Facebook促使我写出了在滚动条滚动时再从服务器加载数据的代码。浏览facebook时,我很惊讶的发现当我滚动页面时,新的来自服务器的数据开始插入到此现存的数据中。然后,对于用c#实现同样的功能,我在互联网上了查找了相关信息,但没有发现任何关于用c#实现这一功能的文章或者博客。当然,有一些Java和PHP实现的文章。我仔细的阅读了这些文章后,开始用c#写代码。由于我的C#版本运行的很成功,所以我想我愿意分享它,因此我发表了这边文章。
代码
只需要很少的几行代码我们就能在滚动时完成加载。滚动页面时,一个WebMethod将被客户端调用,返回要插入客户端的内容,同时,在客户端,将把scroll事件绑定到一个客户端函数(document.ready),这个函数实现从服务器端加载数据。下面详细说说这两个服务器端和客户端方法。
服务器端方法:这个方法用来从数据库或者其他数据源获取数据,并根据数据要插入的控件的格式来生成HTML串。这里我只是加入了一个带有序列号的消息。
[WebMethod] public static string GetDataFromServer() { string resp = string.Empty; ; i <= ; i++) { resp += "<p><span>" + counter++ + "</span> This content is dynamically appended " + "to the existing content on scrolling.</p>" ; } return resp; }
若你要从数据库加载数据,可以如下修改代码:
[WebMethod] public static string GetDataFromServer() { DataSet ds = new DataSet(); // Set value of connection string here string strConnectionString = ""; // Insert your connection string value here SqlConnection con = new SqlConnection(strConnectionString); // Write the select command value as first parameter SqlCommand command = new SqlCommand("SELECT * FROM Person", con); SqlDataAdapter adp = new SqlDataAdapter(command); int retVal = adp.Fill(ds); string resp = string.Empty; ; i <= ds.Tables[].Rows.Count; i++) { string strComment = string.Empty; if (ds.Tables != null) { ] != null) { ].Rows.Count > ) { ].Rows.Count >= i - ) { ].Rows[i - ][] != DBNull.Value) { strComment = ds.Tables[].Rows[i - ][].ToString(); } } } } } resp += "<p><span>" + counter++ + "</span> " + strComment + "</p>"; } return resp; }
客户端方法:在客户端,我使用了document.ready方法,并且把div的scroll事件绑定到了该方法上。我使用了两个div元素,mainDiv和wrapperDiv,并且给mainDiv注册了scroll事件,把动态数据插入到wrapperDiv中。
$(document).ready( function() { $contentLoadTriggered = false; $("#mainDiv").scroll( function() { if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) && $contentLoadTriggered == false) $contentLoadTriggered == false) { $contentLoadTriggered = true; $.ajax( { type: "POST", url: "LoadOnScroll.aspx/GetDataFromServer", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", async: true, cache: false, success: function (msg) { $("#wrapperDiv").append(msg.d); $contentLoadTriggered = false; }, error: function (x, e) { alert("The call to the server side failed. " + x.responseText); } } ); } } ); } );
这里,为检查滚动条是否已经移动到了底部,使用了下面的条件判断,
if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) && $contentLoadTriggered == false)
这个条件将判断滚动条是否已经到达了底部,当它已经移动到了底部,动态数据将从服务器端加载,并且插入wrapperDiv。把数据插入目标div元素的客户端脚本将在异步调用返回成功时执行。
success: function (msg) { $("#wrapperDiv").append(msg.d); $contentLoadTriggered = false; }
这里,你将注意到只有在用户移动滚动到了底部时,请求才会送到服务器端。
我粘贴了几个样图:
Output
原文代码:http://www.codeproject.com/KB/ajax/LoadOnScroll/LoadOnScroll.zip
原文地址:Load-Data-From-Server-While-Scrolling-Using-JQuery
最新文章
- Struts 2
- 如何在一个div标签里显示出另一个网页? <;iframe src="; http://www.baidu.com "; width=";800px"; height=";200px"; scrolling=";no"; frameborder=";0";>; <;/iframe>;
- python的class的__str__()和__repr__()函数
- WP多语言
- XCode升级到7后,规范注释生成器VVDocumenter插件没有用了,怎么办?
- 20150602_Andriod 向窗体传递参数
- NSArray(二) 、 NSMutableArray 、 NSSet 、 NSMutableSet
- 传输层(一)TCP的三次握手和四次挥手及关闭套接字的原理
- 【多媒体封装格式详解】---MKV
- 怎样在thinkphp里面执行原生的sql语句
- [Unity Asset]AssetBundle系列——游戏资源打包
- jboss7.1.1相关error及解决办法
- tagName与nodeName的区别
- Unresolved externa Round
- Spring quartz 单机、集群+websocket集群实现文本、图片、声音、文件下载及推送、接收及显示
- Java GC机制
- JAVA之Lamdba表达式使用摘要
- Python 解析 XML 文件生成 HTML
- Fox And Dinner CodeForces - 510E (最大流)
- LINUX开发使用的3个远程工具