Głosowanie AJAX w PHP

Głosowanie AJAX

W tym przykładzie AJAX pokażemy program głosowania, który pozwala na uzyskanie wyników bez ponownego ładowania strony.

Czy lubisz PHP i AJAX?

Tak:
Nie:

W tym przykładzie znajdują się cztery elementy:

  • Formularz HTML
  • JavaScript
  • Strona PHP
  • Tekstowy plik wynikowy

Formularz HTML

To jest strona HTML. Zawiera prosty formularz HTML oraz połączenie z plikiem JavaScript:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Czy lubisz PHP i AJAX dotąd?</h2>
<form>
Tak: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
Nie: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

Przykład wyjaśnienia - formularz HTML

Jak widać, powyższa strona HTML zawiera prosty formularz HTML, w którym element <div> zawiera dwa przyciski radiowe.

Tak działa formularz:

  • Kiedy użytkownik wybiera "tak" lub "nie", wywoływane jest zdarzenie
  • Kiedy zdarzenie jest wywoływane, wykonuje się funkcja getVote()
  • Formularz otoczony jest div-em o nazwie "poll". Kiedy dane są zwracane z funkcji getVote(), zwracane dane zastępują formularz.

Plik tekstowy

Plik tekstowy (poll_result.txt) przechowuje dane z programu głosowania.

Wygląda coś tak:

0||0

Pierwsza liczba oznacza głos "Tak", druga liczba oznacza głos "Nie".

Uwaga:Pamiętaj, aby zezwolić tylko na edycję tego pliku serwerowi web. Nie pozwalaj innym osobom uzyskać dostępu, poza serwerem web (PHP).

JavaScript

Kod JavaScript przechowywany w pliku "poll.js" jest połączony z dokumentem HTML:

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Przeglądarka nie obsługuje żądań 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
}

Przykład wyjaśnienia:

Funkcje stateChanged() i GetXmlHttpObject są podobne do Żądania AJAX z PHP Przykład w tym rozdziale jest podobny.

Funkcja getVote()

Funkcja ta jest wykonywana, gdy użytkownik wybiera "yes" lub "no" w formularzu HTML.

  1. Definiowanie url (nazwy pliku) wysyłanego do serwera
  2. Dodanie parametrów (vote) do url, zawierających zawartość pola wejściowego
  3. Dodanie losowej liczby, aby zapobiec użyciu pliku w pamięci podręcznej serwera
  4. Wywołanie funkcji GetXmlHttpObject do utworzenia obiektu XMLHTTP i poinformowanie go, aby wykonał funkcję stateChanged przy wystąpieniu zmiany
  5. Otwieranie obiektu XMLHTTP za pomocą podanego url
  6. Wysyłanie żądania HTTP do serwera

Strona PHP

Strona serwerowa wywoływana przez skrypt JavaScript o nazwie "poll_vote.php" to prosty plik 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;
 }
//wstaw głosy do pliku txt
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Wynik:</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>

Przykład wyjaśnienia:

Wybrana wartość jest przesyłana z JavaScript, co następuje:

  1. Pobierz zawartość pliku "poll_result.txt"
  2. Umieść zawartość pliku w zmiennej i dodaj 1 do wybranej zmiennej
  3. Zapisz wyniki do pliku "poll_result.txt"
  4. Wyświetl wyniki głosowania w formie graficznej