Load external url by Ajax
This is a very easy to use JavaScript function, it will allow you to load any external url into any location on your page without reloading the complete web page. This saves bandwidth, processing power, time, interface can become more friendly, etc.
At the end of the page you get the complete download with samples included but basically this is how it works:
You include our JavaScript function in your html page by placing this line of code (recommended location is between the <head>...</head>):
<script type="text/javascript" src="tnt_ajax.js"></script>
Now you can create a <div> or a <p> tag with an ID in it, e.g:
<div id="my_dynamic_div"></div>
You can now load content from any external html page, php, page, txt file, etc into this div by calling our function, for example when clicking a button:
<a href="JavaScript:load_xml_doc('page1.html', 'my_dynamic_div', 'loading...')">Page 1</a>
The above link will load the content from external file page1.html and place the content inside my_dynamic_div, and show "loading..." while content loads. It should be simple.
Make sure you test this on your site rather than on your local computer, because locally the browsers might have some security limitations and block loading files.
Note: the "external url" means an additional page or file next to your web page, and not an URL from a different site, browsers have security limitations that bock you from loading content from a different site than the one containing the script. There are ways arounf that but the functions become more complicated.
See the online demo | Download the files