1,注册页面滚动事件,window.onscroll = function(){ };@H_301_1@
2,相关获取页面高度、滚动条位置、文档高度的函数:@H_301_1@
//获取滚动条当前的位置 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; } //获取当前可是范围的高度 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页面底部增加代码:
<script> window.onscroll = function () { if (getScrollTop() + getClientHeight() == getScrollHeight()) { alert("到达底部"); } } </script>
这样当滚动条到达页面底部时就会触发alert("到达底部")。下面要做的就是将触发的功能改为ajax调用,往页面中动态增加内容。
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“,不同往下滚动,不停增加,无止尽。
<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) { //设置请求(没有真正打开),true:表示异步 xmlHttpReq.open("GET","/ajaxtest",true); //设置回调,当请求的状态发生变化时,就会被调用,传递参数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>当滚动条到页面底部之后,就会增加以下节点,如下:
2 200
3 200ajax ok
4 200ajax ok@H_301_1@
这里2、3、4,就是请求的状态readyState,200就是http的回应状态status,ajax ok是/ajaxtext应用返回的文本,具体查看以下参考资料。@H_301_1@
@H_301_1@
按照XMLHttpRequest的的文档说明,应该能够打印出:@H_301_1@
0 200@H_301_1@
1 200@H_301_1@
2 200@H_301_1@
3 200ajax ok@H_301_1@
4 200ajax ok@H_301_1@
但是我这里没有打印出0和1这两个状态,这是为什么呢,路过的高手方便吱一声吗?
@H_301_1@
感谢万能的互联网提供以下资料,感谢作者的无私奉献:@H_301_1@
1,Ajax的XMLHttpRequest对象的属性和方法
@H_301_1@
2,一个传统的Ajax实例
@H_301_1@
3,js判断滚动条是否已到页面最底部/顶部示例@H_301_1@
4,Ajax 给 XMLHttpReq.onreadystatechange =函数 传递参数@H_301_1@
5,用Javascript动态添加删除HTML元素实例@H_301_1@