Using AJAX to get a specific DOM Element (using Javascript, not jQuery)
- by Matt Frost
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();
}
}
