Load HTML File Contents to Div [without the use of iframes]

Question

I'm quite sure this a common question, but I'm pretty new to JS and am having some trouble with this.

I would like to load x.html into a div with id "y" without using iframes. I've tried a few things, searched around, but I can't find a decent solution to my issue.

I would prefer something in JavaScript if possible.

Thanks in advance, everyone!

Answer 1

Wow, from all the framework-promotional answers you'd think this was something JavaScript made incredibly difficult. It isn't really.

var xhr= new XMLHttpRequest(); xhr.open('GET', 'x.html', true); xhr.onreadystatechange= function() {     if (this.readyState!==4) return;     if (this.status!==200) return; // or whatever error handling you want     document.getElementById('y').innerHTML= this.responseText; }; xhr.send(); 

If you need IE<8 compatibility, do this first to bring those browsers up to speed:

if (!window.XMLHttpRequest && 'ActiveXObject' in window) {     window.XMLHttpRequest= function() {         return new ActiveXObject('MSXML2.XMLHttp');     }; } 

Note that loading content into the page with scripts will make that content invisible to clients without JavaScript available, such as search engines. Use with care, and consider server-side includes if all you want is to put data in a common shared file.