jQuery結合AJAX之在頁面滾動時從伺服器載入資料_jquery

 簡介

文字將示範怎麼在捲動捲軸時從伺服器端下載資料。用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     {
        resp = "

"  counter
          " This content is dynamically appended "
          "to the existing content on scrolling.

" ;
    }
    return resp;
}

若要從資料庫載入數據，可以如下修改程式碼：
 
[WebMethod]

複製程式碼 程式碼如下:

パブリック静的文字列 GetDataFromServer()
    {
        DataSet ds = new DataSet();
 
        // ここに接続文字列の値を設定します
        文字列 strConnectionString = ""; // ここに接続文字列値を挿入します
        SqlConnection con = new SqlConnection(strConnectionString);
 
        // 最初のパラメータとして選択コマンドの値を書き込みます
        SqlCommand コマンド = new SqlCommand("SELECT * FROM Person", con);
        SqlDataAdapter adp = new SqlDataAdapter(コマンド);
int retVal = adp.Fill(ds);
 
        文字列 resp = string.Empty;
for (int i = 1; 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 = "e388a4556c0f65e1904146cc1a846bee45a2772a6b6107b401db3c9b82c049c2" カウンタ "54bdf357c58b8a65c66d7c19c8e4d114 " strComment "94b3e26ee717c64999d7867364b1b4a3";
        }
応答を返します;
    }

ゲスト端末の方法: ゲスト端末では、document.ready メソッドを使用し、div のスクロール イベントをこのメソッドで定義しました。アニメーションデータが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)

この条件は、ストリップが最下位に到達したかどうかを判断し、最下位に到達すると、ターゲット div 要素のクライアントにデータが追加されて、wrapperDiv に格納されます。
 

success: function (msg)
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
}

ここでは、ユーザーが最下部まで移動した場合にのみ、要求がサーバー端末に送信されることに注意してください。

我粘贴了几个样图：

出力