AJAX Poll is a web application that allows users to vote on a particular question or topic without having to refresh the page. It uses AJAX (Asynchronous JavaScript and XML) technology to update the results in real-time, making it a more interactive and engaging experience for users.
The basic idea behind AJAX Poll is to use JavaScript to send a request to the server, which then returns the updated results without having to reload the entire page. This makes the process faster and more efficient, as only the necessary data is being transferred back and forth between the client and server.
Here is an example of how AJAX Poll works:
<script>
function vote(option) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result").innerHTML = this.responseText;
}
};
xhttp.open("GET", "vote.php?option=" + option, true);
xhttp.send();
}
</script>
<div>
<h2>What is your favorite color?</h2>
<button onclick="vote('red')">Red</button>
<button onclick="vote('blue')">Blue</button>
<button onclick="vote('green')">Green</button>
</div>
<div id="result">
<?php include 'result.php'; ?>
</div>
In this example, we have a question asking users to vote for their favorite color. When a user clicks on one of the buttons, the vote() function is called with the corresponding option as a parameter. This function creates a new XMLHttpRequest object and sets its onreadystatechange property to a function that will be called when the server responds to the request.
The xhttp.open() method is used to specify the type of request (GET or POST), the URL of the server-side script that will handle the request, and whether the request should be asynchronous or not. In this case, we are using a GET request to the vote.php script with the selected option as a parameter.
Finally, the xhttp.send() method is called to send the request to the server. When the server responds, the onreadystatechange function is called and checks if the response is ready and if the status code is 200 (OK). If both conditions are met, the innerHTML property of the result element is set to the response text, which contains the updated results.
The server-side script (vote.php) would handle the request by updating the database or file that stores the poll results and returning the updated results in HTML format. Here is an example of what the result.php script might look like:
<?php
$red = 25;
$blue = 35;
$green = 40;
$total = $red + $blue + $green;
echo "<p>Red: " . round($red/$total*100) . "%</p>";
echo "<p>Blue: " . round($blue/$total*100) . "%</p>";
echo "<p>Green: " . round($green/$total*100) . "%</p>";
?>
This script simply calculates the percentage of votes for each option and displays them as HTML paragraphs. The round() function is used to round the percentages to the nearest whole number.
Overall, AJAX Poll is a useful tool for creating interactive and engaging web applications that allow users to vote and see the results in real-time. It is easy to implement and can be customized to fit the needs of any project.