原生ajax寫的上拉加載實例（圖文教程）

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();
 }}
 }
 };

window.onload = function () {
 getData();//頁面加載完就顯示了第一頁
 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);//新的一頁拼接到后面;
 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 = "<p class='item-top'><span class='item-title'>" + data[k].name + "</span><span class='item-money'>" + data[k].money + "</span></p><p class='item-time'>" + data[k].time + "</p><p class='bottom-line'></p>";
 el.appendChild(li, el.childNodes[0]);
 }
 dropLoad.style.display = 'block';//顯示加載中
 } else { //這個可有可無 是個假的 不管請求沒有請求到都會有個加載中的動畫
 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>
<p>
 <ul>
 </ul>
</p>
<p id="dropLoad" class="drop-load" style="display: none">
 <span class="loading"></span>
 <span>加載中</span>
</p>
<p id="loadingEnd" class="loadingEnd" style="display: none">到底了</p>
</body>