تصويت AJAX و PHP

تصويت AJAX

في هذا مثال AJAX، سنقوم بعرض برنامج التصويت، حيث يمكن الحصول على النتائج دون إعادة تحميل الصفحة.

هل تحب PHP وAJXA حتى الآن؟

نعم:
لا:

في هذا المثال، تتضمن أربعة عناصر:

  • نموذج HTML
  • JavaScript
  • صفحة PHP
  • ملف النص الناتج

نموذج HTML

هذا هو صفحة الـ HTML. يحتوي على نموذج HTML بسيط، بالإضافة إلى رابط إلى ملف JavaScript:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<div id="poll">
<h2>هل تعجبك PHP و AJAX حتى الآن؟</h2>
<form>
نعم: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
لا: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>

توضيح المثال - نموذج HTML

كما ترون، يحتوي الصفحة HTML العليا على نموذج HTML بسيط يحتوي على عنصر <div> يحتوي على مربعات اختيارين.

يشتغل النموذج هكذا:

  • عند اختيار المستخدم "نعم" أو "لا"، يتم تحفيز حدث
  • عند تحفيز الحدث، يتم تنفيذ دالة getVote()
  • يحيط بالاستمارة <div> المسمى "poll" عند استعادة البيانات من دالة 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() 
{ 
 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")
}

例子解释：

إرجاع objXMLHttp طلبات AJAX و PHP وظيفة stateChanged() و GetXmlHttpObject مع

النموذج في هذا الفصل مشابه.

وظيفة getVote()

  1. عندما يختار المستخدم "نعم" أو "لا" في نموذج HTML، يتم تنفيذ هذه الوظيفة.
  2. تحديد url لإرسالها إلى الخادم (اسم الملف)
  3. إضافة معامل (vote) إلى url، يحتوي على محتوى حقل الإدخال
  4. إضافة عدد عشوائي لمنع استخدام ملفات التخزين المؤقت للخادم
  5. فتح ملف XMLHTTP باستخدام url المحدد
  6. إرسال طلب HTTP إلى الخادم

صفحة PHP

الصفحة الخادمة التي يتم استدعاؤها بواسطة كود JavaScript هي ملف 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];
إذا ($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>

例子解释：

所选的值从 JavaScript 传来，然后会发生：

  1. 获取 "poll_result.txt" 文件的内容
  2. 把文件内容放入变量，并向被选变量累加 1
  3. 把结果写入 "poll_result.txt" 文件
  4. 输出图形化的投票结果