<html>
<head>
<script language="JavaScript">
function Ajax(){
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
}
function navegar(url,destino){
contenedor=document.getElementById(destino);
ajax=Ajax();
ajax.open("GET",url,true);
ajax.onreadystatechange=function(){
if(ajax.readyState==1){
contenedor.className="preloader";
} else if(ajax.readyState==4){
if(ajax.status==200){
contenedor.className='';
contenedor.innerHTML=ajax.responseText;
} else if(ajax.status==404){
navegar("404.php",destino);
} else {
contenedor.className='';
contenedor.innerHTML="Error: ".ajax.status;
}
}
}
ajax.send(null);
}
</script>
<style>
.preloader{
background-image:url('loading.gif');
background-repeat:no-repeat;
background-position:center center;
}
</style>
<title>Ejemplo Ajax</title>
</head>
<body>
<div>
<a href="#" onclick="navegar('1.php','contenido')">Pagina 1</a> |
<a href="#" onclick="navegar('2.php','contenido')">Pagina 2</a> |
<a href="#" onclick="navegar('3.php','contenido')">Pagina 3</a> |
<a href="#" onclick="navegar('4.php','contenido')">Pagina 4</a>
</div>
<div id="contenido" style="border:1px solid #000; width:400px; height:300px; overflow:scroll;"></div>
</body>
</html>