1. Register the page scroll event, window.onscroll = function(){ };
2. Related functions to obtain page height, scroll bar position, and document height:
The code copy is as follows:
//Get the current position of the scrollbar
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 the current range 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, document.documentElement.scrollHeight);
}
3. Add code at the bottom of the html page:
The code copy is as follows:
<script>
window.onscroll = function () {
if (getScrollTop() + getClientHeight() == getScrollHeight()) {
alert("reach the bottom");
}
}
</script>
This will trigger alert ("reach the bottom") when the scroll bar reaches the bottom of the page. What you need to do next is to change the triggered function to ajax call and dynamically add content to the page.
4. Example code for dynamically adding page elements:
The code copy is 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 this code with alert("reach the bottom"); and you can see that when the scrollbar scrolls to the bottom, a line "new item" will be added at the bottom of the page. Different scrolling down, increasing continuously, endlessly.
5. Modify the sample code to ajax-related code:
The code copy is as follows:
<script>
window.onscroll = function () {
if (getScrollTop() + getClientHeight() == getScrollHeight()) {
var xmlHttpReq = null;
//IE browser uses ActiveX
if (window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
//Other browsers use window's child object XMLHttpRequest
else if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
}
if (xmlHttpReq != null) {
//Set the request (not really opened), true: means asynchronous
xmlHttpReq.open("GET", "/ajaxtest", true);
//Set the callback, when the requested state changes, it will be called, passing the parameter xmlHttpReq
xmlHttpReq.onreadystatechange = function () { onajaxtest(xmlHttpReq); };
//Submit a 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 reaches the bottom of the page, the following nodes will be added, as follows:
2 200
3 200 ajax ok
4 200 ajax ok
Here 2, 3, and 4 are the requested state readyState, 200 is the response status of http, ajax ok is the text returned by the /ajaxtext application. For details, please check the following reference materials.
According to the documentation instructions of XMLHttpRequest, you should be able to print out:
0 200
1 200
2 200
3 200 ajax ok
4 200 ajax ok
But I did not print out the two states of 0 and 1. Why is this? Is it convenient for the passers-by to make a squeak?