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
     12
3456789
10111213141516
17181920 212223
24252627282930
31      

Viernes 21 de Marzo 2025
Semana 12



Java script - Java


-Input type submit con evento onclick
-Maneras de salir de un iframe con java script
-Sintaxis de un list array en java
-Consumir un JSON desde PHP
-Producir JSON desde PHP
-Mostrar un tooltip con datos recuperados en jQuery
-Menu desplegable en jQuery
-Llamadas encadenadas de metodos del objeto jQuery
-Funcion ajax en jQuery
-JSON en jQuery
-Pasando datos por los metodos GET y POST en jQuery
-Ajax metodo load en jQuery
-Iteracion por los elementos each en jQuery
-Efecto con el metodo toggle en jQuery
-Efecto con el metodo fadeTo en jQuery
-Efectos con los metodos fadeIn y fadeOut en jQuery
-Efectos con los metodos show y hide en jQuery
-Manipulacion de los elementos del DOM en jQuery
-Evento blur en jQuery
-Evento focus en jQuery
-Evento dblclick en jQuery
-Eventos mousedown y mouseup en jQuery
-Evento mousemove en jQuery
-Evento hover en jQuery
-Eventos mouseover y mouseout en jQuery
-Administracion de eventos con jQuery
-Metodos html y html valor en jQuery
-Metodos addClass y removeClass en jQuery
-Metodos attr y removeAttr en jQuery
-Metodos text, text valor en jQuery
-Seleccion de elementos con la clase CSS definida
-Seleccion de elementos utilizando el selector CSS
-Seleccion de elementos por el tipo de elementos jQ
-Seleccion de un elemento mediante el id jQuery
-Nueva manera de programar JavaScript con jQuery
-Que es el jQuery
-Archivo JavaScript externo
-Propiedad screen del objeto window en java script
-Propiedad location de objeto window en java script
-El objeto window en java script
-Eventos onMouseOver y onMouseOut en java script
-Eventos onFocus y onBlur en java script
-Control TEXTAREA en java script
-Control RADIO en java script
-Control CHECKBOX en java script
-Control SELECT en java script
-Control PASSWORD en java script
-Controles FORM, BUTTON y TEXT en java script
-Formularios y Eventos en java script
-Clase Math en java script
-Clase String en java script
-Clase Array en java script
-Clase Date en java script
-Programacion orientada a objetos en java script
-Funciones que retornan un valor en java script
-Funciones con parametros en java script
-Funciones en java script
-Estructura repetitiva for en java script
-Estructura repetitiva do while en java script
-Concepto de acumulador en java script
-Estructura repetitiva (while) en java script
-Operadores logicos or en las estructuras java s
-Operadores logicos (and) en las estructuras java s
-Estructuras condicionales anidadas en java script
-Estructuras condicionales compuesta en jaca script
-Estructuras condicionales simples en java script
-Estructuras secuenciales en java script
-Entrada de datos por teclado en java script
-Variables en java script
-Que es JavaScript
-Lectura y escritura de archivos en java
-Entrada y salida estandar en Java
-Programa para contar vocales de un fichero en java
-Convertidor de divisas en java
-Form con una ventana nueva
-Seleccionar un elemento html mediante su id
..............................................................................................................................................................................................................................................
(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