• Ir al contenido
  • Ir a la navegación
  • Ir al buscador
 
Infoudo
ING English
Directorio WAP para móvil, Tablet, iPhone o Smartphone

Centro de Noticias de la Universidad de Oriente

Categorías

 

Inicio  |  Contacto  |  Posts  |  TIENDA PUBLISHOP  |  Sobre nosotros  |  Registro y Planes  |  Pagos  |  Donaciones

Ver Código QR de esta página

Campaña #AyudemosaYuli  |  Campaña #AyudemosaStephany.  |  ¿Interesado(a) en cursos y resolución de ejercicios de materias prácticas? Para más información, contáctenos por: Teléfono: +58 (412) - 8226575. WhatsApp y Telegram: +58 (426) - 6836955 o escriba al correo: [email protected]. Únete al grupo: SISTEMAS (UDOMO).

[»] **Musica para tu celular

WEB TRANSLATOR

LINK for English Language

Use this link for translate into English


+ Buscar en InfoUDO

 

Método abort del objeto XMLHttpRequest

Tweet
 

domingo julio 10, 2016

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

— @INFOUDO.OFICIAL

— Síguenos en Facebook@INFOUDO.OFICIAL

Categorías: #Ajax, #


[0] Atrás | Directorio
« Inicio
Apps Infoudo
Apps Infoudo ¡Descarga el icono directo en el menú de tu equipo!
[»] Las mejores Apps para tu celular
[»] Imágenes Gratis


Comenta o lee lo que otros opinan

COMPÁRTELO:

Indica que te gusta y comparte

Me Gusta :)Facebook Tuiteame :)Twitter .WhatsApp .Telegram . LinkedIn

También te puede interesar:

Validación de la existencia de un nombre de usuario en forma asincrónica (AJAX)
Pizarra interactiva multiusuario
De JSON a PHP (utilizando la función json_decode)
De JSON a JavaScript (utilizando utilizando la función parse)
De JavaScript a JSON (utilizando la función stringify del objeto JSON)
De PHP a JSON (utilizando la función json_encode)
Recuperar datos del servidor en formato JSON
Qué es JSON?
Encuenta con AJAX
Autocompletar un control de tipo text


« Propiedades status y statusText.  |  Mostrar un gif animado mientras se envían y reciben los datos del servidor. »
 
Apps Infoudo
 
Buscador:
Powered by Google:


Web móvil
Imágenes
La Web

 

Síguenos por RSS


Puedes leerlos mediante el navegador Firefox, lectores de noticias en la computadora o el móvil o usando el servicio de Feedburner de Google para recibir las notificaciones por correo electrónico.
RSS - Suscribirse usando Feedburner de Google

email Recibir las nuevas publicaciones de Infoudo por email

Atom


»Ir a URL
.....
Registra Gratis Tu Negocio
....
Sugerir un nuevo sitio WAP

...
¡Bloguea Ya!

..
Registro de Profesionales(Abogados, escritores, doctores, licenciados, ingenieros, etc.)
.
Soporte

Síguenos en las redes sociales

Síguenos en Facebook facebook.com/INFOUDO.OFICIAL Síguenos en Twitter @infoudomon Síguenos en Instagram @infoudooficial Síguenos en Telegram t.me/Infoudooficial
Síguenos en Facebook facebook.com/tuinfou Síguenos en Twitter @infoudomonagas
Síguenos en WhatsApp INFO UDO Síguenos en YouTube youtube.com/@infoudooficial
Síguenos en Facebook facebook.com/SergioAlemanFans Síguenos en Twitter @SergioAleman1 Síguenos en Instagram @sergioalemanfans
Síguenos en WhatsApp wa.me/qr/Y7Q232VLZPR5O1 Síguenos en Tiktok @sergioalemanoficial Síguenos en Tiktok @sergioalemanfans
Síguenos en Telegram t.me/SergioAlemanOficial Síguenos en YouTube youtube.com/@sergioaleman
Síguenos en Facebook facebook.com/boludooficial Síguenos en Twitter @bolUDOoficial Síguenos en Instagram @boludooficial Síguenos en Telegram t.me/Boludooficial
Síguenos en WhatsApp BolUDOoficial Síguenos en YouTube youtube.com/@boludo.oficial

Mis cuentas sociales

FB
Twitter
Pinterest
Instagram
Otras

Móvil: (0426 683 6955 - 0412 8226575) - E-mail: [email protected] - [email protected] - WhatsApp: +58 (0426) 683.69.55


Copyscape
Volver arriba

Protocolo  |  Mapa del Sitio  |  Report Abuse - DMCA  |  Términos y Condiciones  |  Ayuda  |  Privacidad de Datos  |  Política de Cookies  |  Reportar un bug  |  Licencia: CC BY-NC-ND 3.0

Copyright ©2023 Infoudo. Todos los derechos reservados. Diseñado y Desarrollado por Sergio Alemán Mi perfil en GitHub


SUBIR