jQuery结合AJAX之在页面滚动时从服务器加载数据


Posted in Javascript onJune 30, 2015

 简介

文本将演示怎么在滚动滚动条时从服务器端下载数据。用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用户滚动滚动条再从服务器端加载。
背景

是Facebook促使我写出了在滚动条滚动时再从服务器加载数据的代码。浏览facebook时,我很惊讶的发现当我滚动页面时,新的来自服务器的数据开始插入到此现存的数据中。然后,对于用c#实现同样的功能,我在互联网上了查找了相关信息,但没有发现任何关于用c#实现这一功能的文章或者博客。当然,有一些Java和PHP实现的文章。我仔细的阅读了这些文章后,开始用c#写代码。由于我的C#版本运行的很成功,所以我想我愿意分享它,因此我发表了这边文章。

代码

只需要很少的几行代码我们就能在滚动时完成加载。滚动页面时,一个WebMethod将被客户端调用,返回要插入客户端的内容,同时,在客户端,将把scroll事件绑定到一个客户端函数(document.ready),这个函数实现从服务器端加载数据。下面详细说说这两个服务器端和客户端方法。

服务器端方法:这个方法用来从数据库或者其他数据源获取数据,并根据数据要插入的控件的格式来生成HTML串。这里我只是加入了一个带有序列号的消息。
 
[WebMethod]

public static string  GetDataFromServer()

{

    string resp = string.Empty;

    for(int i = 0; i <= 10; 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;

for (int i = 1; i <= ds.Tables[0].Rows.Count; i++)

        {

            string strComment = string.Empty;

if (ds.Tables != null)

            {

if (ds.Tables[0] != null)

                {

if (ds.Tables[0].Rows.Count > 0)

                    {

if (ds.Tables[0].Rows.Count >= i - 1)

                        {

if (ds.Tables[0].Rows[i - 1][0] != DBNull.Value)

                            {

                                strComment = ds.Tables[0].Rows[i - 1][0].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

jQuery结合AJAX之在页面滚动时从服务器加载数据

jQuery结合AJAX之在页面滚动时从服务器加载数据

Javascript 相关文章推荐
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 #Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 #Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 #Javascript
javascript日期计算实例分析
Jun 29 #Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 #Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 #Javascript
JavaScript实现级联菜单的方法
Jun 29 #Javascript
You might like
php 计划任务 检测用户连接状态
2012/03/29 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
js实现点击烟花特效
2020/10/14 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
python刷投票的脚本实现代码
2014/11/08 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
工商企业管理实习自我鉴定
2013/12/04 职场文书
服装机修工岗位职责
2013/12/26 职场文书
团组织关系介绍信
2014/01/12 职场文书
工会主席岗位责任制
2014/02/11 职场文书
2014年店长工作总结
2014/11/17 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
捐款仪式主持词
2015/07/04 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书