پی ایچ پی اور ایجیکس ووٹنگ

ایج ایکس اے ووٹنگ

اس ایج ایکس اے مثال میں، ہم ایک ووٹنگ پروگرام دکھائیں گے، جس میں ویب پینج نکلے بغیر نتائج حاصل کئے جاسکتے ہیں。

اب تک آپ پی ایچ پی اور ایج ایکس اے کو پسند کرتے ہیں؟

Yes:
No:

اس مثال میں چار عناصر شامل ہیں:

  • ایچ تی ایمل فرم
  • JavaScript
  • PHP پیج
  • نتائج کو ذخیرہ کرنے والا متن فائل

ایچ تی ایمل فرم

یہ ایچ تی ایمل پینج ہے۔ یہ ایک سادا ایچ تی ایمل فرم اور جاوا اسکریپٹ فائل کا کنکشن شامل ہے:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>آیا تا به حال از PHP و AJAX خوشتان آمده است؟</h2>
<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>

توضیح مثال - فرم HTML

همانطور که مشاهده می‌کنید، صفحه HTML بالا یک فرم ساده HTML دارد که شامل دو دکمه رادیویی <div> است.

اینگونه فرم کار می‌کند:

  • هنگامی که کاربر "بله" یا "خیر" را انتخاب می‌کند، یک رویداد فعال می‌شود
  • هنگامی که رویداد فعال می‌شود، تابع getVote() اجرا می‌شود
  • فرم حول "poll" نام دارد <div>. هنگامی که داده‌ها از تابع getVote() بازمی‌گردد، داده‌های بازگشتی جایگزین فرم می‌شود.

فایل متنی

داده‌های برنامه رای در فایل متنی (poll_result.txt) ذخیره می‌شود.

مثل این است که:

0||0

شماره اول نشان‌دهنده رای "بله" است، شماره دوم نشان‌دهنده رای "خیر" است.

توضیحات:به یاد داشته باشید که فقط سرور وب شما مجاز به ویرایش این فایل متنی است. اجازه دسترسی به دیگران را، به جز سرور وب (PHP)، ندهید.

JavaScript

JavaScript کد "poll.js" می‌باشد و با مستند HTML متصل می‌شود:

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged()} 
{ 
 اگر (xmlHttp.readyState==4 یا xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 
function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}

توضیح مثال:

stateChanged() اور GetXmlHttpObject فونکشن جیسا ہی پی ایچ پی اور ایجیکس درخواست اس سیکشن کا مثال اسی طرح ہے

getVote() فونکشن

جب یوزر، HTML فرم میں "yes" یا "no" کو منتخب کرتا ہے تو اس فونکشن کو چلایا جاتا ہے

  1. سرور کو بھیجنے والی URL (فائل نام) کا تعریف کرنا
  2. URL میں پارامتر (vote) اضافہ کیا جانا، پارامتر میں ورودی فیلڈ کا مواد شامل کیا جاتا ہے
  3. ایک رینڈم نمبر اضافہ کیا جانا، تاکہ سرور کی فائل کی کینچنگ کا روکا جائے
  4. GetXmlHttpObject فونکشن کو بلایا جاتا ہے تاکہ XMLHTTP آئیجکٹ کا تخلیق کیا جائے، اور اس آئیجکٹ کو کیا جائے کہ وہ stateChanged فونکشن کو جب بھی تبدیلی ہوئی، چلائے
  5. XMLHTTP آئیجکٹ کا فتح کیا جانا، مقصد کا URL استعمال کیا جاتا ہے
  6. سرور کو HTTP درخواست جاری کرنا

PHP پیج

جائزہ کا سروے کا پیج، نامزد PHP فائل "poll_vote.php" کا سادا پیج ہے جس کو JavaScript کا کوڈ سے بلائیا جاتا ہے。

<?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];
اگر ($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. نتیجه‌های رأی‌گیری را به صورت تصویری نمایش دهید