25 - Ajax: método load.


Para el entendimiento de los próximos conceptos se recomienda haber realizado el tutorial de AJAX Ya

Este método es el más sencillo para recuperar datos del servidor.

La sintaxis de este método es el siguiente:

load([nombre de la página],[parámetros],[funcion final])

Otra cosa muy importante es la llamada de este método a partir del elemento HTML donde queremos que se agregue la información que retorna el servidor (es decir que utilizamos este método cuando no tenemos que procesarlo en el navegador, sino directamente mostrarlo en forma completa). El segundo y tercer parámetro son opcionales.

Problema:Confeccionar una página 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.

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 = $("#detalles");
  x.load(pagina);
  return false;
}

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.";
?>

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

Como podemos observar el código JavaScript es muy pequeño, veamos:

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

En la función inicializarEventos cremos un objeto jQuery con la referencia de todas las anclas que están contenidas en el div #menu. Asociamos el evento click a todos los enlaces.

La función presionEnlace:

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

Extraemos el atributo href del hipervínculo que disparó el evento (tengamos en cuenta que almacena el nombre de la página y el parámetro, por ejemplo:"pagina1.php?cod=6)

  let pagina = $(this).attr("href");

Creamos un objeto jQuery a partir del div #detalles:

  let x = $("#detalles");

Llamamos al método load del objeto jQuery y le pasamos como parámetro el nombre de la página a recuperar:

  x.load(pagina); 

El método load se encarga de hacer la comunicación asincrónica con el servidor, esperar y recibir los datos y finalmente añadir la información al elemento HTML (en nuestro ejemplo el div #detalles)

Por último la función retorna false para anular la propagación de eventos y desactivar también el evento por defecto que ocurre cuando se presiona un enlace.


Retornar