AJAX Poll
Contoh berikut akan menunjukkan sebuah jajak pendapat di mana hasilnya ditampilkan tanpa reload.
Apakah Anda suka PHP dan AJAX sejauh ini?
Contoh Dijelaskan - The HTML Halaman
Ketika pengguna memilih pilihan di atas, fungsi yang disebut " getVote() " dijalankan. Fungsi ini dipicu oleh "onclick" acara:
<html>
<head>
<script>
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() fungsi melakukan hal berikut:
- Membuat objek XMLHttpRequest
- Buat fungsi yang akan dijalankan ketika respon server siap
- Kirim permintaan off ke file di server
- Perhatikan bahwa parameter (vote) ditambahkan ke URL (dengan nilai ya atau tidak ada pilihan)
PHP Berkas
Halaman pada server yang disebut oleh JavaScript di atas adalah file PHP yang disebut "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>
Nilai tersebut dikirim dari JavaScript, dan berikut ini terjadi:
- Dapatkan isi dari "poll_result.txt" File
- Letakkan isi file dalam variabel dan menambahkan satu ke variabel yang dipilih
- Menulis hasilnya ke "poll_result.txt" File
- Output representasi grafis dari hasil jajak pendapat
The Text File
File teks (poll_result.txt) adalah tempat kita menyimpan data dari jajak pendapat.
Hal ini disimpan seperti ini:
0||0
Nomor pertama merupakan "Yes" orang, angka kedua merupakan "No" orang.
Note: Ingatlah untuk memungkinkan web server Anda untuk mengedit file teks. Apakah NOT memberikan akses setiap orang, hanya web server (PHP) .