h1

Carga de página con AJAX II

2 diciembre 2008

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.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: