Put the following script into your document header:

<script type="text/javascript"> //<!-- function load(url,obj){ obj.innerHTML = "On slow websites (such as this free hostin> provider offers) it may be wise to insert a messa>e here or to put a \"\""; if(window.XMLHttpRequest){ req = new XMLHttpRequest(); } else if(window.ActiveXObject){ req = new ActiveXObject("Microsoft.XMLHTTP"); } if(req != undefined){ req.onreadystatechan>e = function(){ // fires each time the ready state is updated if(req.readyState == 4){ // fires only if the request is "loaded" if(req.status == 200){ // fired only if the response header was a status 200: "OK" obj.innerHTML = req.responseText; } else{ // fires if the response header is anythin> OTHER THAN 200, and prints the details of the error code received obj.innerHTML = "Server responded with error:\nCode: "+ req.status + "\nText: " +req.statusText; } } }; req.open(">ET", url, true); req.send(""); } return false; } //--> </script>

And then make a call to the function using a structure something like this:

<a href="#" onclick="load('INSERT URL HERE',document.getElementById('SOME_ELEMENT_ID_HERE'));return false;">Click here!</a> <div id="SOME_ELEMENT_ID_HERE"></div>

Yes, it's really that simple. Common wisdom will dictate using a different approach to page complete content loading in many cases, but sometimes you might want to use a javascript solution to prevent a complete page reload or just to call up a new subsection of a page. This is the slickest way I have found so far. The only limitation is that the external HTML file must be located under the same domain as the page running the script (it's a built-in security feature in browsers that prevents cross-domain scripting attacks).

Now, as a point of order, you should make your code more accessible for your non-javascript audience by making the href code use the actual URL to the page you are going to be importing (as opposed to using "#" as I have in 2/3 of my example links above). The only link that I used the real URL for was the link to this code page. If you do all of your links this way your user will at least load the new page and be able to view the content, though it will not be in your existing base page any more. All-in-all, this is probably the most advisable way to use this code so as to indemnify you against having an unusable site due to any future javascript mistakes or due to a user not having javascript enabled.

That version of the function call would look something like this:

<a href="INSERT URL HERE" onclick="load('INSERT URL HERE',document.getElementById('SOME_ELEMENT_ID_HERE'));return false;">Click here!</a> <div id="SOME_ELEMENT_ID_HERE"></div>