AJAX Poll
Contoh berikut akan menunjukkan polling di mana hasilnya ditampilkan tanpa memuat ulang.
Setelah memilih salah satu dari polling di atas, maka akan tampil hasil polling seperti di bawah ini :
Penjelasan Contoh – Halaman HTML
Saat pengguna memilih opsi di atas, fungsi yang disebut “getVote()” dijalankan. Fungsi ini dipicu oleh peristiwa “onclick“:
<html>
<head>
<script>
function getVote(int) {
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("poll").innerHTML=this.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>Fungsi getVote() melakukan hal berikut:
- Buat objek XMLHttpRequest
- Buat fungsi untuk dijalankan saat respons server siap
- Kirim permintaan ke file di server
- Perhatikan bahwa parameter (suara) ditambahkan ke URL (dengan nilai opsi ya atau tidak)
File PHP
Halaman di server yang dipanggil 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 dikirim dari JavaScript dan hal berikut terjadi:
- Dapatkan konten dari file “poll_result.txt”
- Letakkan konten file dalam variabel dan tambahkan satu ke variabel yang dipilih
- Tulis hasilnya ke file “poll_result.txt”
- Keluarkan representasi grafis dari hasil polling
File Teks
File teks (poll_result.txt) adalah tempat kami menyimpan data dari polling.
Disimpan seperti ini:
0||0
Angka pertama mewakili suara “Yes”, angka kedua mewakili suara “No”.
Catatan: Ingatlah untuk mengizinkan server web kita mengedit file teks. JANGAN memberikan akses semua orang, hanya server web (PHP).
