When the scroll bar scrolls to the bottom of the page automatically loads the JS code _javascript tips for adding content

1, Register page scrolling event, Window.onscroll = function () {};

2, related to get the page height, scroll bar position, document height function:

Copy Code code as follows:

//Get the scroll bar current position
Function Getscrolltop () {
var scrolltop = 0;
if (document.documentelement && document.documentElement.scrollTop) {
ScrollTop = Document.documentElement.scrollTop;
}
Else if (document.body) {
ScrollTop = Document.body.scrollTop;
}
Return scrolltop;
}

//Get current scope height
function getclientheight () {
var clientheight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
ClientHeight = math.min ( Document.body.clientHeight, Document.documentElement.clientHeight);
}
Else {
ClientHeight = Math.max (Document.body.clientHeight, document.documentElement.clientHeight);
}
return clientheight;
}

//Get the full height of the document
function Getscrollheight () {
return Math.max (Document.body.scrollHeight, Documen T.documentelement.scrollheight);
}

3, add code at the bottom of the HTML page:

Copy Code code as follows:

<script>
Window.onscroll = function () {
if (getscrolltop () + getclientheight () = = Getscrollheight ()) {
Alert ("Reach Bottom");
}
}
</script>

This will trigger alert ("reach Bottom") when the scroll bar reaches the bottom of the page. The next thing to do is to change the triggered functionality to Ajax calls to dynamically add content to the page.

4, dynamically increase the page element's sample code:

Copy Code code as follows:

var newnode = document.createelement ("a");
Newnode.setattribute ("href", "#");
newnode.innerhtml = "New Item";
Document.body.appendChild (NewNode);
var newline = document.createelement ("BR");
Document.body.appendChild (newline);

Replace alert ("reach Bottom") with this code, and you can see that when the scroll bar scrolls to the bottom, the bottom of the page will add a line of "new item", different scrolling down, constantly increasing, endless.

5, modify the sample code to AJAX-related code:

Copy Code code as follows:

<script>
Window.onscroll = function () {
if (getscrolltop () + getclientheight () = = Getscrollheight ()) {
var xmlhttpreq = null;
IE browsers use ActiveX
if (window. ActiveXObject) {
Xmlhttpreq = new ActiveXObject ("Microsoft.XMLHTTP");
}
Other browsers use window's child objects XMLHttpRequest
else if (window. XMLHttpRequest) {
Xmlhttpreq = new XMLHttpRequest ();
}

if (xmlhttpreq!= null) {
Set request (not really open), true: Indicates asynchronous
Xmlhttpreq.open ("Get", "/ajaxtest", true);
Sets the callback, which is invoked when the state of the request changes, passing parameters Xmlhttpreq
Xmlhttpreq.onreadystatechange = function () {onajaxtest (xmlhttpreq);};
Submit Request
Xmlhttpreq.send (NULL);
}
}
}

function Onajaxtest (req) {
var newnode = document.createelement ("a");
Newnode.setattribute ("href", "#");
newnode.innerhtml = Req.readystate + "" + Req.status + "" + req.responsetext;
Document.body.appendChild (NewNode);
var newline = document.createelement ("BR");
Document.body.appendChild (newline);
}
</script>

When the scroll bar is at the bottom of the page, the following nodes are added, as follows:

2 200
3 Ajax OK
4 Ajax OK

Here 2, 3, 4, is the state of the request readystate,200 is the HTTP response state Status,ajax OK is the/ajaxtext application returned text, specific view the following reference.


According to XMLHttpRequest's documentation, you should be able to print out:

0 200

1 200

2 200

3 Ajax OK

4 Ajax OK

But I do not print out 0 and 1 of these two states, this is why, passing the master convenient squeak?