Load dữ liệu từ Server trong khi cuộn chuột giống facebook

Như tiêu đề, bài viết sẽ hướng dẫn các bạn thực hiện load dữ liệu từ server trong khi cuộn chuột giống facebook khi mà dữ liệu của bạn lớn, và bạn chỉ muốn show dữ liệu cho tới khi nào người dùng cuộn chuột xuống dưới để xem tiếp.
Để làm được bài này, các bạn cần chú ý chút về ajax, và jquery, cũng như một số kiến thức về webservice nhé.
Server Method: Đầu tiên là phương thức được sử dụng để lấy dữ liệu từ server, sau đó gen nó ra dạng HTML để dùng cho ajax như dưới đây

[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;

}

Nếu bạn muốn load dữ liệu từ server thì dùng đoạn code dưới đây

Client Method: Ở phía client chúng ta sử dụng 2 thẻ div, một thẻ được đăng ký sự kiện scroll là mainDiv và một thẻ dùng để append dữ liệu tự động là wrapperDiv

Ở đây chúng ta sử lý sự kiện người dùng scroll chuột xem là scroll xuống hay lên, nếu xuống thì thực hiện gen dữ liệu ra

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

Bạn có thể nhìn thành quả của bạn theo 2 hình dưới đây