Votação AJAX PHP

Votação AJAX

Neste exemplo AJAX, vamos mostrar um programa de votação, onde a página web pode obter resultados sem recarregar:

Até agora, você gosta de PHP e AJAX?

Sim:
Não:

Este exemplo inclui quatro elementos:

  • Formulário HTML
  • JavaScript
  • Página PHP
  • Arquivo de texto para armazenamento de resultados

Formulário HTML

Esta é uma página HTML. Ela contém um formulário HTML simples e uma conexão com um arquivo JavaScript:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Você gosta de PHP e AJAX até agora?</h2>
<form>
Sim: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
Não: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

Exemplo de explicação - formulário HTML

Como você vê, a página HTML superior contém um formulário HTML simples, cujo elemento <div> possui dois botões de rádio.

Como funciona o formulário:

  • Quando o usuário escolhe "sim" ou "não", um evento é acionado
  • Quando o evento é acionado, a função getVote() é executada
  • O formulário está cercado por um <div> chamado "poll".. Quando os dados são retornados pela função getVote(), os dados retornados substituem o formulário.

Arquivo de texto

O arquivo de texto (poll_result.txt) armazena os dados do programa de votação.

É algo assim:

0||0

O primeiro número representa o voto "Sim", o segundo número representa o voto "Não".

Observação:Lembre-se de permitir que apenas o servidor web edite o arquivo de texto. Não permita que outras pessoas tenham acesso, exceto o servidor web (PHP).

JavaScript

O código JavaScript é armazenado em "poll.js" e conectado ao documento HTML:

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("O navegador não suporta solicitações 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
}

Exemplo de Explicação:

As funções stateChanged() e GetXmlHttpObject são semelhantes a Requisição AJAX PHP Os exemplos neste capítulo são os mesmos.

Função getVote()

A função é executada quando o usuário escolhe "sim" ou "não" no formulário HTML.

  1. Definir a url (nome do arquivo) a ser enviada para o servidor
  2. Adicionar parâmetros (vote) à url, contendo o conteúdo do campo de entrada
  3. Adicionar um número aleatório para evitar que o servidor use arquivos em cache
  4. Chamar a função GetXmlHttpObject para criar o objeto XMLHTTP e informar que a função stateChanged deve ser executada quando ocorrer uma mudança
  5. Abrir o objeto XMLHTTP usando a url fornecida
  6. Enviar uma solicitação HTTP para o servidor

Página PHP

A página do servidor chamada por código JavaScript é um arquivo PHP simples chamado "poll_vote.php".

<?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;
 }
//inserir votos no arquivo txt
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Resultado:</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>

Exemplo de Explicação:

O valor selecionado vem do JavaScript, então acontece:

  1. Obter o conteúdo do arquivo "poll_result.txt"
  2. Colocar o conteúdo do arquivo em uma variável e somar 1 ao variável selecionada
  3. Escrever os resultados no arquivo "poll_result.txt"
  4. Emitir resultados de votação gráficos