原生ajax写的上拉加载实例
上拉加载的思路
1上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据
2.所有要获取屏幕的高度文档的高度和滚动的高度下面的代码是已经做好了兼容的可以直接拿来用
Javascript: alert(document.body.clientWidth);//网页可见区域宽(body) alert(document.body.clientHeight);//网页可见区域高(body) alert(document.body.offsetWidth);//网页可见区域宽(body)，包括border、margin等 alert(document.body.offsetHeight);//网页可见区域宽(body)，包括border、margin等 alert(document.body.scrollWidth);//网页正文全文宽，包括有滚动条时的未见区域 alert(document.body.scrollHeight);//网页正文全文高，包括有滚动条时的未见区域 alert(document.body.scrollTop);//网页被卷去的Top(滚动条) alert(document.body.scrollLeft);//网页被卷去的Left(滚动条) alert(window.screenTop);//浏览器距离Top alert(window.screenLeft);//浏览器距离Left alert(window.screen.height);//屏幕分辨率的高 alert(window.screen.width);//屏幕分辨率的宽 alert(window.screen.availHeight);//屏幕可用工作区的高 alert(window.screen.availWidth);//屏幕可用工作区的宽 Jquery alert($(window).height());//浏览器当前窗口可视区域高度 alert($(document).height());//浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括borderpaddingmargin alert($(window).width());//浏览器当前窗口可视区域宽度 alert($(document).width());//浏览器当前窗口文档对象宽度 alert($(document.body).width());//浏览器当前窗口文档body的宽度 alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括borderpaddingmargin
//获取滚动条当前的位置
functiongetScrollTop(){
varscrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}elseif(document.body){
scrollTop=document.body.scrollTop;
}
returnscrollTop;
}
//获取当前可视范围的高度
functiongetClientHeight(){
varclientHeight=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);
}
returnclientHeight;
}
//获取文档完整的高度
functiongetScrollHeight(){
returnMath.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
varupDown=function(opt){
opt=opt||{};
varup=opt.up||function(){
};
window.onscroll=function(){
if(getScrollTop()+getClientHeight()==getScrollHeight()){//距离顶部+当前高度>=文档总高度即代表滑动到底部
if(is_scroll===true){//当这个为true的时候调用up方法....is_scroll没看懂往下看
up();
}}
}
};
3.首先要默认加载第一页,在window.onload调用upDown这个方法
window.onload=function(){
getData();//页面加载完就显示了第一页
upDown({
up:getData
});
}
4.当页面滚到底部的时候触发up()这个方法,up调用getdata这个方法.下面就是怎么获取数据了
在全局定义两个变量varis_scroll=true;varcount=0;
varis_scroll=true;
varcount=0;
functiongetAjax(){
varel,li;
varxhr=newXMLHttpRequest();
xhr.open('get','page'+count+'.json');
xhr.send();
xhr.onreadystatechange=function(){
varloadingEnd=document.getElementById('loadingEnd');
vardropLoad=document.getElementById('dropLoad');
if(xhr.readyState===4&&xhr.status===200){
varres=xhr.responseText;
vardata=JSON.parse(res);
allData=allData.concat(data);//新的一页拼接到后面;
if(data.length===0){//当获取到的数据长度为0说明没有count+是请求不到数据了
is_scroll=true//定义为true
loadingEnd.style.display='block';//显示没有数据
}
el=document.querySelector("#wrapperul");
for(varkindata){//遍历获取到的每一条数据
li=document.createElement('li');//创建节点
li.innerHTML=""+data[k].name+""+data[k].money+"