Question

如何使用AJAX（在纯JavaScript中， NOT jQuery）获取页面（相同的域）并仅显示特定的DOM元素？（例如标有id＆＃34的DOM元素; bodyContent＆＃34;）。

我正在使用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（）却没有。我想它是因为＆＃34; bodyContent＆＃34;已经存在于运行AJAX调用之前的Wiki页面上。

//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是一种方便的方法。以下是高级步骤：

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

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

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

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

2 个答案: