原生ajax实现上拉加载功能

这次给大家带来原生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);      //浏览器距离Topalert(window.screenLeft);      //浏览器距离Leftalert(window.screen.height);    //屏幕分辨率的高alert(window.screen.width);     //屏幕分辨率的宽alert(window.screen.availHeight);   //屏幕可用工作区的高alert(window.screen.availWidth);   //屏幕可用工作区的宽   Jqueryalert($(window).height());       //浏览器当前窗口可视区域高度alert($(document).height());      //浏览器当前窗口文档的高度alert($(document.body).height());    //浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding marginalert($(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)   }  }; }

登录后复制

  .drop-load {   text-align: center;   height: 80px;   line-height: 50px;  }  .drop-load .loading {   display: inline-block;   height: 15px;   width: 15px;   border-radius: 100%;   margin: 6px;   border: 2px solid #666;   border-bottom-color: transparent;   vertical-align: middle;   -webkit-animation: rotate 0.75s linear infinite;   animation: rotate 0.75s linear infinite;  }  @-webkit-keyframes rotate {   0% {    -webkit-transform: rotate(0deg);   }   50% {    -webkit-transform: rotate(180deg);   }   100% {    -webkit-transform: rotate(360deg);   }  }  @keyframes rotate {   0% {    transform: rotate(0deg);   }   50% {    transform: rotate(180deg);   }   100% {    transform: rotate(360deg);   }  }  .loadingEnd {   font-size: 0.3rem;   color: black;   width: 100%;   height: 40px;   text-align: center;  } 

登录后复制

 
 
  加载中
到底了

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

使用Ajax和forms实现注册用户所需功能

ajax实现动态饼图和柱形图的图文详解

以上就是原生ajax实现上拉加载功能的详细内容，更多请关注【创想鸟】其它相关文章！