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 相关文章推荐
Extjs 几个方法的讨论
Jan 28 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
vue实现tab栏点击高亮效果
Aug 19 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执行速度全攻略(上)
2006/10/09 PHP
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
php中spl_autoload详解
2014/10/17 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
vue组件间通信解析
2017/03/01 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python图算法实例分析
2016/08/13 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
python将数据插入数据库的代码分享
2020/08/16 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
Linux文件系统类型
2012/09/16 面试题
房地产财务部员工岗位职责
2014/03/12 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
员工保密协议书
2014/09/27 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
小学数学教学随笔
2015/08/14 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书