使用 jQuery AJAX 在滚动时加载服务器数据

• 下载源代码 - 375 KB

引言

本文将演示如何在滚动时从服务器加载数据。使用 AJX 从服务器加载数据将有助于任何应用程序提高其性能，因为只有屏幕上显示的数据才会在第一次加载，如果需要更多数据，则会在用户滚动时从服务器加载。

背景

Facebook 是激励我编写代码以在滚动时从服务器加载数据的应用程序。在浏览 Facebook 时，我很惊讶地看到，当我滚动页面时，来自服务器的新数据会附加到现有数据中。我开始好奇如何在 C# 中实现相同的功能。我搜索了信息，但没有找到任何关于在 C# 中执行此操作的文章或博客。当然，有一些关于 Java 和 PHP 的文章。我仔细阅读了它们，然后开始用 C# 编写代码。由于它成功运行，我想分享它，所以我在这里发布它。

代码

要实现滚动加载功能，我们将需要非常少的代码。一个 WebMethod 将从客户端调用，它返回要滚动时附加的内容，以及一个客户端函数 (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 上滚动的事件绑定。我使用了两个 div 元素：mainDiv 和 wrapperDiv。我为 mainDiv 注册了滚动事件，并将动态数据附加到 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;
}

在这里，您会注意到，只有当用户滚动到底部时，请求才会发送到服务器。

我已将示例应用程序附加到本文。

输出

历史

First version.