Implementation Scheme of jquery browser rolling loading technology

It seems meaningless to locate the target data by locating the page number when the data volume increases frequently. I think a mature WEB application for user experience should guide users to use TAG or search functions to find target data. It is a good attempt to browse data, especially the latest data, and use the browser's scroll bar to load the data ......

I tried to use jquery to implement this function. First, you need to obtain the total length attribute value of the scroll bar: scrollHeight, and the current position attribute value of the scroll bar: scrollTop. After calculation, if the current value is 2/3 in total, new data is loaded. Assume that the DOM has an element <div id = "mypage"> </div>, and the overflow style of this element is scroll, that is, the scroll bar is enabled when the content overflow element in the element specifies the height. Use the jqueryloadmetadata as a metadata file. In this case, table.html is used. The content of this file can be a data table that enables the browser to scroll.

Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jquery. js"> // load the jquery library </script>
<Script type = "text/javascript"> gh

Var hght = 0; // initialize the total length of the scroll bar
Var top = 0; // initialize the current position of the scroll bar
$ (Document). ready (function () {// onload event of DOM
Contents ("#mypage00000000.load(”table.html "); // The content of table.html is loaded into the mypage element.

$ ("# Mypage"). scroll (function () {// defines the event triggered when the scroll bar position changes.
Hght = this. scrollHeight; // obtain the total length of the scroll bar and assign it to the hght variable.
Top = this. scrollTop; // obtain the current value of the scroll bar and assign it to the top variable.
});
});

SetInterval ("cando ();", 2000); // call the cando function once every two seconds to determine the position of the current scroll bar.

Function cando (){
If (top> parseInt (hght/3) * 2) // determines whether the current position of the scroll bar exceeds 2/3 of the total length. parseInt is the entire function.
Show (); // If yes, call the show function to load the content.
}

Function show (){
Response .get(response table.html ", function (data) {// use getresponse of jqueryto get table.html content
$ ("# Mypage"). append (data); // use the append method to append content to the mypage element.
Hght = 0; // restore the total length of the scroll bar because $ ("# mypage "). when a scroll event is triggered, a new value is returned. If it is not restored, it may cause a judgment error and load it again ......
Top = 0; // The cause is the same as above.
});
}

</Script>
<Div id = "mypage"> </div>

Why is it necessary to call a decision every two seconds? As long as $ ("# mypage "). when a scroll event is triggered, it will affect the hght and top values. This value may always satisfy the judgment of the cando function, that is, the top value is always at 2/3 of the hght. Therefore, multiple loads may increase the server load. This is why hght and top values are assigned 0 after each loading.

The effect of this Code is to add the content of table.html to the element mypage only when the scroll bar of element mypageis set to 2/3 of the total length of the scroll bar. Of course, this operation is endlessly loaded. In a real Ajax application, table.html can be replaced with an asp or php script to receive get or post parameters for processing, and then return meaningful data. The get method of jquery can set the parameter data of the get method, for example:

Copy codeThe Code is as follows:
$. Get ("test. php", {name: "boho", id: "1 ″});

Equivalent to http: // localhost/test. php? Name = boho & id = 1. Then, get the output content of test. php through the callback function of the get method:

Copy codeThe Code is as follows:
$. Get ("test. php", {name: "boho", id: "1"}, function (data ){
Alert ("Data Loaded:" + data );
});