jQuery / Ajax – Manejando errores

Bienvenidos sean a este post, hoy veremos como manipular errores.

Habitualmente trabajar en entornos locales, como vimos en posts anteriores, donde mas alla de usar un servidor y hacer consultas sabemos que no fallaran o es casi nula la posibilidad, y en la vida real sobre internet los errores de conexion pueden suceder en cualquier momento o inclusive errores de tipeo que pueden desencadenar en otros, a su vez las funciones get y load no poseen ningun control de error por lo tanto debemos buscarlo por otra parte.

En este post mencionamos dos funciones para poder saber cuando empieza y termina un evento Ajax, pero entre estas funciones tambien disponemos de una para manejar errores como es ajaxError, pero tambien podemos encadenar a los eventos Ajax algunas funciones como estas:

• done
• always
• fail

Sobre estos metodos hablaremos mas profundamente mas adelante en otros posts, pero si tomamos a fail podremos usarla practicamente en cualquier funcion salvo load, pero eso no quita que podemos usarlo con el codigo visto en el post anterior, para poder aplicarlo correctamente necesitamos tener un servidor web, en caso de no tenerlo les recomiendo este post:

En este les comento como crear una pc virtual y como instalar un linux debian en este, despues les recomiendo este post:

Aqui les comento como instalar un Apache y PHP para un servidor debian, de forma opcional tambien puede instalar un mariadb pero no es obligatorio, esto se los comento asi porque por solamente 1 GB de RAM pueden tenerlo disponible sin necesidad de dañar su propio equipo, con esto comentado sino tienen el codigo anterior les dejo un link para descargarlo:

Extraigan los archivos en el servidor y con esto podemos comenzar a trabajar con este proyecto, nuestro primer paso sera ir al archivo codigo.js donde tomaremos el siguiente bloque de codigo:

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

Lo modificaremos de la siguiente manera:

$(document).ready(function() {
	$('#primigenios a').click(function(e) {
		e.preventDefault();
		var solicitud = {buscar: $(this).text()};
		$.get('z.php',solicitud, function(datos){
			$('#diccionario').html(datos);
		}).fail(function(fallo) {
			$('#diccionario')
			.html('Ocurrio un error: ' + fallo.status)
			.append(fallo.responseText);
		});
	});
});

En este caso lo modificamos para que en lugar de cargar use un get para cargar un archivo inexistente, le pasamos los datos a buscar y la funcion para ingresar el resultado devuelto a una capa llamada diccionario, esta se encuentra en el archivo indice.html, despues le adjuntamos el metodo fail la cual almacenara el resultado en fallo, tomamos a diccionario nuevamente, y en este ahora escribiremos primero el tipo de error ocurrido y le agregaremos el texto corresponndiente al fallo encontrado, esto en caso de que suceda y en nuestro caso si pasara, si lo prueban sucedera lo que se ve en el siguiente video

Como pueden ver ahora tenemos manejo de errores,, en este caso en particular el mitico y famoso 404 de archivo no encontrado pero disponemos de otros tambien:

Codigo	Descripcion
400	Bad Request
401	Unauthorized
403	Forbidden
404	Not Found
500	Internal Server Error

Hay algunos mas pero podemos decir que estos son los mas habituales y genericos, ,especialmente el ultimo que es como un General Failure 😂, antes de finalizar les dejo un link con todos los archivos necesarios y codigos finales en este post:

En resumen, hoy hemos visto como manipular errores de una forma sencilla, hemos mencionado los globales pero despues hemos utilizado uno mas especifico que podemos emplear en nuestro codigo y solo a una parte de este, 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.