使用 jQuery Ajax 在頁面滾動時從服務器加載數據
簡介html
文本將演示怎麼在滾動滾動條時從服務器端下載數據。用AJAX技術從服務器端加載數據有助於改善任何web應用的性能表現，由於在打開頁面時，只有一屏的數據從服務器端加載了，須要更多的數據時，能夠隨着用戶滾動滾動條再從服務器端加載。web
背景
是Facebook促使我寫出了在滾動條滾動時再從服務器加載數據的代碼。瀏覽facebook時，我很驚訝的發現當我滾動頁面時，新的來自服務器的數據開始插入到此現存的數據中。而後，對於用c#實現一樣的功能，我在互聯網上了查找了相關信息，但沒有發現任何關於用c#實現這一功能的文章或者博客。固然，有一些Java和PHP實現的文章。我仔細的閱讀了這些文章後，開始用c#寫代碼。因爲個人C#版本運行的很成功，因此我想我願意分享它，所以我發表了這邊文章。ajax
代碼
只須要不多的幾行代碼咱們就能在滾動時完成加載。滾動頁面時，一個WebMethod將被客戶端調用，返回要插入客戶端的內容，同時，在客戶端，將把scroll事件綁定到一個客戶端函數(document.ready)，這個函數實現從服務器端加載數據。下面詳細說說這兩個服務器端和客戶端方法。數據庫
服務器端方法：這個方法用來從數據庫或者其餘數據源獲取數據，並根據數據要插入的控件的格式來生成HTML串。這裏我只是加入了一個帶有序列號的消息。json
|
1
2
3
4
5
6
7
8
9
10
11
12
|
[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;
}
|
若你要從數據庫加載數據，能夠以下修改代碼：c#
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
[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中。服務器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
$(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);
}
}
);
}
}
);
}
);
|
這裏，爲檢查滾動條是否已經移動到了底部，使用了下面的條件判斷，app
|
1
2
3
|
if
($(
"#mainDiv"
).scrollTop() >=
($(
"#wrapperDiv"
).height() - $(
"#mainDiv"
).height()) &&
$contentLoadTriggered ==
false
)
|
這個條件將判斷滾動條是否已經到達了底部，當它已經移動到了底部，動態數據將從服務器端加載，而且插入wrapperDiv。把數據插入目標div元素的客戶端腳本將在異步調用返回成功時執行。異步
|
1
2
3
4
5
|
success:
function
(msg)
{
$(
"#wrapperDiv"
).append(msg.d);
$contentLoadTriggered =
false
;
}
|
這裏，你將注意到只有在用戶移動滾動到了底部時，請求才會送到服務器端。async
我粘貼了幾個樣圖：
Output
- 1. 使用 jQuery Ajax 在頁面滾動時從服務器加載數據
- 2. Ajax滾動加載頁面
- 3. Ajax動態滾動加載數據
- 4. 瀑布流AJAX無刷新加載數據列表--當頁面滾動到Id時再繼續加載數據
- 5. 頁面滾動動態加載數據，頁面下拉自動加載內容
- 6. jquery滾動頁面底部時ajax加載屢次解決辦法
- 7. 將jQuery Pagination分頁插件用於不使用AJAX加載數據的頁面
- 8. jQuery頁面滾動圖片等元素動態加載實現
- 9. js/jquery控制頁面動態加載數據 滑動滾動條自動加載事件--轉他人的
- 10. 分頁插件，屏幕滾動ajax加載數據渲染頁面
- 更多相關文章...
- • XSLT - 在服務器端 - XSLT 教程
- • SVG 在 HTML 頁面 - SVG 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。