PHP Basic
PHP HOMEPHP Intro
PHP Install
PHP Syntax
PHP Variables
PHP String
PHP Operators
PHP If...Else
PHP Switch
PHP Arrays
PHP While Loops
PHP For Loops
PHP Functions
PHP Forms
PHP $_GET
PHP $_POST
PHP Advanced
PHP DatePHP Include
PHP File
PHP File Upload
PHP Cookies
PHP Sessions
PHP E-mail
PHP Secure E-mail
PHP Error
PHP Exception
PHP Filter
PHP Database
MySQL IntroductionMySQL Connect
MySQL Create
MySQL Insert
MySQL Select
MySQL Where
MySQL Order By
MySQL Update
MySQL Delete
PHP ODBC
PHP XML
XML Expat ParserXML DOM
XML SimpleXML
PHP and AJAX
AJAX IntroAJAX PHP
AJAX Database
AJAX XML
AJAX Live Search
AJAX RSS Reader
AJAX Poll
PHP Reference
PHP ArrayPHP Calendar
PHP Date
PHP Directory
PHP Error
PHP Filesystem
PHP Filter
PHP FTP
PHP HTTP
PHP Libxml
PHP Mail
PHP Math
PHP Misc
PHP MySQL
PHP SimpleXML
PHP String
PHP XML
PHP Zip
PHP Quiz
PHP QuizPHP Certificate
PHP Example - AJAX Poll
| « Previous | Next Chapter » |
AJAX Poll
The following example will demonstrate a poll where the result is shown without reloading.
Do you like PHP and AJAX so far?
Example Explained - The HTML Page
When a user choose an option above, a function called "getVote()" is executed. The function is triggered by the "onclick" event:
| <html> <head> <script type="text/javascript"> function getVote(int) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("poll").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","poll_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 option)
The PHP File
The page on the server called by the JavaScript above is a 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 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:
| 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).
| « Previous | Next Chapter » |
