Hola,
Vamos a empezar con el archivo index.html que contiene las 3 capas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/ajax.js"></script>
<style type="text/css">
#contenedor{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
width:530px;
margin:auto;
}
#cabecera{
width:528px;
border:#CCCCCC 1px solid;
margin:0 0 5px 0;
}
#principal{
width:528px;
border:#0000FF 1px solid;
height:150px;
margin:0 0 5px 0;
}
#foot{
width:530px;
border-top:#999999 1px solid;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">Este es el contenido de la cabecera de tu pagina donde incluyo los enlaces que cargarán el contenido en capa "principal"<br/>
<ul>
<li><a href="#" onClick="cargarContenido('contenido1.html','princi pal')">Cargar contenido1</a></li>
<li><a href="#" onClick="cargarContenido('contenido2.html','princi pal')">Cargar contenido2</a></li>
<li><a href="#" onClick="cargarContenido('contenido3.html','princi pal')">Cargar contenido3</a></li>
</ul>
</div>
<div id="principal">En esta div aparece el contenido que cambiará sin recargar toda la pagina</div>
<div id="foot">Este es el pie de tu página</div>
</div>
</body>
</html>
Segundo, debes tener en una carpeta llamada js el archivo ajax qye se encargará de cargar el contenido en la capa principal sin recargar la pagina
Archivo ajax.js
// Creación del objeto XMLHttpRequest.
function nuevoAjax(){
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
// Función para cargar los contenidos de forma asíncrona.
// + pagina: fichero cuyo contenido queremos cargar.
// + identidicador del elemento en el que se cargará el nuevo contenido.
function cargarContenido(pagina,destino){
var contenedor;
var ajax;
contenedor = document.getElementById(destino);
ajax = nuevoAjax();
ajax.open("GET", pagina, true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText;
}
}
ajax.send(null);
}
la funcion cargarContenido tiene como parémetros: 'pagina' que es el contenido que va a cargar en la capa 'principal' y el parámetro 'destino' que es el nombre de la capa a donde voy a cargar el contenido (contenido1.html, contenido2.html y contenido3.html).
Guardas en un archivo llamado contenido1.html el siguiente código:
<div style="color:#0066FF">Este es el contenido de la pagina contenido1 que debe aparecer en la parte central de la pagina sin recargar toda la página</div>
Guardas en un archivo llamado contenido2.html el siguiente código:
<div style="color:#CC3366">Este es el contenido de la pagina contenido2 que se carga en la capa "principal" sin recargar toda la página</div>
Guardas en un archivo llamado contenido3.html el siguiente código:
<div style="color:#FFFFFF; background-color:#CCCCCC">Este es el contenido de la pagina contenido3 que se carga en la capa "principal" sin recargar toda la página</div>
El ejemplo es sencillo pero espero te sirva.
Saludos,
Luis