使用 jQuery Ajax 在頁面滾動時從伺服器載入資料

oschina發表於2013-09-18
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 <= 10; i++)
    {
        resp += "<p><span>"  + counter++ + 
          "</span> This content is dynamically appended " + 
          "to the existing content on scrolling.</p>" ; 
    } 
    return 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 += "<p><span>" + counter++ + "</span> " + strComment + "</p>";
        }
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

　　原文地址：Load-Data-From-Server-While-Scrolling-Using-JQuery

相關文章