原生ajax寫的上拉加載實(shí)例

Javascript:
alert(document.body.clientWidth);  //網(wǎng)頁(yè)可見區(qū)域?qū)?body)
alert(document.body.clientHeight);  //網(wǎng)頁(yè)可見區(qū)域高(body)
alert(document.body.offsetWidth);  //網(wǎng)頁(yè)可見區(qū)域?qū)?body)，包括border、margin等
alert(document.body.offsetHeight);  //網(wǎng)頁(yè)可見區(qū)域?qū)?body)，包括border、margin等
alert(document.body.scrollWidth);  //網(wǎng)頁(yè)正文全文寬，包括有滾動(dòng)條時(shí)的未見區(qū)域
alert(document.body.scrollHeight);  //網(wǎng)頁(yè)正文全文高，包括有滾動(dòng)條時(shí)的未見區(qū)域
alert(document.body.scrollTop);   //網(wǎng)頁(yè)被卷去的Top(滾動(dòng)條)
alert(document.body.scrollLeft);   //網(wǎng)頁(yè)被卷去的Left(滾動(dòng)條)
alert(window.screenTop);      //瀏覽器距離Top
alert(window.screenLeft);      //瀏覽器距離Left
alert(window.screen.height);    //屏幕分辨率的高
alert(window.screen.width);     //屏幕分辨率的寬
alert(window.screen.availHeight);   //屏幕可用工作區(qū)的高
alert(window.screen.availWidth);   //屏幕可用工作區(qū)的寬
 
 
 
Jquery
alert($(window).height());       //瀏覽器當(dāng)前窗口可視區(qū)域高度
alert($(document).height());      //瀏覽器當(dāng)前窗口文檔的高度
alert($(document.body).height());    //瀏覽器當(dāng)前窗口文檔body的高度
alert($(document.body).outerHeight(true)); //瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin
alert($(window).width());       //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?
alert($(document).width());      //瀏覽器當(dāng)前窗口文檔對(duì)象寬度
alert($(document.body).width());    //瀏覽器當(dāng)前窗口文檔body的寬度
alert($(document.body).outerWidth(true)); //瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin

//獲取滾動(dòng)條當(dāng)前的位置
 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;
 }
 //獲取當(dāng)前可視范圍的高度
 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()) { //距離頂部+當(dāng)前高度 >=文檔總高度 即代表滑動(dòng)到底部
    if(is_scroll === true){ //當(dāng)這個(gè)為true的時(shí)候調(diào)用up方法 ....is_scroll沒看懂往下看
 up();
 }}
  }
 };

window.onload = function () {
  getData();//頁(yè)面加載完就顯示了第一頁(yè)
  upDown({
   up: getData
  });
 }

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);//新的一頁(yè)拼接到后面;
    if (data.length === 0) { //當(dāng)獲取到的數(shù)據(jù)長(zhǎng)度為0 說(shuō)明沒有count+是請(qǐng)求不到數(shù)據(jù)了
      is_scroll = true // 定義為true 
     loadingEnd.style.display = 'block'; //顯示沒有數(shù)據(jù)
    }
    el = document.querySelector("#wrapper ul"); 
    for (var k in data) { //遍歷獲取到的每一條數(shù)據(jù)
     li = document.createElement('li'); // 創(chuàng)建節(jié)點(diǎn)
     li.innerHTML = "div class='item-top'>span class='item-title'>" + data[k].name + "/span>span class='item-money'>" + data[k].money + "/span>/div>div class='item-time'>" + data[k].time + "/div>div class='bottom-line'>/div>";
     el.appendChild(li, el.childNodes[0]);
    }
    dropLoad.style.display = 'block';//顯示加載中
   } else { //這個(gè)可有可無(wú) 是個(gè)假的 不管請(qǐng)求沒有請(qǐng)求到都會(huì)有個(gè)加載中的動(dòng)畫
    setTimeout(function () {
     dropLoad.style.display = 'none';
    }, 500)
   }
  };
 }

style>
  .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;
  }
 /style>

body>
div>
 ul>
 /ul>
/div>
div id="dropLoad" class="drop-load" style="display: none">
 span class="loading">/span>
 span>加載中/span>
/div>
div id="loadingEnd" class="loadingEnd" style="display: none">到底了/div>
/body>