Ajax

استخدام AJAX مع صفحات الويب PHP و MySQL و xml و RSS مع الأمثلة

سجين القدر
اخر تحديث :

مقدمة AJAX و PHP



ان لغة AJAX هي تحديث جزء من صفحة الويب بدون تحديث الصفحة كلها .



ماذا يجب أن تعرف


قبل البدء بلغة AJAX يجب أن تكون على علم باللغات التالية :

  • HTML / XHTML

  • CSS

  • JavaScript / DOM


ان أردت دراسة هذه المناهج واللغات أولاً يمكنك زيارة للمعهد .



ماهي لغة AJAX ؟



  • ان لغة AJAX هي اختصار Asynchronous JavaScript and XML هي الاستخدام الغير متزامن مع الجافاسكربت JavaScript و XML .

  • ان لغة AJAX هي تقنية إنشاء صفحات ويب بسرعة و بأكثر فعالية .


تسمح لك لغة AJAX بالتطوير بشكل غير متزامن من خلال تبادل كمية قليلة من البيانات مع السيرفر أي ما خلف الكواليس . و ذلك يعني يمكنك التعديل على جزء معين من صفحة النت و بدون تحديث الصفحة كلها .

يجب على الصفحات التقليدية ( التي لا تستخدم AJAX ) تحديث الصفحة كلها اذا أردت تغير شيء معين من الصفحة .

مثال عن التطبيقات التي تستخدم AJAX هي : Google Maps و Gmail و Youtube و Facebook .



كيف تعمل AJAX






تعتمد لغة AJAX على قوانين الانترنت


تعتمد لغة AJAX على قوانين الانترنت كما تستخدم المزيج من :

  • كائن XMLHttpRequest ( لتبادل البيانات بشكل غير متزامن مع السيرفر ) .

  • JavaScript/DOM : لعرض او التفاعل مع المعلومات .

  • CSS : لتصميم شكل البيانات .

  • XML : تستخدم عادة لتغيير نقل المعلومات .


تعتبر لغة AJAX خاصة بتطبيقات و قواعد الاساسية للمتصفح .



اقتراحات جووجل Google


تم إنشاء لغة AJAX عام 2005 من خلال شركة Google قسم اقتراحات جوجل .

يستخدم قسم اقتراحات جووجل لغة AJAX لإنشاء واجهة صفحات أكثر فعالية . عند الكتابة في صندوق محرك البحث جووجل , سترسل الجافاسكربت الأحرف الى السيرفر و سيعيد السيرفر قائمة من الاقتراحات .



ابدء باستخدام AJAX اليوم


تعتمد لغة AJAX على المبادئ الحالية . تم استخدام هذه المبادئ من خلال المطورون لعدة سنوات . ستتعلم المزيد في الدروس القادمة عن كيفية عمل لغة AJAX .



استخدام AJAX مع PHP



تستخدم AJAX لإنشاء تطبيقات أكثر فعالية و احترافية .



مثال عن PHP


يظهر المثال التالي كيف يمكن لصفحة الانترنت التواصل مع السيرفر بينما يكتب المستخدم أحرف اسمه في حقل النص .


شرح المثال – صفحة HTML


عند يقوم المستخدم بكتابة اسم في حقل الإدخال عندها ستعمل الدالة showHint() المرتبطة مع الحدث onkeyup .
<html>
<head>
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// هذا الكود للمتصفحات اوبرا و سفاري و جوجل كروم و فايرفوكس و اكسبلورر 7

