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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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对称加密函数实现数据的加密解密
2016/10/27 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
英语专业学生个人求职信范文
2014/01/06 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
教务处教学工作总结
2015/08/10 职场文书
合作意向书范本
2019/04/17 职场文书
团组织关系介绍信
2019/06/24 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书