jquery combines Ajax to load data from the server as the page scrolls

This article mainly introduces jquery combined with Ajax in the page scrolling from the server load data, the sample server end of the C # program, the need for friends can refer to the

Brief introduction

The text will show you how to download data from the server side while scrolling the scroll bar. Using AJAX technology to load data from the server side can help improve the performance of any Web application, because when you open a page, only one screen of data is loaded from the server, and more data is required to load from the server side as the user scrolls through the scroll bar.

Background

It was Facebook that prompted me to write code that loads data from the server when the scroll bar scrolls. While browsing Facebook, I was surprised to find that when I scrolled the page, new data from the server started inserting into the existing data. Then, for the same functionality in C #, I looked up information on the Internet, but I didn't find any articles or blogs about using C # to implement this feature. Of course, there are some articles in Java and PHP implementations. After reading these articles carefully, I began to write code in C #. Because my C # version is running very successfully, I think I would like to share it, so I published this article.

Code

With only a few lines of code, we can load it while scrolling. When scrolling the page, a WebMethod is invoked by the client, returning the content to be inserted into the client, while at the client, the scroll event is bound to a client function (Document.ready) that loads the data from the server side. The two server and client methods are described in detail below.

Server-Side method: This method is used to get data from a database or other data source and to generate an HTML string based on the format of the control to which the data is 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 <= i++)

{

Resp + = "

"+ counter++ +

"This content is dynamically appended" +

"To the existing content on scrolling."

" ;

}

Return resp;

}

If you want 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 the 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 DIV's scroll event to the method. I used two div elements, Maindiv and Wrapperdiv, and registered the scroll event to Maindiv, inserting dynamic Data into the 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

$ (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/getdatafrom Server ", Data:" {} ", ContentType:" Application/json; Charset=utf-8 ", DataType:" JSON ", Async:true, Cache:false, Success:function (msg) {$ (" #wrapperDiv "). Append (MSG.D); $co Ntentloadtriggered = false; }, Error:function (x, E) {alert ("The Called to" server side failed. "+ X.responsetext);} ); } } ); } );

Here, to check if the scroll bar has moved to the bottom, use the following criteria to determine,

?

1 2 3

if ($ ("#mainDiv"). ScrollTop () >= ($ ("#wrapperDiv"). Height ()-$ ("#mainDiv"). Height ()) && $ Contentloadtriggered = = False)

This condition will determine whether the scroll bar has reached the bottom, and when it has moved to the bottom, the dynamic data will be loaded from the server side and inserted into the wrapperdiv. Client script that inserts data into the target DIV element executes when the asynchronous call returns success.

?

1 2 3 4 5

Success:function (msg) {$ ("#wrapperDiv"). Append (MSG.D); $contentLoadTriggered = false;

Here, you will notice that the request is sent to the server side only if the user moves to the bottom of the scroll.

I pasted a few sample diagrams:

Output