使用 AJAX 获取特定的 DOM 元素（使用 Javascript，而不是 jQuery）

Question

如何使用 AJAX（纯 JavaScript，NOT jQuery）获取页面（相同域）并仅显示特定的 DOM 元素？ （比如id为“bodyContent”的DOM元素）。

我正在使用 MediaWiki 1.18，所以我的方法必须不那么传统（我知道可以为 MediaWiki 启用一个 jQuery 版本，但我无权这样做，所以我需要查看在其他选项）。如果代码混乱，我深表歉意，但我需要以这种方式构建它是有原因的。我最感兴趣的是看看 Javascript 可以做什么。

这是 HTML 代码：

<div class="mediaWiki-AJAX"><a href="http://www.domain.com/whatever"></a></div>

这是我目前的 Javascript：

var AJAXs = document.getElementsByClassName('mediaWiki-AJAX');
if (AJAXs.length > 0) {
    for (var i = AJAXs.length - 1; i >= 0; i--) {
        var URL = AJAXs[i].getElementsByTagName('a')[0].href;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                AJAXs[i].innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open('GET',URL,true);
        xmlhttp.send();
    }
}

编辑：

感谢lbstr 给出的答案，我能够想出以下内容，这很有效！你会注意到我添加了额外的步骤来删除我不想要的任何元素。无论出于何种原因，getElementById() 对 responseText 不起作用，但 getElementsByClassName() 起作用。我想这是因为在运行 AJAX 调用之前，wiki 页面上已经存在“bodyContent”的 ID。

//This function is necessary to read the response text correctly.
function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one
    return node.outerHTML || (
    function(n){
        var div = document.createElement('div'), h;
        div.appendChild( n.cloneNode(true) );
        h = div.innerHTML;
        div = null;
        return h;
    })(node);
}

// This code deals with populating the AJAX divs within a wiki page.
var AJAXs = document.getElementsByClassName('mediaWiki-AJAX');
if (AJAXs.length > 0) {
    for (var i = AJAXs.length - 1; i >= 0; i--) {
        (function(index){
            var URL = AJAXs[index].getElementsByTagName('a')[0].href;
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var tempDiv = document.createElement('div');
                    tempDiv.innerHTML = xmlhttp.responseText;
                    var AJAXContent = tempDiv.getElementsByClassName('mw-content-ltr')[0];

                    //Remove unnecessary "fixed" items to avoid clutter.
                    var hiddenItems = AJAXContent.getElementsByClassName('hidden-item');
                    if (hiddenItems.length > 0) {
                        for (var j = hiddenItems.length - 1; j >= 0; j--) {
                            AJAXContent.removeChild(hiddenItems[j]);
                        }
                    }
                    var protectedItems = AJAXContent.getElementsByClassName('protected-item');
                    if (protectedItems.length > 0) {
                        for (var j = protectedItems.length - 1; j >= 0; j--) {
                            AJAXContent.removeChild(protectedItems[j]);
                        }
                    }

                    //Insert the AJAX content and rerun Javascript on it.
                    if (AJAXContent !== null && AJAXContent !== undefined) {
                        AJAXs[index].innerHTML = outerHTML(AJAXContent);
                        assign_Popup_Functions(AJAXs[index]);
                        fix_External_Links(AJAXs[index]);
                        assign_iFrame_Functions(AJAXs[index]);
                    }
                }
            }
            xmlhttp.open('GET',URL,true);
            xmlhttp.send();
        })(i);
    }
}

Answer 1

似乎在您的回调中您可以这样做：

var temp = document.createElement("div");
temp.innerHTML = xmlhttp.responseText;
var bodyContent = temp.getElementById("bodyContent");
if (bodyContent !== null && bodyContent !== undefined) {
    AJAXs[i].innerHTML = outerHTML(bodyContent);
}

鉴于 this SO post 的这个 outerHTML 函数：

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one
    return node.outerHTML || (
    function(n){
        var div = document.createElement('div'), h;
        div.appendChild( n.cloneNode(true) );
        h = div.innerHTML;
        div = null;
        return h;
    })(node);
}

请记住，如果您对多个 AJAXs 容器执行此操作，您最终可能会得到具有相同 ID (bodyContent) 的多个项目。确保你想出一些方法来避免这种情况。也许你想要 innerHTML 代替？

编辑：

我还忘了指出您的设置会出现的错误。由于循环完成后会到达您的回调，i 的值将始终为0，因此您不会更新正确的容器。您需要执行以下操作：

for (var i = AJAXs.length - 1; i >= 0; i--) {
    (function(index){
        var URL = AJAXs[index].getElementsByTagName('a')[0].href;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                AJAXs[index].innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open('GET',URL,true);
        xmlhttp.send();
    })(i);
}

Answer 2

iframe 是执行此操作的便捷方式。以下是高级步骤：

1. 创建隐藏的 iframe
2. 加载远程网址
3. onload 访问 iframe 内容
4. 获取您的特定元素

iframe 将特别有用如果您的远程页面包含修改页面内容的 JavaScript（简单的 ajax 请求不会运行脚本）。

这绝对是一个像 jQuery 这样的库真正有用的情况，因为它会让一切对你透明。