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

//在后添加

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 = '全部加载完毕';

self = null;

} else {

self.innerHTML = '加载失败！点击重试~';

self.ajaxing = false;

}

}

}

return false;

});

//在前添加

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 = '全部加载完毕';

self = null;

} else {

self.innerHTML = '加载失败！点击重试~';

self.ajaxing = false;

}

}

}

return false;

});