jQuery在页面使用Ajax滚动时从服务器加载数据。
本文将演示如何在滚动滚动条时从服务器端下载数据。使用Ajax技术从服务器加载数据有助于提高任何Web应用程序的性能,因为在打开的页面中,只有一个来自服务器负载的数据屏幕,需要更多的数据,因为用户可以滚动从服务器加载数据。
背景
这是脸谱网促使我写的代码从服务器又当滚动条滚动加载数据。当我看着脸谱网,我惊讶地发现,当我滚动页面,从服务器的新数据开始被插入到现有的数据。然后,用C实现的#相同的功能,我搜索互联网上的信息,但我没有找到任何文章或博客,实现这一功能的C #。当然,有java和PHP实现的文章,仔细阅读这些文章,我开始在C #写代码。因为我的C #版本运行很成功,我想我愿意分享它,所以我发表这篇文章。
代码
只有几行代码,就可以完成负载时滚动。滚动页面,WebMethod将由客户端调用返回的内容插入到客户端。同时,在客户端,滚动事件将绑定到一个客户端函数(文档就绪),它将从服务器端加载数据。
服务器端方法:此方法用于从数据库或其他数据源获取数据,并根据数据将要插入的控件的格式生成一个HTML字符串。
{ WebMethod }
复制代码如下:字符串getdatafromserver()
{
字符串=空字符串;
对于(int = i 0;i < 10;i + +)
{
+计数器++
该内容是动态附加的+
滚动到现有的内容。;
}
返回响应;
}
如果您想从数据库加载数据,您可以如下修改代码:
{ }的WebMethod复制代码,代码如下:
字符串getdatafromserver()
{
数据集DS =新数据集();
连接字符串的值在这里
字符串=strconnectionstring ;你的连接字符串的值在这里 / /插入
SqlConnection CON =新的SqlConnection(strconnectionstring);
将select命令值写为第一个参数
SqlCommand命令=新SqlCommand(SELECT * FROM人
SqlDataAdapter ADP =新SqlDataAdapter(命令);
int retval = ADP填充(DS);
字符串=空字符串;
为(int i = 1;i < DS表{ 0 }。rows.count;i++)
{
strcomment =空字符串的字符串;
如果(ds.tables!= null)
{
如果(表{ 0 })!= null)
{
如果(DS表{ 0 }。rows.count > 0)
{
如果(DS表{ 0 }。rows.count > = i - 1)
{
如果(表0 { },行{ i - 1 } { 0 })!= DBNull。值)
{
strcomment = DS表{ 0 },{ 1 }我行- ToString(){ 0 };
}
}
}
}
}
分别为+ = ++ strcomment +计数器+ + ;
}
返回响应;
}
客户端的方法:在客户端,我用document.ready方法和结合div的滚动事件的方法,我用了两个DIV元素,maindiv和wrapperdiv,注册滚动事件maindiv插入动态数据为wrapperdiv。
(文件)Ready。
()函数
{
contentloadtriggered美元= false;
$(# maindiv)。滚动(
()函数
{
如果($(# maindiv )(。scrollTop)(> = $(# wrapperdiv)。Height(-)
$(# maindiv )Height())。
contentloadtriggered美元= = false)
contentloadtriggered美元= = false)
{
contentloadtriggered美元=真;
$ ajax(
{
类型:邮政
网址:loadonscroll .aspx / getdatafromserver
数据:{
内容类型:应用程序/ JSON;字符集= UTF-8
DataType:JSON
异步:真,
缓存:false,
成功:函数(MSG)
{
$(# wrapperdiv)。追加(味精。D);
contentloadtriggered美元= false;
},
错误:函数(x,E)
{
警报()服务器端的调用失败。
x.responsetext);
}
}
);
}
}
);
}
);
这里,检查滚动条是否已移动到底部,使用以下条件。
如果($(# maindiv)。ScrollTop(> =)
($(# wrapperdiv)。Height()$(# maindiv)。Height())
contentloadtriggered美元= = false)
此条件将决定滚动条是否已到达底部。当它移到底部,动态数据将负载从服务器端和客户端脚本wrapperdiv插入,插入数据到目标元素时将执行异步调用返回成功。
成功:函数(MSG)
{
$(# wrapperdiv)。追加(味精。D);
contentloadtriggered美元= false;
}
在这里,您将注意到,只有当用户移动到底部时,请求才会发送到服务器。
我贴了好几个样品:
输出