12 - Método abort del objeto XMLHttpRequest


El objeto XMLHttpRequest tiene un método llamado abort que tiene por objetivo detener la conexión establecida.

Hay situaciones donde el servidor se encuentra saturado y no puede devolver una petición. En estas situaciones es bueno mostrar un mensaje al usuario del sitio que indique el problema, además mediante este método (abort) cancelamos la petición.

Confeccionaremos el primer problema planteado en este tutorial:

Confeccionar un problema que muestre una lista de hipervínculos con los distintos signos del horóscopo y luego al ser presionado no recargue la página completa sino que se envíe una petición al servidor y el mismo retorne la información de dicho signo, luego se actualice solo el contenido de un div del archivo HTML.

Le agregaremos que si en tres segundos el estado de petición no ha finalizado mostraremos un mensaje al usuario indicando que el servidor se encuentra saturado.

Para simular el efecto de saturación del servidor utilizaremos en el programa PHP la llamada a la función sleep que tiene por objetivo detener una determinada cantidad de segundos la ejecución del programa PHP.

Nuestra página HTML es (pagina1.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></script>
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
  <h1>Signos del horóscopo.</h1>
  <div id="menu">
    <p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p>
    <p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p>
    <p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p>
    <p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p>
    <p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p>
    <p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p>
    <p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p>
    <p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p>
    <p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>
    <p><a id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p>
    <p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p>
    <p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>
  </div>
  <div id="detalles">Seleccione su signo.</div>
</body>
</html>

El archivo estilos.css:

#menu {
  font-family: Arial;
  margin:5px;
}

#menu p {
  margin:0px;
  padding:0px;
}

#menu a {
  display: block;
  padding: 3px;
  width: 160px;
  background-color: #f7f8e8;
  border-bottom: 1px solid #eee;
  text-align:center;
}

#menu a:link, #menu a:visited {
  color: #f00;
  text-decoration: none;
}

#menu a:hover {
  background-color: #369;
  color: #fff;
}

#detalles {
  background-color:#ffc;
  text-align:left;
  font-family:verdana;
  border-width:0;
  padding:5px;
  border: 1px dotted #fa0;
  margin:5px;
}

El archivo funciones.js

addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  for(f=1;f<=12;f++)
  {
    var ob=document.getElementById('enlace'+f);
    addEventListener('click',presionEnlace,false);
  }
}

function presionEnlace(e)
{
  e.preventDefault();
  var url=e.target.getAttribute('href');
  cargarHoroscopo(url);     
}


var conexion1;
var tiempo;
function cargarHoroscopo(url) 
{
  if(url=='')
  {
    return;
  }
  conexion1=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open("GET", url, true);
  conexion1.send();
  tiempo=setTimeout("finDeEspera()",3000);
}

function procesarEventos()
{
  var detalles = document.getElementById("detalles");
  if(conexion1.readyState == 4)
  {
    clearTimeout(tiempo);
    detalles.innerHTML = conexion1.responseText;
  } 
  else 
    if(conexion1.readyState == 1)
    {
      detalles.innerHTML = 'Cargando...';
    }
}

function finDeEspera()
{
  conexion1.abort();
  detalles.innerHTML = 'Intente nuevamente más tarde, el servidor esta sobrecargado.';
}

En este archivo tenemos que cuando comenzamos la conexión con el servidor inicializamos un temporizador para que si pasan más de 3 segundos sin responder el servidor proceda a abortar esa conexión e informe al visitante.

  tiempo=setTimeout("finDeEspera()",3000);

La variable tiempo guarda una referencia al temporizador, con el objetivo de poderlo detener si la respuesta demora menos de 3 segundos.

  if(conexion1.readyState == 4)
  {
    clearTimeout(tiempo);
    detalles.innerHTML = conexion1.responseText;
  } 

Aca podemos ver que si la petición finaliza procedemos a deshabilitar el temporizador llamando a la función clearTimeout.

function finDeEspera()
{
  conexion1.abort();
  detalles.innerHTML = 'Intente nuevamente más tarde, el servidor esta sobrecargado.';
}

La función finDeEspera se ejecutará si pasan 3 segundos sin finalizar el envio de datos del servidor. Aca es donde procedemos a llamar al método abort del objeto XMLHttpRequest. Mostramos además un mensaje al usuario del sitio.

Por último nuestra archivo pagina1.php:

<?php 
sleep(4);
header('Content-Type: text/html; charset=utf-8');
if ($_REQUEST['cod']==1)
  echo "<strong>Aries:</strong> Hoy los cambios serán físicos, personales, de carácter, Te sentirás 