xmlhttp=new XMLHttpRequest();
}
else
{// هذا الكود لاكسبلورر إصدار 5 و 6xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body><p><b> إبدء بكتابة اسمك في الحقل التالي :</b></p>
<form>
الاسم : <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>الإقتراحات : <span id="txtHint"></span></p>
</body>
</html>


شرح مصدر الكود


إذا كان حقل الإدخال فارغ (str.length==0) عندها ستقوم الدالّة بمسح المحتوى من تلميح الحقل و إنهاء الوظيفة أو الدالّة .

اذا لم يك حقل الإدخال فارغ عندها ستقوم الدالّة showHint() بعمل مايلي :

  • إنشاء كائن XMLHttpRequest .

  • إنشاء دالّة حيث ستعمل اذا كان استجابة السيرفر جاهزة .

  • إرسال طلب خارجي الى ملف في السيرفر .

  •  لاحظ بأن المدخل (q) تم إضافته الى الرابط التشعبي مع محتوى حقل الإدخال .





ملف PHP


تم استدعاء الصفحة على السيرفر من خلال الجافاسكربت لملف PHP يسمى gethint.php
يفحص gethint.php في مصدر الكود عن مصفوفة الأسماء ثم يعيد الأسماء المقترحة لتظهر على المتصفح :

<?php
/* إملأ المصفوفة بالأسماء التالية */
$a[]=”منى”
$a[]=”محمد”
$a[]=”ملك”
$a[]=”حسام”
$a[]=”أنس”
$a[]=”صالح”
$a[]=”سمير”
$a[]=”أحمد”
$a[]=”قصي”
$a[]=”جمانة”
$a[]=”كندة”
$a[]=”صفوت”
$a[]=”فادي”
$a[]=”بشار”
$a[]=”وحيد”
$a[]=”سلوى”
$a[]=”صلاح”
$a[]=”ناجي”
$a[]=”حامد”
$a[]=”حمود”
$a[]=”إيناس”
$a[]=”عبادة”
$a[]=”تيم”
$a[]=”ميسون”
$a[]=”حمد”
$a[]=”ليزا”
$a[]=”صفاء”
$a[]=”رامي”
$a[]=”وسام”
$a[]=”رهف”

// استخدم القيمة q من خلال الرابط

$q=$_GET["q"];
if (strlen($q) > 0)
{
$hint=”";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint==”")
{
$hint=$a[$i];
}
else
{
$hint=$hint.” , “.$a[$i];
}
}
}
}
/*
النتيجة ” لايوجد اقتراحات” اذا لم يتم ايجاد أي تلميحات أو النتيجة بالقيمة الصحيحة .
*/
if ($hint == “”)
{
$response=”no suggestion”;
}
else
{
$response=$hint;
}
// كود الاستجابة
echo $response;
?>


شرح الكود السابق


اذا تم ارسال أي نص من خلال الجافاسكربت (strlen($q) > 0) سيتم حصول مايلي :

  1. إيجاد اسم مطابق للأحرف التي تم ارسالها من الجافاسكربت .

  2. ان لم يتم ايجاد مطابقة سيتم ارسال جملة "لايوجد اقتراحات" .

  3. ان تم إيجاد مطابقة أو أكثر عندها سيتم ارسال استجابة لجميع تلك الأسماء .

  4. يتم إرسال الاستجابة الى المؤشر txtHint .





استخدام AJAX مع MySQL



تستخدم AJAX مع تبادل البيانات من خلال قواعد البيانات .



أمثلة مع قواعد البيانات  Database

في المثال التالي يشرح كيف يمكن لصفحة الويب إظهار البيانات من خلال قواعد البيانات باستخدام AJAX :


شرح المثال – صفحة HTML


