PHP and AJAX Poll

AJAX Suggest
In the AJAX example below we will demonstrate a poll where the web page can get the result without reloading.


--------------------------------------------------------------------------------
Do you like PHP and AJAX so far?
Yes:
No: This example consists of four pages:
a simple HTML form
a JavaScript
a PHP page
a text file to store the results

--------------------------------------------------------------------------------

The HTML Form
This is the HTML page. It contains a simple HTML form and a link to a JavaScript:

Do you like PHP and AJAX so far?

Yes:
value="0" onclick="getVote(this.value)">

No:
value="1" onclick="getVote(this.value)">

Example Explained - The HTML Form
As you can see, the HTML page above contains a simple HTML form inside a "

" with two radio buttons.

The form works like this:

An event is triggered when the user selects the "yes" or "no" option
When the event is triggered, a function called getVote() is executed.
Around the form is a

called "poll". When the data is returned from the getVote() function, the return data will replace the form.

--------------------------------------------------------------------------------

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

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 JavaScript
The JavaScript code is stored in "poll.js" and linked to in the HTML document:

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 || 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
}

Example Explained
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.

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
Calls on the GetXmlHttpObject function to create an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
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".

$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);
?>

Result:

Yes:	width='' height='20'> %
No:	width='' height='20'> %

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