Carga de página con AJAX II

En el post anterior exscribí sobre mis «investigaciones» para cargar páginas con AJAX, ya que, necesitaba cargar una página sin tener que recargarla, además de ver como podía meterle algún efecto curioso. El problema con el ejemplo anterior es que innerHTML a veces falla, ya que no es estándar. Por ello me puse a investigar como hacerlo a través del DOM, pero es una tarea algo pesada y me acorde de la existencias de librerías, como la que voy a usar, jQuery. Usando esta librería nos quitamos de un motón de trabajo, como veremos a continuación con el escaso número de líneas.

Primero lo que debemos de hacer es descargarnos la librería e incluirla en nuestra página y escribir el siguiente código:

 function loadContent(page)
 {
     $(‘#email’).fadeIn(‘slow’).load(page);
 }

Y la función hay que llamarla de la siguiente forma:

<a href=»#» onClick=»javascript:loadContent(‘<cms:link>search-mail.jsp</cms:link>’)»>

Cómo se puede observar resulta mucho más sencillo que en el caso anterior y esta forma no da problemas con ninguno de los navegadores más comunes.

Ahora bien, si queremos pasar parámetros a la nueva url, se hace de la siguiente forma:

Para pasarlos mediante GET: $(«#myDiv»).load(«myScript.php?var=x&var2=y&var3=z»)

Para pasarlos mediate POST: $(«#myDiv»).load(«myScript.php», {var:x, var2:y, var3:z})

Si lo que queremos es recoger los valores de un formulario y mandarlos como parámetros a la nueva pagina a la que redireccionamos, tenemos que usar la libreria o plugin para jQuery, forms. Una vez que la tengamos sólo necesitamos ejecutar las siguientes líneas para obtener el valor de los campos:

 var form = jQuery(‘#prueba’);
 q = form.serialize();

Con lo cual la función para cargar la página con parámetros queda así: 

function loadContent(page)
 {
   var form = jQuery(‘#prueba’);
   q = form.serialize();
   window.location.hash = q;
   $(‘#email’).fadeIn(‘slow’).load(page+»?»+q);
 }

Espero que haya sido útil.

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’);«>