欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

當(dāng)滾動條滾動到頁面底部自動加載增加內(nèi)容的js代碼

 更新時間：2014年05月13日 10:55:07   作者：  
這篇文章主要介紹了如何使用javscript實(shí)現(xiàn)滾動條滾動到頁面底部自動加載增加頁面內(nèi)容,需要的朋友可以參考下
1，注冊頁面滾動事件，window.onscroll = function(){ };

2，相關(guān)獲取頁面高度、滾動條位置、文檔高度的函數(shù)：
復(fù)制代碼 代碼如下:

//獲取滾動條當(dāng)前的位置
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;
}

//獲取當(dāng)前可是范圍的高度
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;
}

//獲取文檔完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}

3，在html頁面底部增加代碼：
復(fù)制代碼 代碼如下:

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

這樣當(dāng)滾動條到達(dá)頁面底部時就會觸發(fā)alert("到達(dá)底部")。下面要做的就是將觸發(fā)的功能改為ajax調(diào)用，往頁面中動態(tài)增加內(nèi)容。

4，動態(tài)增加頁面元素的示例代碼：
復(fù)制代碼 代碼如下:

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("到達(dá)底部");，就可以看到，當(dāng)滾動條滾動到底部時，頁面底部就會增加一行”new item“，不同往下滾動，不停增加，無止盡。

5，將示例代碼修改為ajax相關(guān)代碼：
復(fù)制代碼 代碼如下:

<script>
window.onscroll = function () {
if (getScrollTop() + getClientHeight() == getScrollHeight()) {
var xmlHttpReq = null;
//IE瀏覽器使用ActiveX
if (window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
//其它瀏覽器使用window的子對象XMLHttpRequest
else if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
}

if (xmlHttpReq != null) {
//設(shè)置請求（沒有真正打開），true：表示異步
xmlHttpReq.open("GET", "/ajaxtest", true);
//設(shè)置回調(diào)，當(dāng)請求的狀態(tài)發(fā)生變化時，就會被調(diào)用，傳遞參數(shù)xmlHttpReq
xmlHttpReq.onreadystatechange = function () { onajaxtest(xmlHttpReq); };
//提交請求
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>

當(dāng)滾動條到頁面底部之后，就會增加以下節(jié)點(diǎn)，如下：

2 200
3 200 ajax ok
4 200 ajax ok

這里2、3、4，就是請求的狀態(tài)readyState，200就是http的回應(yīng)狀態(tài)status，ajax ok是/ajaxtext應(yīng)用返回的文本，具體查看以下參考資料。


按照XMLHttpRequest的的文檔說明，應(yīng)該能夠打印出：

0 200

1 200

2 200

3 200 ajax ok

4 200 ajax ok

但是我這里沒有打印出0和1這兩個狀態(tài)，這是為什么呢，路過的高手方便吱一聲嗎？

相關(guān)文章

  • 利用JS實(shí)現(xiàn)瀏覽器的title閃爍

    利用JS實(shí)現(xiàn)瀏覽器的title閃爍

    經(jīng)?？梢钥匆姷膖itle里面的消息提示，下面是JS的一種實(shí)現(xiàn)方法,需要的朋友可以參考下
    2013-07-07
  • 淺談微信頁面入口文件被緩存解決方案

    淺談微信頁面入口文件被緩存解決方案

    緩存對于前端頁面來說，是加速頁面加載的利器之一，但也同時帶來了很多問題，這篇文章主要介紹了淺談微信頁面入口文件被緩存解決方案，感興趣的小伙伴們可以參考一下
    2018-09-09
  • php 修改密碼實(shí)現(xiàn)代碼

    php 修改密碼實(shí)現(xiàn)代碼

    這篇文章主要介紹了php 修改密碼實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
    2017-05-05

    • 最新評論