Cách tạo chức năng bỏ phiếu (thăm dò ý kiến) bằng AJAX

- Trong bài hướng dẫn này, các bạn sẽ được tìm hiểu cách thức tạo một chức năng bỏ phiếu (thăm dò ý kiến) đơn giản bằng AJAX (đối với chức năng này, khi người dùng bỏ phiếu cho một ứng cử viên nào đó thì kết quả sẽ được lưu, đồng thời gửi trả về kết quả bình trọn ngay lập tức mà không cần phải tải lại trang)

Đánh giá giao diện

https://webcoban.vn/demo/file?id=3709

- Dưới đây là đoạn mã HTML của trang web trên.

<!DOCTYPE html>
<html>
<head>
	<title>Đánh giá giao diện</title>
	<style type="text/css">
		#display > div > i{display:inline-block;background-color:#35a7d6;height:22px;vertical-align:-5px;}
		#display > div + div{margin-top:20px;}
	</style>
	<script>
		function getVote(int){
			var myRequest = new XMLHttpRequest();
			myRequest.onreadystatechange=function(){
				if(this.readyState==4 && this.status==200){
					document.getElementById("display").innerHTML=this.responseText;
				}
			}
			myRequest.open("GET","vote.php?ballot="+int,true);
			myRequest.send();
		}
	</script>
</head>
<body>
	<div id="display">
		<h3>Bạn có hài lòng với giao diện của trang không ?</h3>
		<p><input type="radio" name="vote" value="1" onclick="getVote(this.value)"> Có</p>
		<p><input type="radio" name="vote" value="0" onclick="getVote(this.value)"> Không</p>
	</div>
</body>
</html>

- Ở ví dụ trên, khi người dùng bầu chọn cho một ứng cử viên nào đó thì sự kiện onclick được kích hoạt, nó sẽ gọi đến hàm getVote() để thực thi.

- Hàm getVote() sẽ thực hiện các công việc sau đây:

Tạo một đối tượng XMLHttpRequest có tên là myRequest.
Tạo một chức năng sẽ được thực thi khi phản hồi của máy chủ sẵn sàng.
Gửi yêu cầu đến tập tin vote.php trên máy chủ (lưu ý rằng khi gửi yêu cầu thì chúng ta cần phải truyền thêm một tham số có tên là ballot dùng để chứa giá trị đại diện cho ứng viên mà bạn chọn)

- Dưới đây là nội dung của tập tin vote.php

<?php
	$content = file("result.txt");
	$array = explode("||", $content[0]);
	$yes = $array[0];
	$no = $array[1];
	if($_REQUEST['ballot']==1){
		$yes = $yes + 1;
	}else{
		$no = $no + 1;
	}
	$fp = fopen("result.txt","w");
	fputs($fp,$yes."||".$no);
	fclose($fp);
?>
<h2>KẾT QUẢ</h2>
<div>
	<?php $percent = 100*round($yes/($yes+$no),2); ?>
	<i style="width:<?=$percent;?>px"></i>
	<?=$percent;?>%
	(<?=$yes;?> bạn hài lòng)
</div>
<div>
	<?php $percent = 100*round($no/($yes+$no),2); ?>
	<i style="width:<?=$percent;?>px"></i>
	<?=$percent;?>%
	(<?=$no;?> bạn không hài lòng)
</div>

- Khi chúng ta gửi yêu cầu đến tập tin vote.php thì dưới đây sẽ là những gì xảy ra đối với nó.

Đọc nội dung từ tập tin result.txt, lưu trữ số người hài lòng vào biến $yes, số người không vào biến $no.
Kiểm tra giá trị vừa được gửi đến, nếu là một (1) thì tăng số người hài lòng lên một, còn nếu là không (0) thì tăng số người không hài lòng lên một.
Cập nhật lại số lượt hài lòng và không hài lòng vào tập tin result.txt rồi đóng nó lại.
Hiển thị kết quả (nội dung HTML) sẽ được trả về.

- Lưu ý: Các bạn cần phải tạo một tập tin result.txt ban đầu có nội dung là 0||0 để lưu trữ số lượt hài lòng và không hài lòng (số đầu tiên sẽ đại diện cho số lượt hài lòng, số thứ hai sẽ đại diện cho số lượt không hài lòng)

0||0