impulsivo y tomarás  iniciativas. Período en donde considerarás unirte a agrupaciones de 
beneficencia, o de ayuda a los demás.";
if ($_REQUEST['cod']==2)
  echo "<strong>Tauro:</strong> Hoy los cambios serán privados, íntimos. Recuerdos. Ayuda, 
solidaridad. Asuntos en lugares de retiro. Tu cónyuge puede aportar buen status a tu vida o apoyo a 
tu profesión.";
if ($_REQUEST['cod']==3)
  echo "<strong>Géminis:</strong> Los asuntos de hoy tienen que ver con las amistades, reuniones, 
actividades con ellos. Día esperanzado, ilusiones. Mucha energía sexual y fuerza emocional. Deseos 
difíciles de controlar.";
if ($_REQUEST['cod']==4)
  echo "<strong>Cancer:</strong> Este día la profesión y las relaciones con superiores y con tu 
madre serán de importancia. Actividad en relación a estos temas. Momentos positivos con compañeros 
de trabajo. Actividad laboral agradable.";
if ($_REQUEST['cod']==5)
  echo "<strong>Leo:</strong> Este día los estudios, los viajes, el extranjero y la espiritualidad 
serán lo importante. Pensamientos, religión y filosofía también. Vivencias kármicas de la época te 
vuelven responsable tomando decisiones.";
if ($_REQUEST['cod']==6)
  echo "<strong>Virgo:</strong> Para este día toma importancia tu vida sexual, tal vez miedos, temas 
legales, juicios o herencias. Experiencias extrañas. Hay karma de prueba durante este período en tu 
parte psicológica, generándose algunos replanteos.";
if ($_REQUEST['cod']==7)
  echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con tu pareja, también con socios, con 
la gente o el público. Ellos serán lo más importante del día. Ganancias a través de especulaciones o 
del juego. Actividades vocacionales artísticas.";
if ($_REQUEST['cod']==8)
  echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver con temas de trabajo y de salud. 
Presta atención a ambos. Experiencias diversas con compañeros. Durante este período tendrás muchos 
recursos para ganar dinero.";
if ($_REQUEST['cod']==9)
  echo "<strong>Sagitario:</strong> Durante este día se vivirán cambios en relación a los noviazgos 
o a los hijos. Creatividad, actividad, diversiones y salidas. Período de encuentros con personas o 
situaciones que te impresionan.";
if ($_REQUEST['cod']==10)
  echo "<strong>Capricornio:</strong> Los cambios del día tienen que ver con tu hogar, con la 
convivencia y con el padre. Asuntos relativos al carácter en la convivencia. El karma de 
responsabilidad de estos momentos te acercará al mundo de lo desconocido, mucha madurez y contacto 
con el más allá.";
if ($_REQUEST['cod']==11)
  echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver con el entorno inmediato, hermanos y 
vecinos, con la comunicación, los viajes cortos o traslados frecuentes. El hablar y trasladarse será 
importante hoy. Mentalidad e ideas activas.";
if ($_REQUEST['cod']==12)
  echo "<strong>Piscis:</strong> Durante este día se vivirán cambios en la economía, movimientos en 
los ingresos, negocios, valores. Momentos de gran fuerza y decisión profesionales, buscarás el 
liderazgo.";
?>

Hay que tener en cuenta que para poder simular el efecto de saturación del servidor hemos llamado a la función sleep(4) para que detenga la ejecución del programa durante 4 segundos, tiempo suficiente para que el programa JavaScript del navegador aborte la conexión e informe de la situación al usuario.

Pruebe luego de quitar la función sleep y compruebe el funcionamiento correcto del sitio.



Problema resuelto.


Confeccionar un problema que muestre una lista de hipervínculos con los distintos signos del horóscopo y luego al ser presionado no recargue la página completa sino que se envíe una petición al servidor y el mismo retorne la información de dicho signo, luego se actualice solo el contenido de un div del archivo HTML.

Si en tres segundos el estado de petición no ha finalizado mostraremos un mensaje al usuario indicando que el servidor se encuentra saturado.

Para simular el efecto de saturación del servidor utilizaremos en el programa PHP la llamada a la función sleep que tiene por objetivo detener una determinada cantidad de segundos la ejecución del programa PHP.

Pruebe luego quitar la llamada a la función sleep.


pagina1.html



Ejecutar ejemplo



estilos.css




funciones.js




pagina1.php


Retornar