Carga de página con AJAX

Cuando necesitemos cargar una página o contenido en nuestra página actual podemos usar ajax para cargar lo que deseemos páginas. De esta forma conseguimos mejorar el uso del ancho de banda y que las transiciones entre las páginas parezcan más suaves. Finalmente, la información del iframe o los elementos activos de la página no serán modificados ni alterados y tampoco será necesario recordarlos mientras el usuario navega por la web.

Hay gran varidedad de formas de hacerlo, desde las más simples a las más complejas con mucha funcionalidad, de momento implementaremos un ejemplo básico. El código es el siguiente:

<script>
function LoadPage(page,usediv) 
{
         // inicializar la variable request, dependiendo del tipo de explorador
         try
         {
           xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject(«Microsoft.XMLHTTP»);
         }
         catch (e)
         {
           alert(«Error: no se pudo cargar la pagina.»);
         }
        //Mostrar que la página se está cargando      
        document.getElementById(usediv).innerHTML = ‘Cargando…’;
       //scroll hacia arriba
       scroll(0,0);
       /*esta es la parte mas importante, cuando se hace la petición onreadystatchange cambiará    dependiendo de estado de la página. Cada vez que pasa, se llama a la función y comprueba que se haya cargado sin errores, si esto es verdad se almacena la página en xmlhttp.responseText, y se pinta en el div*/
       xmlhttp.onreadystatechange = function()
       {               
           //Comprobar que la página se ha terminado de cargar sin problemas.
           if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
           {                   
              //escribir información enviada a la página     
              document.getElementById(usediv).innerHTML = xmlhttp.responseText;
           }     
       }

       //manda el request a la página
       xmlhttp.open(«GET», page);      
       //aunque no hace faltamandar nada algunos navegadores esperan que les llegue algo
       xmlhttp.send(null);
       return false;
}
</script>

La función recibe dos parámetros, en page escribiremos la tura relativa a la página y en userdiv el id del div en el que se va a cargar la página.

Para llamar a esta función podemos usar dos fórmulas:

<a href=»mypage.htm» onclick=»return LoadPage(‘página’,’id_div’);«>
o
<a href=»javascript: LoadPage(‘`página’,’id_div’);«>