3

您如何使用 AJAX（纯 JavaScript，而不是jQuery）来获取页面（相同域）并仅显示特定的 DOM 元素？（如标识为“bodyContent”的 id 的 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);
    }
}
4

2 回答 2

4

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

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

鉴于此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);
}
于 2012-11-19T17:12:28.367 回答
0

iframe 是一种方便的方法。以下是高级步骤：

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

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

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

于 2012-11-20T04:54:21.663 回答