insertAdjacentHTML方法beforeend参数ajax加载更多评论实例页面

回到相关文章 »

代码:

JS代码:
var $ = function(id) {
    return {
        0: document.getElementById(id),
        length: 1,
        click: function(fn) {
            this[0].onclick = fn;
        },
        insertAdjacentHTML: function(position, html) {
            this[0].insertAdjacentHTML(position, html);
        }
    }
};

$("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").insertAdjacentHTML("beforeend", xhr.responseText);    
                self.parentNode.innerHTML = '<span class="g9">全部加载完毕</span>';
                self = null;
            } else {
                self.innerHTML = '加载失败!点击重试~';
                self.ajaxing = false;
            }            
        }
    }
    return false;
});            

效果:

在体育运动中,每项纪录都会有作古的一天!

5月9日 23:42 来自专业版微博 转发(3) | 收藏 | 评论(10)

更多评论↓