Introduction
A poll is one way of organizing the periodical polling of server data and updating the page. A poll is where the result is shown without reloading the page. When a user chooses an option then a function called "getVote()" is executed. The function is triggered by the "onclick" event. Ajax (AJAX is an acronym for Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create an asynchronous web application. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required and the requests do not need to be asynchronous. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with, the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.
Example
This following file is a HTML file; save it as "poll.php":
<html>
<head>
<script>
function getVote(int) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("poll").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "vote.php?vote=" + int, true);
xmlhttp.send();
}
</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 getVote() function does the following:
- Create an XMLHttpRequest object.
- Create the function to be executed when the server response is ready.
- Send the request off to a file on the server.
- Notice that a parameter (vote) is added to the URL (with the value of the yes or no).
The page on the server called by the JavaScript above is a PHP file called "vote.php"; it is:
<?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="shop.jpg"
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="sss.jpg"
width='<?php
echo(100*round($no/($no+$yes+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes+$yes),2)); ?>%
</td>
</tr>
</table>
The 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
Like choose "Yes" for Vote
![Poll-in-php-with-Ajax.jpg]()
Output
![Poll-in-php-with-Ajax1.jpg]()
Like choose "No"
![Poll-in-php-with-Ajax3.jpg]()
Output
![Poll-in-php-with-Ajax4.jpg]()
The Text File
The text file (poll_result.txt) is where we store the data from the poll.
It is stored like this:
|
0 || 0 Like $insertvote = $yes."||".$no; |
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).