Directorio WAP para móvil, Tablet, iPhone o Smartphone Centro de Noticias de la Universidad de Oriente |
|
|
|
||
|
domingo julio 10, 2016 12 - Método abort del objeto XMLHttpRequestEl 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
Comenta o lee lo que otros opinan |
||
COMPÁRTELO:Indica que te gusta y comparte |
||
 Facebook
 Twitter
 WhatsApp
 Telegram
LinkedIn
|
||
|
También te puede interesar: Validación de la existencia de un nombre de usuario en forma asincrónica (AJAX) |
||
|
« Propiedades status y statusText. | Mostrar un gif animado mientras se envían y reciben los datos del servidor. » |
||
|
||
|
Buscador:
|
||
Síguenos por RSSPuedes 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
..... |
||
Síguenos en las redes sociales facebook.com/INFOUDO.OFICIAL
@infoudomon
 @infoudooficial
t.me/Infoudooficial
facebook.com/tuinfou
@infoudomonagas
INFO UDO
 youtube.com/@infoudooficial
facebook.com/SergioAlemanFans
@SergioAleman1
@sergioalemanfans
wa.me/qr/Y7Q232VLZPR5O1
 @sergioalemanoficial
@sergioalemanfans
t.me/SergioAlemanOficial
youtube.com/@sergioaleman
facebook.com/boludooficial
@bolUDOoficial
@boludooficial
t.me/Boludooficial BolUDOoficial
youtube.com/@boludo.oficial
Mis cuentas socialesOtrasMóvil: (0426 683 6955 - 0412 8226575) - E-mail: [email protected] - [email protected] - WhatsApp: +58 (0426) 683.69.55 
|
||
|
|
||
|
Copyright ©2023 Infoudo. Todos los
derechos reservados. Diseñado y Desarrollado por Sergio Alemán
SUBIR
|
||
Inicio
TIENDA PUBLISHOP
Ir a URL