js代码,当滚动条滚动到页面底部时自动加载附加内容。

1、登记页面滚动事件,window.onscroll =函数(){ };

2,获取页面高度、滚动条位置、文档高度的功能:
复制代码代码如下所示:
获取滚动条的当前位置。
功能getscrolltop(){
VaR scrollTop = 0;
如果(document.documentelement文档。文档元素}。scrollTop){
scrollTop = document.documentelement.scrolltop;
}
否则如果(文件体){
scrollTop = document.body.scrolltop;
}
返回scrollTop;
}

获取当前的高度范围,但
功能getclientheight(){
var自己= 0;
如果(document.body.clientheight文档。文档元素}。自己){
自己= Math.min(document.body.clientheight,文档。文档元素}。自己);
}
{其他
自己= math.max(document.body.clientheight,文档。文档元素}。自己);
}
返回自己的;
}

获取完整的高度
功能getscrollheight(){
返回math.max(document.body.scrollheight,文档。文档元素}。scrollheight);
}

3,在HTML页面底部添加代码:
复制代码代码如下所示:

window.onscroll =函数(){
如果(getscrolltop)(getclientheight)(+)(= = getscrollheight){
警报(底部);
}
}


当滚动条到达页面底部时,触发警报(底部)。接下来要做的是将触发器函数更改为Ajax调用,向页面动态添加内容。

4,动态增加页面元素的样例代码:
复制代码代码如下所示:
无功节点= document.createelement();
newnode.setattribute(href
newnode.innerhtml =新项目;
document.body.appendchild(节点);
var = document.createelement换行符(公司);
document.body.appendchild(换行);

用警报(底部)替换此代码。您可以看到当滚动条滚动到底部时,页面底部会添加一行新项。它将继续滚动下去。

5,将示例代码修改成与Ajax相关的代码:
复制代码代码如下所示:

window.onscroll =函数(){
如果(getscrolltop)(getclientheight)(+)(= = getscrollheight){
无功xmlhttpreq = null;
浏览器使用ActiveX
如果(窗口。ActiveX对象){
xmlhttpreq =新的ActiveX对象(微软。XMLHTTP );
}
/ /子对象使用XMLHttpRequest其他浏览器窗口
如果(窗口。XMLHttpRequest){
xmlhttpreq =新的XMLHttpRequest();
}

如果(xmlhttpreq!= NULL){
设置请求(没有真正打开),说:真正的异步
XmlHttpReq.open(
/ /设置回调,当请求的状态发生变化时,将被称为xmlhttpreq,传输参数
xmlhttpreq.onreadystatechange =函数(){ onajaxtest(xmlhttpreq)};};
提交请求
XmlHttpReq.send(空);
}
}
}

功能onajaxtest(REQ){
无功节点= document.createelement();
newnode.setattribute(href
newnode.innerhtml = req.readystate ++ req.status +++ req.responsetext;
document.body.appendchild(节点);
var = document.createelement换行符(公司);
document.body.appendchild(换行);
}


当滚动条位于页面底部时,将添加以下节点,如下所示:

二千二百
3200 Ajax好
4200 Ajax好

这里2, 3, 4是请求状态发生,200是HTTP响应状态,Ajax可以是文本/ ajaxtext应用程序返回,和下面的参考材料是专门研究。


根据XMLHttpRequest的文档,它应该能够打印出:

0200

一千二百

二千二百

3200 Ajax好

4200 Ajax好

但我不是在这里打印0和1的两个国家,这是为什么,通过一个主方便吱吱声