I'm assuming you're looking to only reload a specific section of the page and not the entire page right? If so, this is how you can go about it:
STEP 1: Create a blank / empty container for the reloadable section in question. Your index.html file should look something like this:
<div id="wrapper">
<!--menu-->
<a class="section-1">Section 1 </a>
<a class="section-2">Section 2 </a>
<a class="section-3">Section 3</a>
<!--menu-->
<!--reloadable-section-->
<div id="reload">
</div>
<!--reloadable-section-->
</div>
STEP 2: Create the necessary reloadable sections in separate HTML file(s) and save them where you deem fit. For the purpose of this example, they will be saved in the same directory as the index.html file. So your section-1.html, section-2.html and section-3.html files will contain all the necessary info / content. Note that if you are using Dreamweaver to create the HTML file, the HTML markup tags, BODY and HEAD tags will automatically be inserted for you - remove those tags as you do not need them in this instance. Instead, immediately create the divs needed to hold your content. Your file should look something like this:
<div id="section-1">
<h2>this is section-1</h2>
<p>this is the content for section 1</p>
</div>
STEP 3: Go back to your index.html file and include the following jQuery:
<script>
$(document).ready(function(){
$('.section-1').click(function(){
$('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
$('#reload').load('section-1.html');
});
$('.section-2').click(function(){
$('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
$('#reload').load('section-2.html');
});
$('.section-3').click(function(){
$('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
$('#reload').load('section-3.html');
});
});
</script>
So just by doing that, you'd be able to load in the right file into a specified container of your HTML file without reloading the entire HTML file. Do note that if you wish to have the section-1.html have the effect of fading in upon load, this is what you can do:
<script>
$('#section-1').fadeTo(500,1);
</script>
<div id="section-1">
<h2>this is section-1</h2>
<p>this is the content for section 1</p>
</div>
Yup, it's as simple as that - just add the mentioned jQuery like above and the content container in the loadable files will fade in on document ready. Of course, remember to set the specified div's opacity to 0 via CSS. EDIT: Note that for this instance you do not need "$(document).ready(function(){});" at all.
From personal experience, I would generally refrain from using iFrames unless it is absolutely necessary to do so. This is simply because there are quite a few stylistic complications with iFrames that can be quite a nightmare, especially if the parent div's height is to be inherited from the amount of child content residing within it.
PS: I'm not too sure if this method can be strictly labelled as AJAX loading, but I'm reserving it for those who know better to shed some light on that. Sorry, I'm just a self taught programmer so my knowledge is quite limited.
