6 - Pasando datos al servidor por el método GET.


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)

Problema:

<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Vote esta foto</h1>
<p>
<img src="../foto1.jpg" alt="cuadro sobre geometria generativa">
</p>
<ul class="voto" id="votofoto1">
<li><a href="pagina1.php?voto=1">1</a></li>
<li><a href="pagina1.php?voto=2">2</a></li>
<li><a href="pagina1.php?voto=3">3</a></li>
<li><a href="pagina1.php?voto=4">4</a></li>
<li><a href="pagina1.php?voto=5">5</a></li>
<li><a href="pagina1.php?voto=6">6</a></li>
<li><a href="pagina1.php?voto=7">7</a></li>
<li><a href="pagina1.php?voto=8">8</a></li>
<li><a href="pagina1.php?voto=9">9</a></li>
<li><a href="pagina1.php?voto=10">10</a></li>
</ul>
<br>
<div id="resultados"></div>
<a href="votos.txt">Ver resultados</a>
</body>
</html>
.voto {
  padding:0px;
}
.voto a {
  float:left;
  width:15px;
  text-decoration:none;
  text-align:center;
  color:#f00;
  background-color:#f7f8e8;
  border-right:1px solid white;
  font-size:13px;
}

.voto li {
  display:inline;
}
addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var ref=document.getElementById('votofoto1');
  var vec= ref.getElementsByTagName('li');
  var vec2=ref.getElementsByTagName('a');
  for(f=0;f<vec2.length;f++)
  {
    addEvent(vec[f],'mouseover',entrar,false);
    addEvent(vec[f],'mouseout',salir,false);
    addEvent(vec2[f],'click',presionBoton,false);
  }
}

function entrar(e)
{
  var ref;
  if (window.event)
    ref=window.event.srcElement;
  else
    if (e)
      ref=e.target;
  var ob=document.getElementById('votofoto1');
  var vec=ob.getElementsByTagName('li');
  for(f=0;f<ref.firstChild.nodeValue;f++)
  {
    vec[f].firstChild.style.background='#f00';
    vec[f].firstChild.style.color='#fff';
  }  
  
}

function salir(e)
{
  var ref;
  if (window.event)
    ref=window.event.srcElement;
  else
    if (e)
      ref=e.target;
  var ob=document.getElementById('votofoto1');
  var vec=ob.getElementsByTagName('li');
  for(f=0;f<ref.firstChild.nodeValue;f++)
  {
    vec[f].firstChild.style.background='#f7f8e8';
    vec[f].firstChild.style.color='#f00';
  }  
}


function presionBoton(e)
{
  var ref;
  if (window.event)
  {
    window.event.returnValue=false;
    ref=window.event.srcElement;
  }
  else
    if (e)
    {
      e.preventDefault();
      ref=e.target;
    }
  cargarVoto(ref.firstChild.nodeValue);
}


var conexion1;
function cargarVoto(voto) 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  var fecha=new Date();
  var aleatorio=fecha.getFullYear()+":"+fecha.getMonth()+":"+
                fecha.getDate()+":"+fecha.getHours()+":"+
                fecha.getMinutes()+":"+fecha.getSeconds(); 
  conexion1.open('GET','pagina1.php?voto='+voto+"&aleatorio="+aleatorio, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    resultados.innerHTML = 'Gracias.';
  } 
  else 
  {
    resultados.innerHTML = 'Procesando...';
  }
}


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

<?php
header('Content-Type: text/html; charset=ISO-8859-1');
$ar=fopen("votos.txt","a") or
  die("No se pudo abrir el archivo");
fputs($ar,$_REQUEST['voto']."-\n");
fclose($ar);
?>

Confeccionar el mismo problema de calificar una foto con un valor de 1 al 10 utilizando una lista de hipervínculos del 1 al 10. Además hacer que la barra de selección de la calificación cambie de color cuando ingresamos con el mouse.

En vez de utilizar un valor aleatorio emplear la hora actual para que el navegador siempre pida la página al servidor y no rescate la misma de la cache.


Ver solución

pagina1.html







estilos.css




funciones.js




pagina1.php