1. Registre el evento de desplazamiento de la página, window.onscroll = function () {};
2. Funciones relacionadas para obtener la altura de la página, la posición de la barra de desplazamiento y la altura del documento:
La copia del código es la siguiente:
// Obtener la posición actual de la barra de desplazamiento
función getScrollTop () {
var scrolltop = 0;
if (document.documentelement && document.documentelement.scrolltop) {
scrolltop = document.documentelement.scrolltop;
}
else if (document.body) {
scrolltop = document.body.scrolltop;
}
return scrolltop;
}
// Obtener la altura de rango actual
función getClientHeight () {
var clientHeight = 0;
if (document.body.clientheight && document.documentelement.clientheight) {
ClientHeight = Math.min (document.body.clientHeight, document.documentelement.clientHeight);
}
demás {
ClientHeight = Math.max (document.body.clientheight, document.documentelement.clientHeight);
}
devolver clientHeight;
}
// Obtener la altura completa del documento
función getScrollHeight () {
return math.max (document.body.scrollheight, document.documentelement.scrollheight);
}
3. Agregue código en la parte inferior de la página HTML:
La copia del código es la siguiente:
<script>
window.onscroll = function () {
if (getscrollTop () + getClientHeight () == getscrollHeight ()) {
alerta ("alcanzar el fondo");
}
}
</script>
Esto activará alerta ("alcanzar la parte inferior") cuando la barra de desplazamiento llega a la parte inferior de la página. Lo que debe hacer a continuación es cambiar la función activada a la llamada AJAX y agregar dinámicamente contenido a la página.
4. Código de ejemplo para agregar dinámicamente elementos de página:
La copia del código es la siguiente:
var newnode = document.createElement ("A");
newnode.setAttribute ("href", "#");
newnode.innerhtml = "nuevo elemento";
document.body.appendChild (Newnode);
var newline = document.createElement ("Br");
document.body.appendChild (NewLine);
Reemplace este código con alerta ("alcanzar la parte inferior"); Y puede ver que cuando la barra de desplazamiento se desplaza a la parte inferior, se agregará un "elemento nuevo" de la línea en la parte inferior de la página. Diferente desplazamiento hacia abajo, aumentando continuamente, sin cesar.
5. Modifique el código de muestra al código relacionado con AJAX:
La copia del código es la siguiente:
<script>
window.onscroll = function () {
if (getscrollTop () + getClientHeight () == getscrollHeight ()) {
var xmlhttpreq = null;
// es decir, el navegador usa ActiveX
if (window.activexObject) {
xmlhttpreq = new ActiveXObject ("Microsoft.xmlhttp");
}
// Otros navegadores usan el objeto infantil de Window xmlhttprequest
else if (window.xmlhttprequest) {
xmlhttpreq = new xmlhttprequest ();
}
if (xmlhttpreq! = null) {
// Establecer la solicitud (no se abre realmente), verdadero: significa asíncrono
xmlhttpreq.open ("get", "/ajaxtest", true);
// Establezca la devolución de llamada, cuando el estado solicitado cambia, se llamará, pasando el parámetro xmlhttpreq
xmlhttpreq.OnreadyStateChange = function () {onAJAXTest (xmlhttpreq); };
// Enviar una solicitud
xmlhttpreq.send (nulo);
}
}
}
function OnajaAxtest (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>
Cuando la barra de desplazamiento llega a la parte inferior de la página, se agregarán los siguientes nodos, de la siguiente manera:
2 200
3 200 AJAX OK
4 200 AJAX OK
Aquí 2, 3 y 4 son el Estado ReadyState solicitado, 200 es el estado de respuesta de HTTP, AJAX OK es el texto devuelto por la aplicación /ajaxtext. Para más detalles, consulte los siguientes materiales de referencia.
De acuerdo con las instrucciones de documentación de XMLHTTPRequest, debería poder imprimir:
0 200
1 200
2 200
3 200 AJAX OK
4 200 AJAX OK
Pero no imprimí los dos estados de 0 y 1. ¿Por qué es esto? ¿Es conveniente que los transeúntes hagan un chirrido?