jQuery combined with AJAX to load data from the server when the page scrolls_jquery

Introduction

The text will demonstrate how to download data from the server when scrolling the scroll bar. Using AJAX technology to load data from the server can help improve the performance of any web application because when the page is opened, only one screen of data is loaded from the server. When more data is needed, the scroll bar can be scrolled with the user. Then load it from the server side.
Background

It was Facebook that prompted me to write the code that loads data from the server when the scroll bar scrolls. While browsing Facebook, I was surprised to see that as I scrolled, new data from the server started being inserted into the existing data. Then, regarding using C# to implement the same function, I searched for relevant information on the Internet, but I did not find any articles or blogs about using C# to implement this function. Of course, there are some articles on Java and PHP implementations. After reading these articles carefully, I started writing code in c#. Since my C# version was running successfully, I thought I'd share it, hence this post.

Code

With just a few lines of code we can load on scroll. When scrolling the page, a WebMethod will be called by the client and return the content to be inserted into the client. At the same time, on the client, the scroll event will be bound to a client function (document.ready). This function loads data from the server. . Let’s talk about these two server-side and client-side methods in detail below.

Server-side method: This method is used to obtain data from a database or other data sources, and generate an HTML string according to the format of the control into which the data is to be inserted. Here I just added a message with a sequence number.

[WebMethod]

Copy code The code is as follows:

public static string GetDataFromServer()
{
String resp = string.Empty;
for(int i = 0; i <= 10; i )
{
resp = "

" counter
" This content is dynamically appended "
"to the existing content on scrolling.

" ;
}
Return resp;
}

If you want to load data from the database, you can modify the code as follows:

[WebMethod]

Copy code The code is as follows:

공개 정적 문자열 GetDataFromServer()
    {
        DataSet ds = new DataSet();
 
        // 여기에 연결 문자열 값을 설정합니다
        문자열 strConnectionString = ""; // 여기에 연결 문자열 값을 삽입하세요
        SqlConnection con = new SqlConnection(strConnectionString);
 
        // 선택 명령 값을 첫 번째 매개변수로 씁니다
        SqlCommand 명령 = new SqlCommand("SELECT * FROM Person", con);
        SqlDataAdapter adp = new SqlDataAdapter(명령);
int retVal = adp.Fill(ds);
 
        문자열 resp = string.Empty;
for (int i = 1; i <= ds.Tables[0].Rows.Count; i )
        {
            문자열 strComment = 문자열.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 = "

<스팬>" counter " " strComment "

";
        }
답장을 보내세요;
    }

客户端방법: 에서 客户端, 我使用了document.ready방식, 并且把div的scroll事件绑定到了该方法上. 我使用了两个div元素, mainDiv andwrapperDiv, 并且给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);
}
}
);
}
}
);
}
);

这里,为检查滚动条是否已经移动到了底part,使用了下side条件判断,
 

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

这个条件将判断滚动条是否已经到达了底part,当它已经移动到了底부, 动态数据将从服务器端加载，并且插入wrapperDiv。把数据插入目标div元素的客户端脚本将异步调用返回成功时执行。
 

success: function (msg)
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
}

这里，你将注意到只会送到服务器端。

我粘贴了几个样图：
출력