Wenn die Bildlaufleiste zum Ende der Seite scrollt, wird der js-Code, der Inhalte hinzufügt, automatisch geladen_Javascript-Fähigkeiten

1. Registrieren Sie das Seiten-Scroll-Ereignis, window.onscroll = function(){ }. 2. Verwandte Funktionen zum Ermitteln der Seitenhöhe, der Bildlaufleistenposition und der Dokumenthöhe:

Code kopieren Der Code lautet wie folgt: //Erhalten Sie die aktuelle Position der Bildlaufleiste

Funktion getScrollTop() {

var scrollTop = 0 ;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}

//Holen Sie sich die Höhe des aktuellen Bereichs
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; Ermitteln Sie die vollständige Höhe des Dokuments
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);


3 , fügen Sie unten auf der HTML-Seite Code hinzu:




Code kopieren


Der Code lautet wie folgt:

<script> <div class="codetitle">window.onscroll = function () { <span>if (getScrollTop() getClientHeight() == getScrollHeight()) { <a style="CURSOR: pointer" data="15357" class="copybut" id="copybut15357" onclick="doCopy('code15357')">alert("Reaching the Bottom"); } <u>} </u></script>

Auf diese Weise wird eine Warnung („unten erreicht“) ausgelöst, wenn die Bildlaufleiste den unteren Rand der Seite erreicht. Als nächstes müssen Sie die ausgelöste Funktion in einen Ajax-Aufruf ändern und der Seite dynamisch Inhalte hinzufügen.

4, Beispielcode zum dynamischen Hinzufügen von Seitenelementen:




Kopieren Sie den Code

Der Code lautet wie folgt:


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); Ersetzen Sie diesen Code durch Alert( „Erreichen Sie das Ende“); Sie können sehen, dass beim Scrollen der Bildlaufleiste nach unten eine Zeile mit „Neues Element“ am unteren Rand der Seite hinzugefügt wird, ohne dass diese weiter erhöht wird Ende. 5, ändern Sie den Beispielcode in Ajax-bezogenen Code:

Kopieren Sie den Code


Der Code lautet wie folgt:

<script> <br>/ /IE-Browser verwendet ActiveX <br>if (window.ActiveXObject) { <br>xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); <div class="codetitle">//Andere Browser verwenden das Unterobjekt von window XMLHttpRequest <span>else if (window.XMLHttpRequest) { <a style="CURSOR: pointer" data="32851" class="copybut" id="copybut32851" onclick="doCopy('code32851')">xmlHttpReq = new XMLHttpRequest(); <u>} </u></a>if (xmlHttpReq != null) { </span>//Legen Sie die Anforderung fest (nicht tatsächlich geöffnet), true: zeigt asynchron an der Parameter xmlHttpReq </div>xmlHttpReq.onreadystatechange = function () { onajaxtest(xmlHttpReq); }; <div class="codebody" id="code32851"> <br>function onajaxtest(req) { <br>var newnode = document.createElement("a"); <br>newnode.setAttribute("href", "#"); <br>newnode.innerHTML = req.readyState " " req.status " " req.responseText; <br>document.body.appendChild(newnode); <br>document.body.appendChild( newline); <br>} <br></script>


Wenn die Bildlaufleiste den unteren Rand der Seite erreicht, werden die folgenden Knoten wie folgt hinzugefügt:

2 200
3 200 Ajax ok
4 200 Ajax ok

Hier sind 2, 3 und 4 der Anforderungsstatus „readyState“, 200 ist der Status der http-Antwort, Ajax ok ist der zurückgegebene Text Informationen zur Verwendung durch die /ajaxtext-Anwendung finden Sie in den folgenden Referenzmaterialien.


Laut der XMLHttpRequest-Dokumentation sollten Sie Folgendes ausdrucken können:

0 200

1 200

2 200

3 200 Ajax ok

4 200 Ajax ok

Aber ich habe die beiden Zustände 0 und 1 hier nicht ausgedruckt. Können die Passexperten etwas sagen?