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

آج ایکس ووٹنگ

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

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

Yes:
No:

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

  • ایچ تی ایمل فرم
  • JavaScript
  • PHP ਪੰਨਾ
  • نتائج کو جمع کرنے والا ٹیکسٹ فائل

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

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

<html>
<head>
<script src="poll.js"></script> 





Do you like PHP and AJAX so far?



Yes: 



No:

例子解释 - HTML 表单

正如您看到的，上面的 HTML 页面包含一个简单的 HTML 表单，其中的

元素带有两个单选按钮。

表单这样工作：

  • 当用户选择 "yes" 或 "no" 时，会触发一个事件
  • 当事件触发时，执行 getVote() 函数
  • 围绕该表单的是名为 "poll" 的
    。当数据从 getVote() 函数返回时，返回的数据会替代该表单。

文本文件

文本文件 (poll_result.txt) 中存储来自投票程序的数据。

它类似这样：

0||0

第一个数字表示 "Yes" 投票，第二个数字表示 "No" 投票。

注释：记得只允许您的 web 服务器来编辑该文本文件。不要让其他人获得访问权，除了 web 服务器 (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() 
{ 
 if (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() ਫੰਕਸ਼ਨ

ਜਦੋਂ ਯੂਜ਼ਰ ਐੱਚਟੀਐੱਮਐੱਲ ਫਾਰਮ ਵਿੱਚ "ਹਾਂ" ਜਾਂ "ਨਹੀਂ" ਚੁਣੇ ਤਾਂ ਇਹ ਫੰਕਸ਼ਨ ਚਲੇਗਾ。

  1. ਸਰਵਰ ਨੂੰ ਭੇਜਣ ਵਾਲੇ URL (ਫਾਈਲ ਨਾਮ) ਨਿਰਧਾਰਿਤ ਕਰੋ
  2. URL ਨੂੰ (vote) ਪੈਰਾਮੀਟਰ ਜੋੜੋ ਅਤੇ ਪ੍ਰਵੇਸ਼ ਖੇਤਰ ਦੇ ਸਮਾਚਾਰ ਨੂੰ ਲੈ ਕੇ ਜਾਓ
  3. ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਸੰਖਿਆ ਜੋੜੋ ਤਾਂ ਸਰਵਰ ਕੈਸ਼ ਫਾਈਲ ਦਖਲ ਨਾ ਕਰੇ
  4. GetXmlHttpObject ਫੰਕਸ਼ਨ ਨੂੰ ਬੁਲਾਉਣ ਨਾਲ XMLHTTP ਆਬਜੈਕਟ ਬਣਾਓ ਅਤੇ ਅਲੋਚਨਾ ਦੇ ਹੋਣ 'ਤੇ stateChanged ਫੰਕਸ਼ਨ ਚਲਾਓ
  5. ਦਿੱਤੇ ਹੋਏ URL ਨਾਲ XMLHTTP ਆਬਜੈਕਟ ਖੋਲ੍ਹੋ
  6. ਸਰਵਰ ਨੂੰ HTTP ਬੇਨਤੀ ਭੇਜੋ

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>نتائج:</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. فائل کا محتوا متغیر میں رکھنا، اور منتخب متغیر کو 1 سے جمع کیا جانا
  3. نتائج "poll_result.txt" فائل میں لکھنا
  4. تصویری ووٹ کا نتیجہ نکالنا