jQuery / Ajax – Manejando los requests

Bienvenidos sean a este post, hoy hablaremos sobre un tema particular.

Cuando nos referimos a manejar los eventos no estamos hablando de lo que hicimos en posts anteriores sino son aquellos que nos permiten llevar los registros al momento de la ejecucion de los eventos relacionados a Ajax, tomemos por ejemplo esta dos funciones:

• ajaxStart, este se inicia junto al evento Ajax
• ajaxStop, este registra cuando finaliza el evento

Estos metodos solo se interesan cuando se inician y detienen los eventos Ajax sin importar lo que realiza en el momento de ejecucion, para eso tenemos otras funciones, y estos al igual que ready van adjunto al objeto document, para nuestro ejemplo que vinimos trabajando en estos ulttimos posts vamos a aplicarle estos metodos, pero para poder usarlo deben tener un servidor web, en caso de no tenerlo primero les recomiendo este post:

Aqui les comento como crear un pc virtual y como instalar un linux debian en este, una vez hecho esto pueden pasar a este post:

En este les comento como instalar Apache y PHP para debian, de forma opcional pueden instalar mariadb, pueden instalarlo en su pc pero siempre recomiendo hacerlo en una virtual porque solamente eliminandolo se ahorran muchos problemas y de esta forma solo necesita 1 GB de RAM, con todo esto instalado solo necesitan descargar el codigo del post anterior:

Extraigan todos los archivos en el servidor, una vez hecho esto podemos empezar con nuestro ejemplo, lo primero que haremos sera abrir el archivo estilo.css y agregaremos el siguiente segmento:

#cargando {
  display: none;
  position: fixed;
  left: 50%;
  top: 40%;
  width: 90px;
  padding: 20px;
  margin-left: -66px;
  border: 1px #000 solid;
  background-color: #eee;
}

Estte es un estilo que relacionaremos con un div identificado como cargando y aqui estableceremos algunos parametros basicos para darle un formato al cuadro que usaremos, con esto comentado ahora tenemos dos posibilidades: la primera es crear un div con este nombre en indice.html o bien hacerlo mediante codigo, para esta ocasion vamos a inclinarnos por la segunda por ser un poco mas practica, para ello iremos al archivo codigo.js y agregaremos el siguiente bloque de codigo:

$(document).ready(function() {
	var $cargando=$('<div id="cargando">Cargando...</div>')
		.insertBefore('#diccionario');
	$(document).ajaxStart(function() {
		$cargando.show();
	}).ajaxStop(function() {
		$cargando.hide();
	});
});

En este caso primero definiremos una variable/objeto que contendra el div basico que usaremos, observen que simplemente es la identificacion que le asignamos en estilo.css y un mensaje de carga, despues lo ubicamos por medio de insertBefore antes de diccionario, despues seleccionaremos nuevamente a la pagina y le aplicaremos el metodo ajaxStart, la cual usaremos para mostrar el div anterior, despues le pasamos a ajaxStop para esconder nuevamente el div anterior, es decir que al primer evento que iniciemos de tipo Ajax mostrara al div y una vez finalizado lo escondera, y esto sera monitoreado en toda la pagina, pero antes de probarlo vamos a hacer una modificacion mas pero que es solamente estetica, para ello tomaremos este bloque de codigo:

$(document).ready(function() {
	$('#primigenios a').click(function(e) {
		e.preventDefault();
		var solicitud = {buscar: $(this).text()};
		$('#diccionario').load('p.php',solicitud);
	});
});

Y lo modificaremos de la siguiente manera:

$(document).ready(function() {
	$('#primigenios a').click(function(e) {
		e.preventDefault();
		var solicitud = {buscar: $(this).text()};
		$('#diccionario').hide().load('p.php',solicitud, function(){
			$(this).fadeIn();
		});
	});
});

En este caso hicimos un cambio simple, agregamos antes de load un hide para esconder a diccionario y despues dentro de load agregamos una funcion que tomara a diccionario y lo hara aparecer suavemente con fadeIn, ahora con todo esto comentado vamos a ver como trabaja finalmente mediante el siguiente video

En el video pueden ver si prestan atencion como aparece y desaparace el cartel de carga y a su vez el efecto que agregamos, por otro lado tambien vemos que como comentamos anteriormente el cuadro de carga monitorea todos los eventos Ajax por lo tanto aparece en todas las opciones de la pagina, antes de finalizar les dejo un link con todos los archivos del proyecto y los codigos finales en este post:

En resumen, hoy hemos visto una forma interesante de como monitorear nuestros eventos Ajax con dos funciones que permiten hacerlo cuando lo iniciamos y cuando finaliza, por otro lado gracias a esto agregamos un cuadro de carga para indicar esto hasta mostrar la informacion, obviamente en nuestro caso es casi imperceptible pero en sistemas mas lentos se agradecera, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.