David Ballester

Siguiendo con mi serie de pequeñas ayudas enfocadas principalmente a los programadores web novatos y al que necesite una ayuda puntual, hoy voy a mostrar como usar AJAX utilizando JQuery de forma sencilla.

No todo el mundo sabe lo que significa AJAX. En este caso AJAX no se refiere a un detergente ni a cierto equipo holandés de fútbol. AJAX significa Asynchronous JavaScript And XML(asíncrono JavaScript y XML, traducido literalmente). El nombre así dicho no dice mucho. AJAX se utiliza para hacer llamadas utilizando JavaScript a un script de servidor(php, asp, jsp) preparado para recibir una petición y que devolverá algo, que normalmente se mostrará en la pantalla. La respuesta del servidor es independiente al flujo de la página desde la que se le hace la petición. Por esto se utiliza la palabra “asíncrono”, el flujo de la página va por un lado y lo que devuelva el servidor no tiene porque estar sincronizado, aunque siempre se puede dejar el flujo a la espera de la respuesta que se obtenga del script llamado.

JQuery facilita la forma en que se hacen llamadas AJAX. Tiene funciones bastante interesantes. En este post voy a mostrar un ejemplo de la función .load(), la que creo más sencilla para AJAX y que da buenos resultados. Típico ejemplo de un formulario con un select que depende de lo que se seleccione en otro select:

El código JavaScript con JQuery:

	$(document).ready(function(){
		// Hago una carga de datos inicial
		$('#numeros').load('ajax.php');

		// Cuando se produzca un evento onchange
		// en el select de decenas se cargan los
		// números de la decena seleccionada
		$('#decenas').change(function(){
				// Vacío el select
				$('#numeros select').empty();

				// y pongo como única opción
				// un indicador de espera
				$('#numeros select').append('Cargando...');

				// Llamo al script con el parámetro necesario
				$('#numeros').load('ajax.php?decena='+$(this).val());
			});
		});

La función .load() carga dentro del elemento con id “numeros” lo que le devuelva el script. Cuando se cambia la decena actual en el select de las decenas se ejecuta la función asociada al evento onchange, que primero vacía el select de los números y crea una opción “Cargando…” para indicar la carga. Es necesario indicar que se están cargando datos porque la carga no siempre es instantanea y es fácil que el usuario decida seleccionar una opción del select que se está cargando, no siendo válida la selección y creando dudas al usuario. Después se ejecuta la llamada al script que devuelve el código HTML del select completo. La función .load() sobreescribe el contenido anterior del elemento donde se utilice.

Este ejemplo lo hice con números pero tiene aplicaciones muy utilizadas como el típico select con provincias y ciudades de las provincias.