簡(jiǎn)介

文本將演示怎么在滾動(dòng)滾動(dòng)條時(shí)從服務(wù)器端下載數(shù)據(jù)。用AJAX技術(shù)從服務(wù)器端加載數(shù)據(jù)有助于改善任何web應(yīng)用的性能表現(xiàn)，因?yàn)樵诖蜷_頁面時(shí)，只有一屏的數(shù)據(jù)從服務(wù)器端加載了，需要更多的數(shù)據(jù)時(shí)，可以隨著用戶滾動(dòng)滾動(dòng)條再?gòu)姆?wù)器端加載。
背景

是Facebook促使我寫出了在滾動(dòng)條滾動(dòng)時(shí)再?gòu)姆?wù)器加載數(shù)據(jù)的代碼。瀏覽facebook時(shí)，我很驚訝的發(fā)現(xiàn)當(dāng)我滾動(dòng)頁面時(shí)，新的來自服務(wù)器的數(shù)據(jù)開始插入到此現(xiàn)存的數(shù)據(jù)中。然后，對(duì)于用c#實(shí)現(xiàn)同樣的功能，我在互聯(lián)網(wǎng)上了查找了相關(guān)信息，但沒有發(fā)現(xiàn)任何關(guān)于用c#實(shí)現(xiàn)這一功能的文章或者博客。當(dāng)然，有一些Java和PHP實(shí)現(xiàn)的文章。我仔細(xì)的閱讀了這些文章后，開始用c#寫代碼。由于我的C#版本運(yùn)行的很成功，所以我想我愿意分享它，因此我發(fā)表了這邊文章。

代碼

只需要很少的幾行代碼我們就能在滾動(dòng)時(shí)完成加載。滾動(dòng)頁面時(shí)，一個(gè)WebMethod將被客戶端調(diào)用，返回要插入客戶端的內(nèi)容，同時(shí)，在客戶端，將把scroll事件綁定到一個(gè)客戶端函數(shù)(document.ready)，這個(gè)函數(shù)實(shí)現(xiàn)從服務(wù)器端加載數(shù)據(jù)。下面詳細(xì)說說這兩個(gè)服務(wù)器端和客戶端方法。

服務(wù)器端方法：這個(gè)方法用來從數(shù)據(jù)庫(kù)或者其他數(shù)據(jù)源獲取數(shù)據(jù)，并根據(jù)數(shù)據(jù)要插入的控件的格式來生成HTML串。這里我只是加入了一個(gè)帶有序列號(hào)的消息。
 
[WebMethod]

$(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);
}
}
);
}
}
);
}
);

這里，為檢查滾動(dòng)條是否已經(jīng)移動(dòng)到了底部，使用了下面的條件判斷，
 

if($("#mainDiv").scrollTop() >=
 ($("#wrapperDiv").height() - $("#mainDiv").height()) &&
  $contentLoadTriggered == false)

這個(gè)條件將判斷滾動(dòng)條是否已經(jīng)到達(dá)了底部，當(dāng)它已經(jīng)移動(dòng)到了底部，動(dòng)態(tài)數(shù)據(jù)將從服務(wù)器端加載，并且插入wrapperDiv。把數(shù)據(jù)插入目標(biāo)div元素的客戶端腳本將在異步調(diào)用返回成功時(shí)執(zhí)行。
 

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

這里，你將注意到只有在用戶移動(dòng)滾動(dòng)到了底部時(shí)，請(qǐng)求才會(huì)送到服務(wù)器端。

我粘貼了幾個(gè)樣圖：
Output

最新評(píng)論