當滾動條滾動到頁面底部自動載入增加內容的js程式碼_javascript技巧

1，註冊頁面捲動事件，window.onscroll = function(){ };

2，相關取得頁面高度、捲軸位置、文件高度的函數：

複製程式碼 程式碼如下:

//取得捲軸目前的位置
function getScrollTop() {
var scrollTop = 0 ;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}
else if (document.body) { }
return scrollTop;
}

//取得目前可是範圍的高度
function getClientHeight() {
var clicliclients = 0; >if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}

//取得文件完整的高度return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}


3，在html頁面底部增加程式碼：

3，在html頁面底部增加程式碼：

複製程式碼 程式碼如下:

<script> <BR>window.onscroll = function () { <BR>if (getScrollTop() getClientHeight() == getScrollHeight()) { <BR>alert("到達底部"); <BR>} <BR>} <BR></script>

這樣當捲軸到達頁面底部時就會觸發alert("到達底部")。以下要做的就是將觸發的功能改為ajax調用，往頁面中動態增加內容。

4，動態增加頁面元素的範例程式碼：

複製程式碼

程式碼如下:

程式碼如下：
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);


將這段程式碼替換掉alert( "到達底部");，就可以看到，當滾動條滾動到底部時，頁面底部就會增加一行”new item“，不同往下滾動，不停增加，無窮無盡。

5，將範例程式碼修改為ajax相關程式碼： 複製程式碼

程式碼如下:



程式碼如下:


<script> <BR>window.onscroll = function () { <BR>if (getScrollTop() getClientHeight() == getScrollHeight()) { <BR>var xmlHttpReq. IE瀏覽器使用ActiveX <BR>if (window.ActiveXObject) { <BR>xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); <br>} <br>//其它瀏覽器使用window的子物件XMLHtttt >else if (window.XMLHttpRequest) { <BR>xmlHttpReq = new XMLHttpRequest(); <BR>} <BR><BR>if (xmlHttpReq != null) { <BR>//設定請求（沒有真正開啟）， true：表示非同步<BR>xmlHttpReq.open("GET", "/ajaxtest", true); <BR>//設定回調，當請求的狀態改變時，就會被調用，傳遞參數xmlHttpReq <BR> xmlHttpReq.onreadystatechange = function () { onajaxtest(xmlHttpReq); }; <BR>//提交請求<br>xmlHttpReq.send(null); <br>} <BR>} <BR>} <BR> function onajaxtest(req) { <BR>var newnode = document.createElement("a"); <BR>newnode.setAttribute("href", "#"); <BR>newnode.innerHTML = req.readyState " req.readyState " req.readyready .status " " req.responseText; <BR>document.body.appendChild(newnode); <BR>var newline = document.createElement("br"); <BR>document.body.appendChild(newline); </script>

}



當捲軸到頁底之後，就會增加以下節點，如下：

2 200
3 200 ajax ok >4 200 ajax ok

這裡2、3、4，就是請求的狀態readyState，200就是http的回應狀態status，ajax ok是/ajaxtext應用返回的文本，具體查看以下參考資料。


依照XMLHttpRequest的文件說明，應該可以列印：

0 200

1 200

2 200 >3 200 ajax ok

4 200 ajax ok

但是我這裡沒有印出0和1這兩個狀態，這是為什麼呢，路過的高手方便吱一聲嗎？