Realizar AJAX con jQuery

Hay como mínimo 5 formas de realizar llamadas AJAX con la librería de jQuery. Para principiantes, como de costumbre, las diferencias entre una y otra pueden ser un poco confusas. En este tutorial las vamos a organizar y hacer una comparación. Adicionalmente, vamos a ver cómo examinar estas llamadas AJAX con Firebug también.

AJAX Caché

Cuando GMail refresca el contenido sin redirección, una llamada AJAX es realizada detrás de escenas. El contenido llamado puede ser estático (devuelve exactamente lo mismo todo el tiempo, como una formulario de contacto o una imágen) o dinámico (pide a la misma URL obtener diferentes respuestas, como la bandeja de entrada de GMail donde los e-mails son mostrados en cualquier momento).

Para contenido estático, podemos esperar que el contenido sea cacheado. Pero para contenido dinámico, el cúal puede cambiar en unos segundos, cachear el AJAX se convierte en un problema. Hay que notar que Internet Explorer siempre cachea llamadas AJAX, mientras que otros navegadores se comportan  diferentemente. Entonces sería mejor decirle al navegador de manera explícita si AJAX debe o no ser cacheada. Con jQuery, podemos lograr esto simplemente tipeando:

	$.ajaxSetup ({
		cache: false
	});

1. load(): cargar HTML desde una URL remota e injectarlo en el DOM.

El uso más común de AJAX es cargar HTML desde una locación remota e injectarlo dentro del DOM. Con la función load() de jQuery, esta tarea es una pavada. Mirá esta demostración y revisaremos algunos usos uno por uno.

Configuración mínima

Click en el primer botón llamado "load()". Un poco de HTML es injectado en la página, exactamente de lo que estabamos hablando. Vamos a ver qué está pasando detrás de escenas.
Abajo está el código para el efecto:

	$.ajaxSetup ({
		cache: false
	});
	var ajax_load = "<img src='img/load.gif' alt='loading...' />";

//	load() functions
	var loadUrl = "ajax/load.php";
	$("#load_basic").click(function(){
		$("#result").html(ajax_load).load(loadUrl);
	});

1. $.ajaxSetup obliga al navegador a NO hacer caché de llamadas AJAX.
2. Después que el botón es clickeado, toma un poquito de tiempo antes que el nuevo HTML sea cargado. Durante el tiempo de carga, es mejor mostrar una animación para proporcionar al usuario cierta reacción que asegure que la página está cargando. La variable "ajax_load" contiene el HTML de la carga.
3. "ajax/load.php" es la URL desde la cúal el HTML es agarrado.
4. Cuando el botón es clickeado, hace una llamada AJAX a la URL, recibiendo la respuesta HTML, e injectándola en el DOM. La sintáxis es simplemente $("#DOM").load(url). Más sencillo, imposible.

Ahora exploremos más detalles de la petición con Firebug:

1. Abrí Firebug.
2. Cambiá la pestaña "Net" o "Red". Activala si está desactivada. Acá es donde todas las peticiones HTTP en el navegador son mostradas.
3. Cambia a la pestaña "XHR" debajo de "Net" o "Red". El término XHR es la petición generada de la llamada AJAX. Todas las peticiones son mostradas aquí.
4. Clickeá en el botón "load()" y deberás ver lo siguiente.

La petición es mostrada, ok? Clickeá en el simbolito "más" (+) a la izquierda de la llamada, más información es mostrada.

Clickeá en la pestaña "Params" o "Parámetros". Aquí están todos los parámetros pasados a través del método GET. ¿Ves la gran cantidad de números pasados debajo de una llave "_"? Así es como jQuery se asegura con la petición no sea cacheada. Cada petición tiene un diferente parámetro "_", entonces los navegadores consideran a cada uno como único.

Clickeá en la pestañan "Response" o "Respuesta". Acá esta el HTML que respondió de la URL remota.

Cargar parte del archivo remoto

Clickeá en el botón "load() #DOM". Notaremos que sólo una parte del link es cargado esta vez. Esto es hecho con el siguiente código:

	$("#load_dom").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl + " #picture");
	});

Con load(url + "#DOM"), sólo el contenido dentro de #DOM es injectado en la página.

Pasar parámetros a través del método GET

Clickeá en el botón "load() GET" y abrí Firebug.

	$("#load_get").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl, "language=php&version=5");
	});

Pasando una cadena como el segundo parámetro de load(), estos parámetros son pasados a la URL remota en el método GET. En Firebug, estos parametros son mostrados como pasos:

Pasar parámetros a través del método POST

Clickeá en el botón "load() POST" y abrí Firebug.

	$("#load_post").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl, {language: "php", version: 5});
	});

Si los parámetros son pasados como objetos (en lugar de cadenas), son pasados a la remota URL en el método POST.

Saludos!

La mejor manera de agradecer es comentando y pasando el chivo de la página!