Búsqueda personalizada
 
 
 
 
Ajax: método load
 

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

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.

<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 horscopo.</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.load(pagina); 
  return false;
}

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 sern fsicos, 
  personales, de carcter, Te sentirs impulsivo y tomars 
  iniciativas. Perodo en donde considerars unirte a agrupaciones 
  de beneficencia, o de ayuda a los dems.";
if ($_REQUEST['cod']==2)
  echo "<strong>Tauro:</strong> Hoy los cambios sern privados, 
  ntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de retiro. Tu 
  cnyuge puede aportar buen status a tu vida o apoyo a tu profesin.";
if ($_REQUEST['cod']==3)
  echo "<strong>Gminis:</strong> Los asuntos de hoy tienen 
  que ver con las amistades, reuniones, actividades con ellos. Da esperanzado, 
  ilusiones. Mucha energa sexual y fuerza emocional. Deseos difciles 
  de controlar.";
if ($_REQUEST['cod']==4)
  echo "<strong>Cancer:</strong> Este da la profesin 
  y las relaciones con superiores y con tu madre sern de importancia. 
  Actividad en relacin a estos temas. Momentos positivos con compaeros 
  de trabajo. Actividad laboral agradable.";
if ($_REQUEST['cod']==5)
  echo "<strong>Leo:</strong> Este da los estudios, los 
  viajes, el extranjero y la espiritualidad sern lo importante. Pensamientos, 
  religin y filosofa tambin. Vivencias krmicas de 
  la poca te vuelven responsable tomando decisiones.";
if ($_REQUEST['cod']==6)
  echo "<strong>Virgo:</strong> Para este da toma importancia 
  tu vida sexual, tal vez miedos, temas legales, juicios o herencias. 
  Experiencias   extraas. Hay karma de prueba durante este perodo en tu 
  parte psicolgica, generndose algunos replanteos.";
if ($_REQUEST['cod']==7)
  echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con 
  tu pareja, tambin con socios, con la gente o el pblico. Ellos 
  sern lo ms importante del da. Ganancias a travs 
  de especulaciones o del juego. Actividades vocacionales artsticas.";
if ($_REQUEST['cod']==8)
  echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver 
  con temas de trabajo y de salud. Presta atencin a ambos. Experiencias 
  diversas con compaeros. Durante este perodo tendrs muchos 
  recursos para ganar dinero.";
if ($_REQUEST['cod']==9)
  echo "<strong>Sagitario:</strong> Durante este da se 
  vivirn cambios en relacin a los noviazgos o a los hijos. Creatividad, 
  actividad, diversiones y salidas. Perodo de encuentros con personas o 
  situaciones que te impresionan.";
if ($_REQUEST['cod']==10)
  echo "<strong>Capricornio:</strong> Los cambios del da 
  tienen que ver con tu hogar, con la convivencia y con el padre. Asuntos relativos 
  al carcter en la convivencia. El karma de responsabilidad de estos momentos 
  te acercar al mundo de lo desconocido, mucha madurez y contacto con el 
  ms all.";
if ($_REQUEST['cod']==11)
  echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver 
  con el entorno inmediato, hermanos y vecinos, con la comunicacin, 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 da se vivirn 
  cambios en la economa, movimientos en los ingresos, negocios, valores. 
  Momentos de gran fuerza y decisin profesionales, buscars el liderazgo.";
?>

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

 function inicializarEventos()  {    
  var x;    
  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()  {    
    var pagina=$(this).attr("href");    
    var 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)

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

Creamos un objeto jQuery a partir del div #detalles:

  var 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.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion