原生ajax写的上拉加载实例

下面小编就为大家分享一篇原生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的总高度 包括border padding margin alert($(window).width());       //浏览器当前窗口可视区域宽度 alert($(document).width());      //浏览器当前窗口文档对象宽度 alert($(document.body).width());    //浏览器当前窗口文档body的宽度 alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin

 //获取滚动条当前的位置 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); }

 var upDown = function (opt) { opt = opt || {}; var up = 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这个方法.下面就是怎么获取数据了

在全局定义两个变量 var is_scroll = true;var count = 0;

 var is_scroll = true; var count = 0; function getAjax() { var el, li; var xhr = new XMLHttpRequest(); xhr.open('get', 'page' + count + '.json'); xhr.send(); xhr.onreadystatechange = function () { var loadingEnd = document.getElementById('loadingEnd'); var dropLoad = document.getElementById('dropLoad'); if (xhr.readyState === 4 && xhr.status === 200) { 　　　　　　　　 var res = xhr.responseText; var data = JSON.parse(res); allData = allData.concat(data);//新的一页拼接到后面; if (data.length === 0) { //当获取到的数据长度为0 说明没有count+是请求不到数据了 is_scroll = true // 定义为true loadingEnd.style.display = 'block'; //显示没有数据 } el = document.querySelector("#wrapper ul"); for (var k in data) { //遍历获取到的每一条数据 li = document.createElement('li'); // 创建节点 li.innerHTML = "" + data[k].name + "" + data[k].money + "
" + data[k].time + "
"; el.appendChild(li, el.childNodes[0]); } dropLoad.style.display = 'block';//显示加载中 } else { //这个可有可无 是个假的 不管请求没有请求到都会有个加载中的动画 setTimeout(function () { dropLoad.style.display = 'none'; }, 500) } }; }