Posts Tagged ‘Ajax’

h1

Carga de página con AJAX

2 diciembre 2008
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’);“>