Siguiendo con la lista de problemas que dan en este tipo de aplicaciones asíncronas AJAX, nos toca analizar los posibles errores de comunicaciones que se pueden producir.

No podemos asumir que la llamadas que hagamos al servidor van a funcionar siempre. Puede haber un error en el código del servidor, puede haber cambiado la URL y no aparecer la página que llamamos, haber errores de permisos, etc... Lo que pase en el servidor está fuera de nuestro control. Ante eso hay que estar preparado. La forma de controlar estas situaciones es, como en cualquier componente de comunicaciones por HTTP, a través del código de estado que devuelva el servidor. La propiedad 'status' del objeto XmlHttpRequest nos proporciona esta información.

De hecho ya hemos tenido en cuenta este asunto en los ejemplos anteriores que habíamos desarrollado:

function finCarga()
{
   if (http.readyState == 4) //4: completado
   {
      if (http.status == 200) //200: OK
      {
         res = http.responseXML;
         Procesarespuesta();
      }
      else //Se produjo un error
      {
         alert("No se pudo recuperar la información: " + http.statusText);
      }
   }
}

Como se ilustra en este código, en general, todo lo que no sea un estado devuelto de 200 lo debemos considerar un error.

Llamadas que no vuelven

Lo anterior no deja de ser bastante obvio y además fácil de solucionar (sólo es comprobar un valor). hay, sin emabrgo, una situación menos frecuente pero más peligrosa que se puede producir: que la llamada asíncrona al servidor no vuelva o no lo haga en un tiempo razonable. ¿Qué hacemos en ese caso?

No podemos contar con la notificación de final de carga puesto que, al no regresar la llamada, no saltará.

Lo que se hace en estos casos es establecer un temporizador con el tiempo máximo que deseemos esperar, para que al cabo de ese intervalo la petición sea anulada directamente, sin esperar más que llegue la respuesta:

http = getHttpRequest()
http.onreadystatechange = finCarga;
http.open("GET", "http://www.miserv.com/misdatos.aspx", true)
var tmrAnular = setTimeout("AnularPeticion()", 20000); //20 segundos
http.send(null);

function AnularPeticion()
{
   http.abort();
}

function finCarga()
{
   if (http.readyState == 4) //4: completado
   {
      clearTimeOut(tmrAnular);
      if (http.status == 200) //200: OK
      {
         res = http.responseXML;
         Procesarespuesta();
      }
      else //Se produjo un error
      {
         alert("No se pudo recuperar la información: " + http.statusText);
      }
   }
}

He marcado en rojo las líneas nuevas. Lo único que se hace es crear un temporizador (en este caso de 20 segundos pero deberás ajustarlo a tus preferencias), que se encarga de anular la petición al pasar un tiempo determinado. En el evento de fin de carga se elimina el temporizador (ya no hace falta: ha vuelto ya la petición).

💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor

Escrito por un humano, no por una IA