欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery結合AJAX之在頁面滾動時從服務器加載數(shù)據(jù)

 更新時間：2015年06月30日 10:58:09   投稿：goldensun  
這篇文章主要介紹了jQuery結合AJAX之在頁面滾動時從服務器加載數(shù)據(jù),文中示例服務器端為C#程序,需要的朋友可以參考下

 簡介

文本將演示怎么在滾動滾動條時從服務器端下載數(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]

復制代碼 代碼如下:
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;
}

若你要從數(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

2015630105226301.jpg (582×356)

2015630105323951.jpg (590×352)

相關文章

最新評論