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报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
js自定义回调函数
Dec 13 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 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编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
python实现微信远程控制电脑
2018/02/22 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
主持词开场白
2014/03/17 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
中华魂演讲稿
2014/05/13 职场文书
运动会演讲稿300字
2014/08/25 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
第一军规观后感
2015/06/12 职场文书
文艺委员竞选稿
2015/11/19 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
MySQL 字符集 character
2022/05/04 MySQL