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

Question

你如何使用AJAX（在純JavaScript中， 不是 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);
}

鑒於此SO帖子中的 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容器執行此AJAXs ，則最終可能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. 加載遠程URL
3. onload訪問iframe內容
4. 得到你的具體元素

如果您的遠程頁面包含修改頁面內容的JavaScript （一個簡單的ajax請求不會運行腳本）， 那么 iframe將特別有用。

這絕對是像jQuery這樣的庫真的有幫助的情況，因為它會讓一切對你透明。