PHP और AJAX वोटिंग

AJAX वोटिंग

इस AJAX उदाहरण में, हम एक वोटिंग प्रोग्राम दिखाएंगे, जो वेबपृष्ठ को पुनः लोड किए बिना परिणाम प्राप्त कर सकता है。

अब तक, आप PHP और AJAX को पसंद करते हैं क्या?

Yes:
No:

इस उदाहरण में चार तत्व शामिल हैं:

  • HTML फॉर्म
  • JavaScript
  • PHP पृष्ठ
  • परिणाम रखने वाला टेक्स्ट फ़ाइल

HTML फॉर्म

यह HTML पृष्ठ है। यह एक सरल HTML फॉर्म और JavaScript फ़ाइल के साथ कनेक्शन शामिल करता है:

<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> एलीमेंट दो सिंगल ऑप्शन बटनों के साथ है।

फॉर्म इस तरह काम करता है:

  • जब उपयोगकर्ता "yes" या "no" चुनता है, तो एक घटना ट्रिगर होती है
  • जब किसी घटना का ट्रिगर होता है, getVote() फ़ंक्शन चलता है
  • फॉर्म के चारों ओर "poll" नाम का <div> है। getVote() फ़ंक्शन से डाटा वापस आने पर, फॉर्म को इसके स्थान पर बदल दिया जाता है。

पाठ फ़ाइल

पाठ फ़ाइल (poll_result.txt) में वोट कार्यक्रम से आने वाले डाटा संग्रहित होता है。

यह इस तरह है:

0||0

पहला नंबर "Yes" वोट के लिए है, दूसरा नंबर "No" वोट के लिए है。

टिप्पणी:याद रखें कि केवल आपके वेब सर्वर को इस पाठ फ़ाइल को संपादित करने की अनुमति दें। अन्य को पहुंच न दें, अगर वेब सर्वर (PHP) को छोड़कर。

JavaScript

JavaScript कोड "poll.js" में संग्रहित होता है और एचटीएमएल दस्तावेज़ से जुड़ा है:

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
यदि (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
अन्यथा यदि (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}

उदाहरण व्याख्या:

stateChanged() और GetXmlHttpObject फ़ंक्शन और PHP और AJAX अनुरोध इस अनुच्छेद के उदाहरण एक साथ हैं。

getVote() फ़ंक्शन

जब उपयोगकर्ता HTML फॉर्म में "yes" या "no" चुनता है, तो यह फ़ंक्शन चलता है。

  1. सर्वर को भेजने वाले URL (फ़ाइल नाम) निर्धारित करें
  2. URL में (vote) पारामीटर जोड़ें, जिसमें इनपुट फ़ील्ड की सामग्री है
  3. एक अनानुकूल अंक जोड़ें, ताकि सर्वर फ़ाइल को कैश के रूप में न इस्तेमाल करे
  4. GetXmlHttpObject फ़ंक्शन को बुलाकर XMLHTTP ऑब्जैक्ट बनाएं और यह ऑब्जैक्ट को यह बताएं कि जब कोई परिवर्तन हो तो stateChanged फ़ंक्शन चलें
  5. दिए गए URL को उठाकर XMLHTTP ऑब्जैक्ट खोलें
  6. सर्वर को HTTP अनुरोध भेजें

PHP पृष्ठ

जेस्क्रिप्ट कोड द्वारा बुलाए जाने वाला सर्वर पृष्ठ नाम "poll_vote.php" वाला एक साधारण PHP फ़ाइल है。

<?php
$vote = $_REQUEST['vote'];
//टेक्सट फ़ाइल की सामग्री प्राप्त करें
$filename = "poll_result.txt";
$content = file($filename);
//एक अर्थदायी शब्द श्रेणी में सामग्री डालें
$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>परिणाम:</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. ग्राफिकल वोट परिणाम आउटपुट