使用AJAX获取特定的DOM元素(使用Javascript，而不是jQuery) [英] Using AJAX to get a specific DOM Element (using Javascript, not jQuery)

问题描述

如何使用AJAX(在普通JavaScript中为 NOT jQuery)获取页面(相同域)并仅显示特定的DOM元素?(例如标记为"bodyContent"的DOM元素.)

How do you use AJAX (in plain JavaScript, NOT jQuery) to get a page (same domain) and display just a specific DOM Element? (Such as the DOM element marked with the id of "bodyContent").

我正在使用MediaWiki 1.18，因此我的方法必须少一些常规性(我知道可以为MediaWiki启用jQuery版本，但是我无权执行此操作，因此我需要查看一下其他选项).如果代码凌乱，我深表歉意，但是有一个原因需要我用这种方式来构建它.我最感兴趣的是看看Java语言可以做什么.

I'm working with MediaWiki 1.18, so my methods have to be a little less conventional (I know that a version of jQuery can be enabled for MediaWiki, but I don't have access to do that so I need to look at other options). I apologize if the code is messy, but there's a reason I need to build it this way. I'm mostly interested in seeing what can be done with the Javascript.

这是HTML代码:

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

这是我到目前为止使用的Javascript:

Here's the Javascript I have so far:

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.

Thanks to the answer lbstr gave, I was able to come up with the following, which works! You'll note that I added in extra steps to remove any elements that I didn't want. For whatever reason, getElementById() didn't work on the responseText, but getElementsByClassName() did. I imagine it's because the ID of "bodyContent" already exists on the wiki page prior to the AJAX call being run.

//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);
    }
}

推荐答案

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

it seems like in your callback you could just do this:

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帖子中获得外部HTML函数:

Given this outerHTML function from this SO post:

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?

Keep in mind that if you are doing this to multiple AJAXs containers, you could end up with multiple items wiht the same ID (bodyContent). Make sure you come up with some way to avoid that. Maybe you want innerHTML instead?

我也忘记指出安装过程中会出现的错误.由于循环完成后将在 到达您的回调，因此 i 的值将始终为 0 ，因此您将不会更新正确的容器.您需要执行以下操作:

I also forgot to point out a bug that will arise with your setup. Since your callback will be reached after the loop is done, the value of i will always be 0, so you won't update the correct container. You'll need to do something like this:

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);
}

这篇关于使用AJAX获取特定的DOM元素(使用Javascript，而不是jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！