Ejercicios resueltos

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado.)

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.

Para ver que solo se modifica el div "detalles" puede agregar otros elementos a la página haciéndola mas compleja (por ejemplo agregue 20 títulos h1) Observe luego que al presionar el hipervínculo solo se actualiza el div "detalles", sin el parpadeo de la página que ocurre cuando recargamos una página HTML completamente.

pagina1.html

<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Signos del horóscopo.</h1>
<div id="menu">
<a id="enlace1" href="pagina1.php?cod=1">Aries</a>
<a id="enlace2" href="pagina1.php?cod=2">Tauro</a>
<a id="enlace3" href="pagina1.php?cod=3">Geminis</a>
<a id="enlace4" href="pagina1.php?cod=4">Cancer</a>
<a id="enlace5" href="pagina1.php?cod=5">Leo</a>
<a id="enlace6" href="pagina1.php?cod=6">Virgo</a>
<a id="enlace7" href="pagina1.php?cod=7">Libra</a>
<a id="enlace8" href="pagina1.php?cod=8">Escorpio</a>
<a id="enlace9" href="pagina1.php?cod=9">Sagitario</a>
<a id="enlace10" href="pagina1.php?cod=10">Capricornio</a>
<a id="enlace11" href="pagina1.php?cod=11">Acuario</a>
<a id="enlace12" href="pagina1.php?cod=12">Piscis</a>
</div>
<div id="detalles">Seleccione su signo.</div>
</body>
</html>

estilos.css

funciones.js

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
 var ob;
 for(f=1;f<=12;f++)
 {
 ob=document.getElementById('enlace'+f);
 addEvent(ob,'click',presionEnlace,false);
 }
}

var conexion1;
function cargarHoroscopo(url) 
{
  if(url=='')
  {
    return;
  }
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open("GET", url, true);
  conexion1.send(null);
}

//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

pagina1.php

<?php
header('Content-Type: text/html; charset=ISO-8859-1');
if ($_REQUEST['cod']==1)
 echo "Aries: 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 "Tauro: 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 "Géminis: 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 "Cancer: 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 "Leo: 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 "Virgo: 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 "Libra: 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 "Escorpio: 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 "Sagitario: 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 "Capricornio: 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 "Acuario: 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 "Piscis: 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.";
?>

3 - Un ejemplo con AJAX.