JQuery combined with AJAX: loading data from the server during Page scrolling _ jquery

This article mainly introduces jQuery's combination of AJAX to load data from the server during Page scrolling. The sample server in this article is a C # program. For more information, see Introduction

The text will show how to download data from the server when scrolling the scroll bar. Loading data from the server using AJAX can improve the performance of any web application, because only one screen of data is loaded from the server when the page is opened, when you need more data, you can load it from the server as you scroll the scroll bar.
Background

Facebook prompted me to write code that loads data from the server when the scroll bar is rolling. When I browsed facebook, I was surprised to find that when I scroll through the page, new data from the server began to be inserted into the existing data. Then, I searched for relevant information on the Internet to implement the same function with c #, 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 implementation. After carefully reading these articles, I began to write code in c. Because my C # version runs successfully, I think I would like to share it, So I published this article.

Code

We only need a few lines of code to complete loading during scrolling. When you scroll through a page, a WebMethod is called by the client, and the content of the client to be inserted is returned. At the same time, the scroll event is bound to a client function (document. ready). This function loads data from the server. The following describes the two server and client methods in detail.

Server method: This method is used to obtain data from a database or other data source and generate an HTML string based on the format of the control to be inserted. Here I just added a message with a serial number.

[WebMethod]

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

To load data from a database, you can modify the Code as follows:

[WebMethod]

The Code is as follows:

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 + ="

"+ Counter ++" "+ strComment +"

";
}
Return resp;
}

Client method: on the client side, I used the document. ready method and bound the scroll event of p to this method. I used two p elements, mainDiv and wrapperDiv, and registered a scroll event for mainDiv to insert dynamic data into 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);}});}});});

Here, the following conditions are used to check whether the scroll bar has been moved to the bottom,

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

This condition will determine whether the scroll bar has reached the bottom. When it has moved to the bottom, dynamic data will be loaded from the server side and inserted into wrapperDiv. The client script that inserts data into the target p element will be executed when the asynchronous call returns a successful result.

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

Here, you will notice that the request will be sent to the server only when the user moves to the bottom.

I pasted several sample images:
Output