简介

该文本将演示如何在滚动滚动条的同时从服务器下载数据。使用AJAX技术从服务器加载数据有助于提高任何web应用程序的性能，因为当打开一个页面时，只有一个屏幕的数据从服务器加载，当需要更多数据时，用户可以滚动滚动条，然后从服务器加载。背景

当滚动条滚动时，是脸书提示我编写代码从服务器加载数据。在浏览facebook时，我惊讶地发现，当我滚动页面时，来自服务器的新数据开始插入到现有数据中。然后，为了用c#实现同样的功能，我在网上搜索了相关信息，但是没有找到任何关于用c#实现这个功能的文章或者博客。当然，也有一些关于Java和PHP实现的文章。仔细看完这些文章，我开始用c#写代码。因为我的C#版本运行得非常成功，我想我愿意分享一下，所以我发布了这篇文章。

密码

滚动时只需几行代码即可完成加载。滚动页面时，客户端将调用一个WebMethod来返回要插入客户端的内容。同时，客户端将滚动事件绑定到客户端函数(document.ready)，该函数可以从服务器加载数据。下面详细描述这两种服务器端和客户端方法。

服务器端方法：此方法用于从数据库或其他数据源获取数据，并根据数据将插入的控件的格式生成HTML字符串。这里我只是添加了一条带有序列号的消息。[WebMethod]复制代码如下：公共静态字符串getdata from server(){ string resp=string . empty；for(int I=0；i=10I){ resp=' PS pan ' counter/span此内容会在滚动时动态追加到现有内容中。/p '；}返回响应；}如果要从数据库加载数据，可以按如下方式修改代码：【WebMethod】复制代码如下：公共静态字符串getdatafromserver(){ dataset ds=new dataset()；//在此设置连接字符串的值字符串strConnectionString=//在此处插入您的连接字符串值SqlConnection con=new SqlConnection(strConnectionString)；//将select命令值写成第一个参数SqlCommand命令=new SqlCommand(' SELECT * FROM Person '，con)；sqldatadapter ADP=new sqldatadapter(命令)；int retVal=adp。填充(ds)；字符串resp=字符串。空的；for(int I=1；i=ds。表[0].行.计数；i ) { string strComment=string。空的；if (ds。桌子！=null) {if (ds。表[0！=null) {if (ds。表[0]. row . count 0){ if(ds。tables[0]. rows . count=I-1){ if(ds。表[0]。行[i - 1][0]！=DBNull。Value) { strComment=ds。表[0]。行[i - 1][0]。ToString()；} } } } } resp=' PS pan ' counter/span ' strComment '/p '；}返回响应；}客户端方法：在客户端，我使用了document.ready方法，并将div的roll事件绑定到这个方法。我使用了两个div元素，mainDiv和wrapperDiv，并为mainDiv注册了滚动事件，以便将动态数据插入wrapperDiv。

$(文档)。ready(function(){ $ ContentLoadTrigged=false；$('#mainDiv ')。scroll(function(){ if($(' # mainDiv '))。scrollTop()=($('#wrapperDiv ')。height() - $('#mainDiv ')。height())$ contentload trigged==false)$ contentload trigged==false){ $ contentload trigged=true；$.ajax({type: 'POST '，URL : ' loadonscroll . aspx/GetDataFromServer '，data: '{} '，content type : ' application/JSON；charset=utf-8 '，dataType: 'json '，async: true，cache: false，success : function(msg){ $(' # wrapperDiv ')。追加(msg . d)；$ contentLoadTriggered=false}，error:函数(x，e){alert('对服务器端的调用失败。'x . responsetext)；}});}});});这里，为了检查滚动条是否已经移动到底部，使用以下条件判断。

If ($ ('# maindiv ')。scrolltop ()=($ ('# wrapperDiv ')。height ()-$ ('# maindiv ')。height())$ contentload trigged==false)此条件将决定滚动条是否已到达底部。当移动到底部时，它是动态的将数据插入目标div元素的客户端脚本将在异步调用成功返回时执行。

success:函数(msg){$('#wrapperDiv ')。追加(msg . d)；$ contentLoadTriggered=false}在这里，您会注意到，只有当用户移动并滚动到底部时，请求才会发送到服务器。

我粘贴了几个示例：输出