javascript - 使用 ajax 将 HTML 文档附加到元素

Question

我已经使用各种在线资源编写了这段代码，但我似乎无法弄清楚最后一部分。

function loadajax (event) {
    event.preventDefault();
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange  = function(){ 
        if(xhr.readyState  == 4){
            if(xhr.status  == 200) 
                document.ajax.dyn="Received:"  + xhr.responseText; 
            else
                document.ajax.dyn="Error code " + xhr.status;
        }
    }; 

    xhr.open('GET', this.href, true);
    var content = document.getElementsByTagName('article')[0];

    content.innerHTML = xhr.responseText;
}

在我需要向我的页面添加内容之前，它似乎有效。确实content.innerHTML = xhr.responseText;没有返回任何内容。我得到一个简单的 HTML 文件，如何将它发布到我的页面中？我究竟做错了什么？

谢谢你的帮助！

Answer 1

ajax 调用是异步的。如果您将该content.innerHTML = xhr.responseText;行移到这样的onreadystatechange函数中，它将起作用：

function loadajax (event) {
event.preventDefault();
xhr = new XMLHttpRequest();
 xhr.onreadystatechange  = function() 
    { 
       if(xhr.readyState  == 4)
       {
        if(xhr.status  == 200) 
            document.ajax.dyn="Received:"  + xhr.responseText; 

            content.innerHTML = xhr.responseText;
        else
            document.ajax.dyn="Error code " + xhr.status;
        }
    }; 

xhr.open('GET', this.href, true);
var content = document.getElementsByTagName('article')[0];

}

Answer 2

将您的 contet.innerHTML 放入状态 200 条件中。

您只是在内容真正存在之前将其分配给内容。在 ajax 从服务器获取它之前。