وباکا

آموزش تخصصی برنامه نویسی وب

در این قسمت یک مثال برای ایجاد نظرسنجی با ایجکس را نشان می دهیم که نتیجه  نظرسنجی بدون بارگذاری مجدد صفحه  نشان داده می شود.

در این نمونه برنامه، هنگامی که یک کاربر یک گزینه نظرسنجی را انتخاب می کند، یک تابع به نام “getVote ()” اجرا می شود. این تابع توسط رویداد “onclick” فراخوانی می شود.

صفحه html

<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 (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>

تابع getVote() عملیات زیر را انجام می دهد:

  1. یک شیء XMLHttpRequest ایجاد می کند.
  2. تابعی تعیین می کند که بعد از آماده شدن پاسخ سرور اجرا شد .
  3. درخواست را به یک فایل در سرور ارسال می کند.

توجه داشته باشید که یک پارامتر  به URL اضافه می شود (با مقدار گزینه yes یا no)

فایل پی اچ پی

صفحه PHP در سرور که توسط جاوااسکریپت فراخوانی می شود دارای نام “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>

هر وقت مقداری از طرف  از جاوا اسکریپت ارسال شود، موارد زیر اتفاق می افتد:

  1. محتوای “فایل poll_result.txt” را خوانده می شود.
  2. محتویات فایل را در متغیرها قرار گرفته و به متغیر انتخابی یک واحد اضافه می شود.
  3. نتیجه را در فایل poll_result.txt می نویسد.
  4. یک خروجی گرافیکی از نتیجه نظرسنجی نشان داده می شود.

ساختار فایل متنی

فایل متنی (poll_result.txt) جایی است که داده های نظرسنجی را ذخیره می کنیم.

این فایل دارای ساختار زیر است:

0||0

که شماره اول نشان دهنده رای  “بله” است، شماره دوم نشان دهنده رای  “نه” .

توجه داشته باشید که باید وب سرور اجازه تغییر دادن فایل را داشته باشد و هیچگاه اجازه دسترسی ویرایش همگانی را ندهید.

مطالب مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فهرست مطالب