Cargando

Ir a contenido


 


HTML5 – Manejando Errores con Ajax

En este tutorial vamos a ver como manejar los errores cuando trabajamos con Ajax y como manejarlos para que nuestro site no pierda ni usabilidad ni funcionalidad.


Escrito por el dic 04 2013 13:55 Errores con Ajax html5


Cuando decidimos que vamos a tomar el camino de trabajar con Ajax en HTML5, debemos estar conscientes que hay que manejar los posibles errores que se producen, en concreto tenemos dos tipos de errores que se diferencian en su perspectiva.

El primer tipo de error viene dado desde el punto de vista del objeto XMLHttpRequest y es alguna situación que impida que la petición o request sea hecha, como por ejemplo que el nombre de host no resuelva en el DNS, una conexión rechazada o una URL no válida por ejemplo.

El segundo tipo de error, viene dado desde el punto de vista de nuestra aplicación, pero no tiene que ver con el objeto XMLHttpRequest, es decir, se hizo una petición, esta se aceptó, procesó y generó una respuesta, sin embargo la respuesta no fue el contenido esperado, como por ejemplo si la URL que especificamos no existe.


Manejando errores de SetUp

Veamos que el primer tipo de error que debemos manejar es cuando pasamos data errónea al objeto XMLHttpRequest, algo como una URL mal formada, a pesar que suene descabellado esto es un error bastante común cuando trabajamos con Ajax.

Por ejemplo veamos el siguiente llamado el cual puede llevarnos a este error:

httpRequest.open("GET", "http://");

Para que ocurra un problema de este tipo usualmente se da porque se le pide al usuario que introduzca algún valor o dato con el cual vamos a generar la URL y como sabemos el usuario es el primer punto débil de un programa y para que esto no nos afecte tenemos que desarrollar formas de validar y manejar cualquier tipo de contenido que nos envíe.

Para manejar esto utilizamos un bloque try/catch que nos permite ejecutar el código y si existe algún problema, capturamos el error o excepción y podremos darle un manejo adecuado, en este caso de ejemplo lo que hacemos es mostrar el error, como podemos ver en el siguiente código, el cual resumimos y solo mostramos las partes que interesan a este punto en particular:

try {
...				
httpRequest.open("GET", "http://");
...
httpRequest.send();
} catch (error) {
displayErrorMsg("try/catch", error.message);
}

Dentro del bloque catch tenemos la oportunidad de salvar el error, para ello podemos pedir que se ingrese de nuevo el dato, enviar a una página donde se indique el error, etc. Lo importante es que la página no falle y muera el proceso inesperadamente para el usuario.

Manejando errores de Request

Este error se genera cuando hacemos la petición pero algo va mal con ella, como por ejemplo que la URL solicitada no resuelva en el DNS; veamos la siguiente llamada:

httpRequest.open("GET", "http://a.nodomain/doc.html");

En este caso la URL no puede ser resuelta por el DNS, además que como tiene un origen diferente al del documento pudiera afectarnos también, para poder gestionar este tipo de errores, utilizamos una función que nos ayude a manejarlos, como la que vemos en este ejemplo:

function handleError(e) {
displayErrorMsg("Error event", httpRequest.status + httpRequest.statusText);
}

El único punto que debemos tener en cuenta es que los navegadores no manejan la información del objeto httpRequest de la misma forma, por lo que la respuesta puede no ser la misma.

Con esto terminamos el tutorial y ya tenemos un mejor concepto de cómo manejar y gestionar los errores que puedan ocurrir en una petición Ajax y que puedan hacer que nuestra página fallé.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado dic 04 2013 13:55
  •   Actualizado dic 11 2013 09:42
  •   Visitas 960
  •   Nivel
    Profesional



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse