Votazione AJAX PHP

Voto AJAX

In questo esempio AJAX, mostreremo un programma di voto in cui la pagina web può ottenere i risultati senza dover essere ricaricata:

Finora, ti piace PHP e AJAX?

Sì:
No:

Questo esempio include quattro elementi:

  • Modulo HTML
  • JavaScript
  • Pagina PHP
  • File di testo per memorizzare i risultati

Modulo HTML

Questo è una pagina HTML. Contiene un semplice modulo HTML e un collegamento al file JavaScript:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Ti piace PHP e AJAX finora?</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>

Esempio di spiegazione - Modulo HTML

Come puoi vedere, la pagina HTML superiore contiene un semplice modulo HTML, il cui elemento <div> contiene due pulsanti di opzione.

Come funziona il modulo:

  • Quando l'utente seleziona "sì" o "no", si verifica un evento
  • Quando si verifica un evento, si esegue la funzione getVote()
  • Il <div> con nome "poll" circonda il modulo. Quando i dati vengono restituiti dalla funzione getVote(), i dati restituiti sostituiranno il modulo.

File di testo

Il file di testo (poll_result.txt) memorizza i dati provenienti dal programma di voto.

Sembra così:

0||0

Il primo numero rappresenta il voto "Sì", il secondo numero rappresenta il voto "No".

Note:Ricorda di permettere solo al tuo server web di editare il file di testo. Non dare accesso a nessun altro, tranne il server web (PHP).

JavaScript

Il codice JavaScript è memorizzato in "poll.js" e collegato al documento HTML:

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Il browser non supporta le richieste 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
}

Esempio di spiegazione:

Le funzioni stateChanged() e GetXmlHttpObject sono le stesse di Richiesta AJAX PHP Gli esempi in questa sezione sono gli stessi.

Funzione getVote()

La funzione viene eseguita quando l'utente seleziona "sì" o "no" nel modulo HTML.

  1. Definire l'URL (nome del file) da inviare al server
  2. Aggiungere i parametri (vote) all'URL, contenenti il contenuto del campo di input
  3. Aggiungere un numero casuale per prevenire che il server utilizzi file in cache
  4. Chiamare la funzione GetXmlHttpObject per creare l'oggetto XMLHTTP e informare l'oggetto di eseguire la funzione stateChanged quando si verifica un cambiamento
  5. Aprire l'oggetto XMLHTTP utilizzando l'URL fornito
  6. Inviare una richiesta HTTP al server

Pagina PHP

La pagina del server chiamata con il codice JavaScript è un file PHP semplice chiamato "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;
 }
//inserisci voti nel file txt
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Risultato:</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>

Esempio di spiegazione:

Il valore selezionato viene trasmesso da JavaScript e succede poi:

  1. Ottieni il contenuto del file "poll_result.txt"
  2. Inserisci il contenuto del file nella variabile e aggiungi 1 al variabile selezionata
  3. Scrivi i risultati nel file "poll_result.txt"
  4. Visualizza i risultati del voto in grafica