عندما يختار المستخدم دولة من خلال القائمة المنسدلة سيتم استدعاء الدالّة showUser() من خلال الحدث onchange :
<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;
if (str==”")
{
document.getElementById(“txtHint”).innerHTML=”";
return;
}
if (window.XMLHttpRequest)
{
/*
يعمل على IE7+, Firefox, Chrome, Opera, Safari
*/
xmlhttp=new XMLHttpRequest();
} else {
/*
يعمل على IE5 و IE6
*/
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”getcustomer.asp?q=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body><form>
<select name="users" onchange="showUser(this.value)">
<option value="">اختر بلد الزبون :</option>
<option value="1">سوريا</option>
<option value="2">تركيا</option>
<option value="3">أمريكا</option>
<option value="4">أوروبا</option>
</select>
</form>
<br />
<div id="txtHint"><b> 
هذا الزبون من أشهر الزبائن لدينا
</b></div></body>
</html>




تعمل الوظيفةshowCustomer()  كالتالي

  • يفحص اذا تم اختيار الزبون من القائمة .

  • إنشاء كائن XMLHttpRequest .

  • إنشاء function واستدعائه عندما تكون استجابة السيرفر جاهزة .

  • ارسال الطلب الى ملف على السيرفر .

  • لاحظ بأن القيمة q تم إضافتها الى الرابط URL مع محتوى القائمة المنسدلة .





ملف ال PHP


تم استدعاء الصفحة على السيرفر من خلال الجافاسكربت لملف PHP يسمى getuser.php .
يقوم الكود في getuser.php بتفعيل أوامر من قاعدة البيانات MySQL و إعادة النتيجة في جدول HTML .
<?php
$q=$_GET["q"];$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user 
WHERE id = '".$q."'";
$result = mysql_query($sql);

echo "<table border='1'>

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";

mysql_close($con);
?>


شرح الكود


عند ارسال الأمر في ملف PHP مستخدمين الجافاسكربت سيحدث التالي:

  1. يفتح PHP اتصال مع سيرفر قاعدة البيانات MySQL .

  2. سيتم إيجاد اسم الدولة المطلوب .

  3. سيتم إنشاء جدول و يملىء بالبيانات و سيتم ارساله مجدداً الى مؤشر  txtHint.





استخدام AJAX و XML



تستخدم AJAX مع تبادل البيانات من خلال ملفات XML .



أمثلة AJAX مع XML


في المثال التالي يشرح كيف يمكن لصفحة الويب إظهار البيانات من خلال ملف XML باستخدام AJAX :

اضغط على الرابط



شرح المثال – صفحة HTML


عند اختيار مستخدم CD من القائمة المنسدلة سيتم استخدام الدالّة showCD() مع الحدث onchange .
<html>
<head>
<script type="text/javascript">
function showCD(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcd.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body><form>
اختر اسم CD :
<select name="cds" onchange="showCD(this.value)">
<option value="">اختر CD</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<div id="txtHint"><b>ستظهر معلومات الفنانين هنا</b></div></body>
</html>

تقوم الدالّة showCD() بعمل مايلي :

  • فحص فيما اذا تم اختيار فنان من CD .

  • إنشاء الكائن XMLHttpRequest .

  •  إنشاء دالّة عندما تكون استجابة السيرفر جاهزة .


ارسال الطلب الى ملف على السيرفر .
لاحظ بأن القيمة q تم إضافتها الى الرابط URL مع محتوى القائمة المنسدلة .



الملف PHP


تم استدعاء الصفحة على السيرفر من خلال الجافاسكربت لملف PHP يسمى getcd.php .
يحمّل كود PHP ملف XML "cd_catalog.xml" ثم يقوم بتشغيل الأمر في ملف XML ثم يعيد النتيجة ويظهرها على ملف HTML :

<?php
$q=$_GET["q"];$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->
getElementsByTagName('ARTIST');

for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1)
{
if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
{
$y=($x->item($i)->parentNode);
}
}
}$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{
//Process only element nodes
if ($cd->item($i)->nodeType==1)
{
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br />");
}
}
?>



عندما يتم ارسال الأمر من الجافاسكربت الى صفحة PHP سيتم حدوث مايلي :

  1. يقوم PHP بإنشاء كائن XML DOM .

  2. إيجاد جميع وسوم الفنانين <artist> التي تطابق الاسم المرسل من الجافاسكربت .

  3. سيتم عرض معلومات الألبوم .





البحث المباشر مع AJAX



يمكن استخدام AJAX لإنشاء محركات بحث أكثر فعالية و صديقة للبيئة .



البحث المباشر


سيقوم المثال التالي بعملية بحث مباشرة حيث ستشاهد نتيجة البحث بينما تقوم بكتابة الكلمات .

مثال مباشر بكيفية

لدى البحث المباشر مزايا جميلة يختلف عن البحث التقليدي

  • تظهر النتيجة عندما تكتب ماتبحث عنه.

  • عرض النتائج بحسب الكلمات التي تكتبها .

  • عندما تصبح النتائج ضيقة جداً قم بحذف بعض الأحرف لتشاهد حدود النتيجة .





شرح المثال – صفحة HTML


عندما يقوم المستخدم بكتابة كلمة في حقل الكتابة سيتم عمل الدالّة showResult() مع بداية عمل الحدث onkeyup .
<html>
<head>
<script type="text/javascript">
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body><form>
<input type="text" size="30" onkeyup="showResult(this.value)" />
<div id="livesearch"></div>
</form>

</body>
</html>


شرح الكود


اذا لم يتم إدخال أي كلمة في حقل الكتابة ستقوم الدالّة بحذف محتوى البحث وإنهاء الدالّة .

اذا تم ادخال كلمة عندها ستقوم الدالّة showResult() بعمل مايلي :

  • إنشاء الكائن XMLHttpRequest .

  •  إنشاء دالّة عندما تكون استجابة السيرفر جاهزة .

  • ارسال الطلب الى ملف على السيرفر .

  • لاحظ بأن القيمة q تم إضافتها الى الرابط URL مع محتوى حقل الكتابة .





ملف PHP


يستدعى الملف الموجود على السيرفر من خلال الجافاسكربت وبالملف PHP ويسمى  livesearch.php .
يبحث كود PHP في ذلك الملف عن ملف XML بحيث يطابق العناوين التي يتم البحث عنها ثم يتم إعادة النتيجة كالتالي
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1)
{
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>



إن تم ارسال نص من خلال الجافاسربت سيتم حدوث مايلي

  1.  تحميل ملف XML إلى كائن XML DOM جديد .

  2.  الدوران من خلال الحلقات لجميع عناصر <title> وذلك لإيجاد النص المطابق والذي تم ارساله من خلال الجافاسكربت .

  3. ضبط الرابط و العنوان الصحيحين في المتغير $response واذا تم العثور على أكثر من مطابقة سيتم إضافة جميع المتغيرات معاً .

  4. ان لم يتم أي مطابقة عندها سيقوم المتغير $response بوضع عبارة "لايوجد اقتراحات" .





استخدام AJAX مع تغذية RSS



تستخدم تغذية RSS لقراءة آخر الأخبار من أي موقع يتم الاشتراك به .




في المثال التالي سيتم اختيار احدى تغذيات RSS والتي سيتم تحميلها من السيرفر أو مباشرة من خلال رابط تغذية الموقع.


مثال مشروح – صفحة HTML


عندما يختار المستخدم احدى أنواع التغذية من القائمة المنسدلة سيتم عمل الدالّة showResult() والذي بدوره مرتبط مع الحدث عند التغيير onchange .
<html>
<head>
<script type="text/javascript">
function showRSS(str)
{
if (str.length==0)
{
document.getElementById("rssOutput").innerHTML="";
return;
}
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getrss.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body><form>
<select onchange="showRSS(this.value)">
<option value="">اختر موقع التعذية</option>
<option value="Google">دروس HTML</option>
<option value="MSNBC">المعهد العربي للبرمجة</option>
</select>
</form>
<br />
<div id="rssOutput">تم إنشاء تغذية Rss وهي مصنفةهنا</div>
</body>
</html>


يقوم الدالّة showResult() بما يلي :



  • فحص تغذية RSS عند اختياره .

  • إنشاء الكائن XMLHttpRequest .

  • إنشاء دالّة عندما تكون استجابة السيرفر جاهزة .

  • ارسال الطلب الى ملف على السيرفر .

  • لاحظ بأن القيمة q تم إضافتها الى الرابط URL مع محتوى القائمة المنسدلة .





ملف PHP

يتم استدعاء الصفحة من السيرفر من خلال الجافاسكربت في الأعلى من خلال صفحة PHP المسماة getrss.php :
<?php
//get the q parameter from URL
$q=$_GET["q"];//find out which feed was selected
if($q=="Google")
{
$xml=("http://www.w3arabiconline.com/feed");
}
elseif($q=="MSNBC")
{
$xml=("http://www.w3arabiconline.com/feed");
}
$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);

//get elements from "<channel>"
$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;

//output elements from "<channel>"
echo("<p><a href='" . $channel_link
. "'>" . $channel_title . "</a>");
echo("<br />");
echo($channel_desc . "</p>");

//get and output "<item>" elements
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++)
{
$item_title=$x->item($i)->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$item_link=$x->item($i)->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$item_desc=$x->item($i)->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;

echo ("<p><a href='" . $item_link
. "'>" . $item_title . "</a>");
echo ("<br />");
echo ($item_desc . "</p>");
}
?>


