Temas > Programacion > Java script - Java > Ajax metodos ajaxStart y ajaxStop en jQuery
Julio

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. 
Confeccionar un problema que muestre una lista de hiper ví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.
pagina1.html
<?php //esto no va
 <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>
?>//esto no va
funciones.js
<?php //esto no va
 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">`);
 }
?>//esto no va
pagina1.php

 <?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.";
sleep(1);
?>

estilos.css
<?php //esto no va
 #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;
 }
?>//esto no va
Lo nuevo en este problema es que llamamos al método 
ajaxStart con el mismo objeto jQuery que llama al método load:
<?php //esto no va
function presionEnlace()
{
   var pagina=$(this).attr("href");
   var x=$("#detalles");
   x.ajaxStart(inicioEnvio);
   x.load(pagina);
   return false;
}
?>//esto no va
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:
<?php //esto no va
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.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar