PHP ja AJAX äänestys

AJAX äänestys

Tässä AJAX-esimerkissä näytämme äänestysohjelman, jossa lomakkeen tulokset voidaan saada ilman sivun uudelleenlatausta.

Oletko tähän mennessä tykännyt PHP:stä ja AJAX:sta?

Kyllä:
Ei:

Tässä esimerkissä on neljä elementtiä:

  • HTML-lomake
  • JavaScript
  • PHP-sivu
  • Tulosten tallennustiedosto

HTML-lomake

Tämä on HTML-sivu. Se sisältää yksinkertaisen HTML-lomakkeen ja yhteyden JavaScript-tiedostoon:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>Onko sinulla tähän mennessä pidetty PHP ja AJAX?</h2>
<form>
Kyllä: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
Ei: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

Esimerkki selityksestä - HTML-lomake

Kuten näette, yllä oleva HTML-sivu sisältää yksinkertaisen HTML-lomakkeen, jossa on kaksi valintanappia sisältävä <div>-elementti.

Lomake toimii tällä tavalla:

  • Kun käyttäjä valitsee "kyllä" tai "ei", käynnistetään tapahtuma
  • Kun tapahtuma käynnistyy, suoritetaan getVote()-funktio
  • Muotoilutaulukon ympärillä on nimeltään "poll"-div. Kun getVote()-funktiosta palautetaan data, palautettu data korvaa muotoilutaulukon.

Tekstitiedosto

Tekstitiedosto (poll_result.txt) tallentaa äänestysohjelmasta tulevat tiedot.

Se on jotain tällaista:

0||0

Ensimmäinen numero edustaa "Kyllä"-äänestystä, toinen numero edustaa "Ei"-äänestystä.

Huomautus:Muista sallia vain web-palvelin muokata tätä tekstiviestiä. Älä anna muille käyttäjille pääsyä, paitsi web-palvelimelle (PHP).

JavaScript

JavaScript-koodi tallennetaan "poll.js"-tiedostoon ja se liitetään HTML-dokumenttiin:

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Selaime ei tue HTTP-pyynnön lähettämistä")
 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
}

Esimerkki selityksestä:

stateChanged() ja GetXmlHttpObject -funktiot ovat PHP ja AJAX pyynnöt Tämä luku on samanlainen kuin edellinen

getVote() -funktio

Tämä funktio suoritetaan, kun käyttäjä valitsee HTML-lomakkeessa "kyllä" tai "ei"

  1. Määritä lähetettävään palvelimeen lähetettävän url:n (tiedoston nimi)
  2. Lisää parametrit (vote) url:hen, ja parametrit sisältävät syöttökentän sisällön
  3. Lisää satunnainen luku estääksesi palvelimen käyttämästä välimuistissa olevaa tiedostoa
  4. Kutsu GetXmlHttpObject-funktiota luodaksesi XMLHTTP-objektin ja kerro objektille, että se suorittaa stateChanged-funktion muutoksen yhteydessä
  5. Avaa XMLHTTP-objekti annetulla url:llä
  6. Lähetä HTTP-pyyntö palvelimelle

PHP-sivu

Palvelin sivu, jota JavaScript-koodi kutsuu, on yksinkertainen PHP-tiedosto nimeltä "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;
 }
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Tulos:</h2>
<table>
<tr>
<td>Kyllä:</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>Ei:</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>

Esimerkki selityksestä:

Valittu arvo saapuu JavaScriptistä, minkä jälkeen tapahtuu:

  1. Hae tiedoston "poll_result.txt" sisältö
  2. Laita tiedoston sisältö muuttujaan ja lisää valittu muuttuja 1
  3. Kirjoita tulokset tiedostoon "poll_result.txt"
  4. Tulosta graafiset äänestystulokset