عند ارسال أمر التغذية من خلال الجافاسكربت عندها سيحدث مايلي :



  • فحص اي واحدة من التغذية تم اختيارها .

  • إنشاء كائن XML DOM جديد .

  • تحميل ملف RSS في متغير xml .

  • فك و إظهار العناصر من العنصر <channel> .

  • فك و إظهار العناصر من العنصر <item> .





استخدام AJAX مع التصويت poll



في المثال التالي سيتم اختيار و اظهار نتيجة التصويت بدون تحميل .





المثال المشروح – صفحة HTML


عندما يختار المستخدم خيار نعم أو لا من المثال السابق سيتم استدعاء الدالّة getVote() و التي تظهر بدورها مع الحدث onclick
<html>
<head>
<script type="text/javascript">
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body><div id="poll">
<h3>هل تحب لغة PHP</h3>
<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>


تقوم الدالّة getVote() بما يلي :



  • إنشاء الكائن XMLHttpRequest .

  •  إنشاء دالّة عندما تكون استجابة السيرفر جاهزة .

  •  ارسال الطلب الى ملف على السيرفر .

  •  لاحظ بأن القيمة vote تم إضافتها الى الرابط مع القيمة المختارة .





ملف PHP


يتم استدعاء صفحة 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>نعم : </td>
<td>
<img src="images/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>لا : </td>
<td>
<img src="images/poll.gif"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>


يتم ارسال القيمة من خلال الجافاسكربت ثم يحصل مايلي :



  • الحصول على محتوى ملف نتيجة التصويت poll_result.txt .

  •  وضع محتوى الملف في متغير و إضافة واحد إلى المتغير الذي تم اختياره .

  •  كتابة النتيجة في ملف poll_result.txt .

  •  إظهار صورة توضيحية عن نتيجة التصويت .





الملف النصي


نستخدم الملف النص poll_result.txt لتخزين بيانات نتيجة التصويت .
يتم تخزينها و عرض نتيجتها كما يلي :
0||0

يعبر الرقم الأول من اليسار على اختيار "نعم" في نتيجة التصويت أما الرقم الثاني يعبّر عن اختيار "لا" في نتيجة التصويت .

ملاحظة : تذكر بالسماح للسيرفر للتعديل على الملف النصي و لا تعطي صلاحية لأي شخص للتعديل عليه فقط السيرفر .



تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات