Using AJAX to get a specific DOM Element (using Javascript, not jQuery)

Posted by Matt Frost on Stack Overflow See other posts from Stack Overflow or by Matt Frost
Published on 2012-11-19T16:54:56Z Indexed on 2012/11/20 5:00 UTC
Read the original article Hit count: 274

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").

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.

Here's the HTML code:

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

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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about AJAX