jQuery結(jié)合AJAX之在頁面滾動時從服務器加載數(shù)據(jù)
簡介
文本將演示怎么在滾動滾動條時從服務器端下載數(shù)據(jù)。用AJAX技術從服務器端加載數(shù)據(jù)有助于改善任何web應用的性能表現(xiàn),因為在打開頁面時,只有一屏的數(shù)據(jù)從服務器端加載了,需要更多的數(shù)據(jù)時,可以隨著用戶滾動滾動條再從服務器端加載。
背景
是Facebook促使我寫出了在滾動條滾動時再從服務器加載數(shù)據(jù)的代碼。瀏覽facebook時,我很驚訝的發(fā)現(xiàn)當我滾動頁面時,新的來自服務器的數(shù)據(jù)開始插入到此現(xiàn)存的數(shù)據(jù)中。然后,對于用c#實現(xiàn)同樣的功能,我在互聯(lián)網(wǎng)上了查找了相關信息,但沒有發(fā)現(xiàn)任何關于用c#實現(xiàn)這一功能的文章或者博客。當然,有一些Java和PHP實現(xiàn)的文章。我仔細的閱讀了這些文章后,開始用c#寫代碼。由于我的C#版本運行的很成功,所以我想我愿意分享它,因此我發(fā)表了這邊文章。
代碼
只需要很少的幾行代碼我們就能在滾動時完成加載。滾動頁面時,一個WebMethod將被客戶端調(diào)用,返回要插入客戶端的內(nèi)容,同時,在客戶端,將把scroll事件綁定到一個客戶端函數(shù)(document.ready),這個函數(shù)實現(xiàn)從服務器端加載數(shù)據(jù)。下面詳細說說這兩個服務器端和客戶端方法。
服務器端方法:這個方法用來從數(shù)據(jù)庫或者其他數(shù)據(jù)源獲取數(shù)據(jù),并根據(jù)數(shù)據(jù)要插入的控件的格式來生成HTML串。這里我只是加入了一個帶有序列號的消息。
[WebMethod]
{
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;
}
若你要從數(shù)據(jù)庫加載數(shù)據(jù),可以如下修改代碼:
[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的scroll事件綁定到了該方法上。我使用了兩個div元素,mainDiv和wrapperDiv,并且給mainDiv注冊了scroll事件,把動態(tài)數(shù)據(jù)插入到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);
}
}
);
}
}
);
}
);
這里,為檢查滾動條是否已經(jīng)移動到了底部,使用了下面的條件判斷,
if($("#mainDiv").scrollTop() >=
($("#wrapperDiv").height() - $("#mainDiv").height()) &&
$contentLoadTriggered == false)
這個條件將判斷滾動條是否已經(jīng)到達了底部,當它已經(jīng)移動到了底部,動態(tài)數(shù)據(jù)將從服務器端加載,并且插入wrapperDiv。把數(shù)據(jù)插入目標div元素的客戶端腳本將在異步調(diào)用返回成功時執(zhí)行。
success: function (msg)
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
}
這里,你將注意到只有在用戶移動滾動到了底部時,請求才會送到服務器端。
我粘貼了幾個樣圖:
Output


- asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
- js/jquery控制頁面動態(tài)加載數(shù)據(jù) 滑動滾動條自動加載事件的方法
- 拉動滾動條加載數(shù)據(jù)的jquery代碼
- asp.net網(wǎng)站開發(fā)中用jquery實現(xiàn)滾動瀏覽器滾動條加載數(shù)據(jù)(類似于騰訊微博)
- jQuery實現(xiàn)模仿微博下拉滾動條加載數(shù)據(jù)效果
- 基于jquery實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
- jquery滾動加載數(shù)據(jù)的方法
- jQuery實現(xiàn)當拉動滾動條到底部加載數(shù)據(jù)的方法分析
相關文章
單擊按鈕發(fā)送驗證碼,出現(xiàn)倒計時的簡單實例
下面小編就為大家?guī)硪黄獑螕舭粹o發(fā)送驗證碼,出現(xiàn)倒計時的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
jQuery實現(xiàn)圖片隨機切換、抽獎功能(實例代碼)
本文通過實例代碼給大家介紹了jQuery實現(xiàn)圖片隨機切換、抽獎功能,感興趣的朋友跟隨小編一起看看吧2019-10-10
jquery實現(xiàn)根據(jù)瀏覽器窗口大小自動縮放圖片的方法
這篇文章主要介紹了jquery實現(xiàn)根據(jù)瀏覽器窗口大小自動縮放圖片的方法,涉及jquery操作頁面元素屬性與樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
IE8下jQuery改變png圖片透明度時出現(xiàn)的黑邊
這些天在做一個效果,鼠標經(jīng)過,PNG圖片由透明變成不透明, 但是會出現(xiàn)黑邊,晚上查了好多辦法,分別對IE8設置過濾器啊等等,都不見效果。最終在熱心網(wǎng)友的幫助下解決了問題,下面我們就來分析下2015-08-08
jquery實現(xiàn)的帶縮略圖的焦點圖片切換(自動播放/響應鼠標動作)
帶縮略圖的焦點圖片切換在實際應用中很廣泛的,鼠標滑上焦點圖時停止自動播放,滑出時開始自動播放及鼠標滑上后顯示按鈕、顯示大圖等等,感興趣的朋友可以了解下2013-01-01
JQery jstree 大數(shù)據(jù)量問題解決方法
Jquery 結(jié)合jstree 動態(tài)生成一棵樹,如果某一節(jié)點下目錄超過500個,IE 會提示是否允許JS腳本運行,并且目錄加載不全,大約只加載了300左右。2010-03-03

