jQuery と AJAX を組み合わせて、ページのスクロール時にサーバーからデータをロードする_jquery

はじめに

本文では、スクロールバーをスクロールしたときにサーバーからデータをダウンロードする方法を説明します。 AJAX テクノロジを使用してサーバーからデータをロードすると、ページを開いたときにサーバーから 1 画面のデータのみがロードされるため、より多くのデータが必要なときにスクロール バーをスクロールできるため、Web アプリケーションのパフォーマンスを向上させることができます。次に、サーバー側からロードします。
背景

スクロールバーがスクロールするときにサーバーからデータをロードするコードを書くように促したのは Facebook でした。 Facebook を閲覧しているときに、スクロールするとサーバーからの新しいデータが既存のデータに挿入され始めていることに驚きました。次に、C# を使用して同じ機能を実装することについて、インターネット上で関連情報を検索しましたが、C# を使用してこの機能を実装することに関する記事やブログは見つかりませんでした。もちろん、Java と PHP の実装に関する記事もいくつかあります。これらの記事を注意深く読んだ後、C# でコードを書き始めました。私の C# バージョンは正常に実行できたので、それを共有したいと思い、この投稿を作成しました。

コード

わずか数行のコードで、スクロール時にロードできます。ページをスクロールすると、WebMethod がクライアントによって呼び出され、クライアントに挿入されるコンテンツが返されます。同時に、クライアント上でスクロール イベントがクライアント関数 (document.ready) にバインドされます。関数はサーバーからデータをロードします。これら 2 つのサーバー側とクライアント側のメソッドについて、以下で詳しく説明します。

サーバー側メソッド: このメソッドは、データベースまたはその他のデータ ソースからデータを取得し、データが挿入されるコントロールの形式に従って HTML 文字列を生成するために使用されます。ここでは、シーケンス番号を含むメッセージを追加しました。

[ウェブメソッド]

コードをコピーします コードは次のとおりです:

public static string GetDataFromServer()
{
文字列 resp = string.Empty;
for(int i = 0; i {
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 = "

" counter " " strComment "

";
        }
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