PHP Example - AJAX Poll
AJAX Poll
This example will demonstrate a poll where a web page can
get results without reloading.
Do you like PHP and AJAX so far?
Example Explained - The HTML page
The HTML page contains a link to an external JavaScript, an HTML form, and a div element:
<html>
<head>
<script type="text/javascript" src="poll.js"></script>
</head>
<body>
<div id="poll">
<h3>Do you like PHP and AJAX so far?</h3>
<form>
Yes:
<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>
|
The HTML form works like this:
- An event is triggered when the user selects the "yes" or "no" option
- When the event is triggered, the function getVote() is executed
- The data
returned from the getVote() function will replace the form, in the <div> tag
Example Explained - The JavaScript code
This is the JavaScript code stored in the file "poll.js":
var xmlhttp;
function getVote(int)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
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)
{
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;
}
|
The stateChanged() and GetXmlHttpObject functions are the same as in the
PHP AJAX Suggest chapter.
The getVote() Function
This function executes when "yes" or "no" is selected in the HTML form.
- Calls the GetXmlHttpObject() function to create an XMLHTTP object
- Defines the URL (filename) to send to the server
- Adds a parameter (vote) to the URL with the content of the input field
- Adds a random number to prevent the server from using a cached file
- Each time the readyState property changes, the stateChanged() function
will be executed
- Opens the XMLHTTP object with the given url.
- Sends an HTTP request to the server
The PHP Page
The server page called by the JavaScript code is a simple PHP file called "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>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>
|
The selected value is sent from the JavaScript and the following
happens:
- Get the content of the "poll_result.txt" file
- Put the content of the file in variables and add one to the selected
variable
- Write the result to the "poll_result.txt" file
- Output a graphical representation of the poll result
The Text File
The text file (poll_result.txt) is where we store the data from the poll.
It is stored like this:
The first number represents the "Yes" votes, the second number represents the
"No" votes.
Note: Remember to allow your web server to edit the text file. Do
NOT give everyone access, just the web server (PHP).
The Creators of XMLSpy are Pleased to Announce
| 
