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: 284
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