1. Registre o evento de rolagem da página, window.onscroll = function () {};
2. Funções relacionadas para obter a altura da página, a posição da barra de rolagem e a altura do documento:
A cópia do código é a seguinte:
// Obtenha a posição atual da barra de rolagem
função getsCrolltop () {
var scrolltop = 0;
if (document.documentElement && document.documentElement.scrolltop) {
scrolltop = document.documentElement.scrolltop;
}
else if (document.body) {
scrolltop = document.body.scrolltop;
}
retornar scrolltop;
}
// Obtenha a altura do alcance atual
função getClientHeight () {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = math.min (document.body.clientHeight, document.documentElement.clientHeight);
}
outro {
clientHeight = math.max (document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
// Obtenha a altura total do documento
função getScrolHeight () {
return Math.max (document.body.scrolHeight, document.documentElement.scrolheight);
}
3. Adicione código na parte inferior da página HTML:
A cópia do código é a seguinte:
<Cript>
window.onscroll = function () {
if (getsCrolltop () + getClientHeight () == getSCrolHeight ()) {
alerta ("alcance o fundo");
}
}
</script>
Isso acionará o alerta ("alcance o fundo") quando a barra de rolagem chegar à parte inferior da página. O que você precisa fazer a seguir é alterar a função acionada para a chamada AJAX e adicionar conteúdo dinamicamente à página.
4. Código de exemplo para adicionar dinamicamente elementos da página:
A cópia do código é a seguinte:
var newNode = document.createElement ("a");
newNode.setAttribute ("href", "#");
newnode.innerhtml = "novo item";
document.body.appendChild (newNode);
var newline = document.createElement ("BR");
document.body.appendChild (newline);
Substitua este código por alerta ("alcance o fundo"); E você pode ver que, quando a barra de rolagem rola na parte inferior, uma linha "novo item" será adicionada na parte inferior da página. Rolando diferentes para baixo, aumentando continuamente, sem parar.
5. Modifique o código de amostra no código relacionado ao AJAX:
A cópia do código é a seguinte:
<Cript>
window.onscroll = function () {
if (getsCrolltop () + getClientHeight () == getSCrolHeight ()) {
var xmlHttPreq = null;
// IE navegador usa o ActiveX
if (window.activexObject) {
xmlhttPreq = new ActiveXObject ("Microsoft.xmlHttp");
}
// Outros navegadores usam o objeto filho da janela xmlhttprequest
else if (window.xmlhttprequest) {
xmlHttPreq = new XmlHttPrequest ();
}
if (xmlhttpreq! = null) {
// defina a solicitação (não realmente aberta), verdadeiro: significa assíncrono
xmlhttpreq.open ("get", "/ajaxtest", true);
// Defina o retorno de chamada, quando o estado solicitado mudar, será chamado, passando o parâmetro xmlhttpreq
xmlHttPreq.onReadyStatechange = function () {Onajaxtest (xmlHttPreq); };
// Envie uma solicitação
xmlhttpreq.send (null);
}
}
}
função 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>
Quando a barra de rolagem atingir a parte inferior da página, os seguintes nós serão adicionados, como segue:
2 200
3 200 ajax ok
4 200 ajax ok
Aqui 2, 3 e 4 são os Estados Readystate solicitados, 200 é o status de resposta do HTTP, ajax ok é o texto retornado pelo aplicativo /ajaxtext. Para detalhes, verifique os seguintes materiais de referência.
De acordo com as instruções de documentação do XMLHTTPREQUEST, você poderá imprimir:
0 200
1 200
2 200
3 200 ajax ok
4 200 ajax ok
Mas não imprimi os dois estados de 0 e 1. Por que isso é isso? É conveniente para os transeuntes fazer um guincho?