Conceptos de JQuery

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.

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <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>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

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

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

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

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

pagina1.php

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

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

Lo nuevo en este problema es que llamamos al método ajaxStart con el objeto document:

function presionEnlace() {
  let pagina = $(this).attr("href");
  let x = $(document);
  x.ajaxStart(inicioEnvio);
  x = $("#detalles");
  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() {
  let 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.

26 - Ajax: métodos ajaxStart y ajaxStop

Retornar