Votación AJAX y PHP

Votación AJAX

En este ejemplo de AJAX, demostraremos un programa de votación donde la página web puede obtener resultados sin recargar:

¿Te gustan PHP y AJAX hasta ahora?

Sí:
No:

Este ejemplo incluye cuatro elementos:

  • Formulario HTML
  • JavaScript
  • Página PHP
  • Archivo de texto para almacenar resultados

Formulario HTML

Esto es una página HTML. Incluye un formulario HTML simple y una conexión con un archivo JavaScript:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>¿Te gusta PHP y AJAX hasta ahora?</h2>
<form>
Sí: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
No: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

Ejemplo de explicación - Formulario HTML

Como puede ver, la página HTML superior contiene un formulario HTML simple, en el que el elemento <div> tiene dos botones de opción.

Así funciona el formulario:

  • Se desencadena un evento cuando el usuario selecciona "sí" o "no"
  • Se ejecuta la función getVote() cuando se desencadena un evento
  • El <div> llamado "poll" rodea el formulario. Cuando los datos se devuelven desde la función getVote(), los datos devueltos reemplazan el formulario.

Archivo de texto

El archivo de texto (poll_result.txt) almacena los datos del programa de votación.

Se parece a esto:

0||0

El primer número representa la votación "Sí", el segundo número representa la votación "No".

Notas:Recuerde que solo debe permitir que su servidor web edite este archivo de texto. No permita que otros obtengan acceso, excepto el servidor web (PHP).

JavaScript

El código JavaScript se almacena en "poll.js" y se conecta al documento HTML:

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("El navegador no admite solicitudes HTTP")
 return
 } 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 
function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}

Ejemplo de explicación:

Las funciones stateChanged() y GetXmlHttpObject son similares a Solicitudes AJAX y PHP El ejemplo en esta sección es el mismo.

Función getVote()

Esta función se ejecuta cuando el usuario selecciona "sí" o "no" en el formulario HTML.

  1. Definir la url (nombre de archivo) a enviar al servidor
  2. Añadir parámetros a la url (vote) que contienen el contenido del campo de entrada
  3. Añadir un número aleatorio para evitar que el servidor utilice archivos en caché
  4. Llamar a la función GetXmlHttpObject para crear el objeto XMLHTTP y notificarle que debe ejecutar la función stateChanged cuando se produce un cambio
  5. Abrir el objeto XMLHTTP con la url proporcionada
  6. Enviar una solicitud HTTP al servidor

Página PHP

La página del servidor llamada "poll_vote.php" es un archivo PHP simple que se llama desde el código JavaScript.

<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
 {
 $yes = $yes + 1;
 }
if ($vote == 1)
 {
 $no = $no + 1;
 }
//insertar votos al archivo txt
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" 
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

Ejemplo de explicación:

El valor seleccionado se transmite desde JavaScript, luego sucederá:

  1. Obtener el contenido del archivo "poll_result.txt"
  2. Colocar el contenido del archivo en una variable y sumar 1 al variable seleccionada
  3. Escribir los resultados en el archivo "poll_result.txt"
  4. Escribir los resultados de la votación en gráficos