// 猜你喜歡的無限加載

(function(){

var content = document.getElementsByClassName("content")[0];

var footer = document.getElementsByTagName("footer")[0];

var winh = window.innerHeight - footer.offsetHeight;

var ul = document.getElementById("like-ul");

var isFinish = false;

/*

* describe: 創建加載的文檔碎片，并且插入到content

* arguments : content , 要插入到的容器

* return ：返回插入的div

*/

function appendLoading(content){

var fragment = document.createDocumentFragment();

var wrap = document.createElement("div");

var img = document.createElement("img");

var span = document.createElement("span");

wrap.className = "loading";

img.src = "img/icon_loading.png";

span.innerHTML = "正在加載";

wrap.appendChild(img);

wrap.appendChild(span);

fragment.appendChild(wrap);

content.appendChild(fragment);

return wrap;

}

//往content插入文檔碎片

var loading = appendLoading(content);

var loadTop = 0;

//判斷正在加載是否出現在屏幕

content.addEventListener("scroll",function(){

loadTop = loading.getBoundingClientRect().top;

if(loadTop < winh && !isFinish){

ajaxLoad();

isFinish = true;

}

});

// ajax加載數據

function ajaxLoad(){

//創建一個ajax對象

var xhr = new XMLHttpRequest();

// 需要請求的鏈接 / 文件(html.json)

xhr.open("get","goods.json",true);

// 綁定一個change監聽事件

xhr.onreadystatechange = function(){

//當請求完成( =4)并且請求成功( =200)

if(xhr.readyState == 4 && xhr.status == 200){

//接收請求回來的文本

var res = xhr.responseText;

var obj = JSON.parse(res);

var html = "";

for(var key in obj){

html += ‘

‘+ obj[key]["describe"] +‘

￥‘+ obj[key]["price"] +‘￥‘+ obj[key]["s"] +‘‘;

}

setTimeout(function(){

ul.insertAdjacentHTML("beforeEnd",html);

isFinish = false;

},2000);

}

}

// 一個命令 開發發送

xhr.send(null);

}

}());

原文：http://www.cnblogs.com/yuyuhang/p/6417169.html

總結

以上是生活随笔為你收集整理的用ajax写无限循环,ajax无限循环的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。