Búsqueda personalizada
 
 
 
 
Ajax: métodos ajaxStart y ajaxStop
 

Estos dos métodos se pueden asociar a un objeto de tipo jQuery, tienen como parámetro una función:

   ajaxStart([función])  

La función de ajaxStart se dispara cuando se inicia la petición al servidor y nos puede servir para mostrar en pantalla al usuario que están llegando datos del servidor.

  ajaxStop([función])  

Se dispara esta función cuando finalizar la petición de datos al servidor.

Problema: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.
Mostrar un gif animado mientras los datos no llegaron del servidor.

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</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>
                    

funciones.js

var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  var x;
  x=$("#menu a");
  x.click(presionEnlace);
}

function presionEnlace()
{
  var pagina=$(this).attr("href");
  var x=$("#detalles");
  x.ajaxStart(inicioEnvio);
  x.load(pagina); 
  return false;
}

function inicioEnvio()
{
  var x=$("#detalles");
  x.html('<img src="../cargando.gif">');
}

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;
}

pagina1

<?php
header('Content-Type: text/html; charset=ISO-8859-1');
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.";
 sleep(1);

Lo nuevo en este problema es que llamamos al método ajaxStart con el mismo objeto jQuery que llama al método load:

  function presionEnlace()  {    
   var pagina=$(this).attr("href");    
   var x=$("#detalles");    
   x.ajaxStart(inicioEnvio);    
   x.load(pagina);     
   return false;  }  

Luego cuando se activa la petición de la página al servidor el objeto jQuery llama a la función inicioEvento, donde mostramos el gif animado:

 function inicioEnvio()  {    
    var x=$("#detalles");   
    x.html('<img src="../cargando.gif">');  }  

No ocultamos el gif animado ya que se está mostrando en el div #detalles. Dicho div será inicializado por el objeto jQuery con los datos enviados por el servidor y borrará el elemento img.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion