上网时经常会看到许多酷炫的网页，其中给我印象较深刻的是鼠标滚动到页面底部时会自动加载内容，一直都很好奇是怎么样做到的，于是自己也尝试着写了一下。
先上个完整代码吧：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="js/jquery.min.js"></script><style>div{width:900px;height:800px;}li{list-style-type:none;}</style> </head> <body id="container"><div>lfjakjflkf</div><script>//获取滚动条当前的位置 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); } window.onscroll = function () { if(getscrolltop() + getclientheight() == getscrollheight()) { var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP")};xhr.open("get","load.json",true);xhr.onreadystatechange = function(){if(xhr.readyState == 4&& xhr.status==200){var txt = xhr.responseText;var str = "";// 由于获取到的是json字符串，因此必须现将其转换为json对象。 $.each(JSON.parse(txt),function(key,value){str += "<li>"+'姓名：'+value[0].name+'。年龄为：'+value[0].age+'。性别为：'+value[0].sex+"</li>"+"<br/>"+"<br/>";$("body").append(str) })}}xhr.send(); }} </script> </body> </html>
load.json文件的代码如下：
{"person":[{"name":"tom","age":"25","sex":"男"}
]}
好了，下面来分析下这段代码，其实先是页面加载完毕会有一部分内容，然后滑动滚动条，一直到文档可视区域高度+滚动条距离文档顶部高度 等于 文档总高度时 异步加载一个json文件的内容。
这里有几个要点：1、获取文档的完整高度。2、获取文档可视区域高度。3、获取滚动条距离文档顶部的高度。4、判断滚动条是否滑动到页面底部，如到了底部则异步加载json文件。5、需要将异步加载的json文件渲染到页面中，由于获取到的是json字符串，因此需要使用JSON.parse()方法先将其转换为json对象，才可以使用$.each()方法进行遍历，然后逐个获取数据。
其实我这里获取文档高度、可视区域高度以及滚动条距离文档顶部高度使用js写的，相对要复杂点，如果用jQuery写的话，会是很简洁的，如
获取文档完整高度，可以使用$(document).height();
获取文档可视区域高度，可以使用$(window).height();
获取滚动条距离文档顶部的高度，可以使用$(window).scrollTop()。
![[导入]基于Web的B／S结构实时监控系统[转]](http://pic.xiahunao.cn/[导入]基于Web的B／S结构实时监控系统[转])
