appendHTML方法ajax加载更多评论实例页面

//在后添加

<script>
var appendHTML = function(el, html) {
var divTemp = document.createElement("ul"), nodes = null
, fragment = document.createDocumentFragment();
divTemp.innerHTML = html;
nodes = divTemp.childNodes;
for (var i=0, length=nodes.length; i < length; i+=1) {
fragment.appendChild(nodes[i].cloneNode(true));
}
el.appendChild(fragment);
// 据说下面这样子世界会更清净
nodes = null;
fragment = null;
};

var $ = function(id) {
return {
0: document.getElementById(id),
length: 1,
click: function(fn) {
this[0].onclick = fn;
},
appendHTML: function(html, where) {
appendHTML(this[0], html, where);
}
}
};

$("commentMore").click(function() {
var xhr, self = this;
if (this.ajaxing) return;
if (window.XMLHttpRequest) {
xhr = new window.XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
// 提示
this.innerHTML = '加载中...';
// 阻止二次点击
this.ajaxing = true;
// ajax go go go!
xhr.open("get", this.getAttribute("data-url"), true);
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200 && xhr.responseText) {
$("commentUl").appendHTML(xhr.responseText);
self.parentNode.innerHTML = '<span class="g9">全部加载完毕</span>';
self = null;
} else {
self.innerHTML = '加载失败！点击重试~';
self.ajaxing = false;
}
}
}
return false;
});
</script>

 

//在前添加

<script>
var prependHTML = function(el, html) {
var divTemp = document.createElement("ul"), nodes = null
, fragment = document.createDocumentFragment();
divTemp.innerHTML = html;
nodes = divTemp.childNodes;
for (var i=0, length=nodes.length; i < length; i+=1) {
fragment.appendChild(nodes[i].cloneNode(true));
}
el.insertBefore(fragment, el.firstChild);
// 据说下面这样子世界会更清净
nodes = null;
fragment = null;
};

var $ = function(id) {
return {
0: document.getElementById(id),
length: 1,
click: function(fn) {
this[0].onclick = fn;
},
prependHTML: function(html, where) {
prependHTML(this[0], html, where);
}
}
};

$("commentMore").click(function() {
var xhr, self = this;
if (this.ajaxing) return;
if (window.XMLHttpRequest) {
xhr = new window.XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
// 提示
this.innerHTML = '加载中...';
// 阻止二次点击
this.ajaxing = true;
// ajax go go go!
xhr.open("get", this.getAttribute("data-url"), true);
xhr.send(null);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200 && xhr.responseText) {
$("commentUl").prependHTML(xhr.responseText);
self.parentNode.innerHTML = '<span class="g9">全部加载完毕</span>';
self = null;
} else {
self.innerHTML = '加载失败！点击重试~';
self.ajaxing = false;
}
}
}
return false;
});
</script>