تستخدم 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) سيتم حصول مايلي :
- إيجاد اسم مطابق للأحرف التي تم ارسالها من الجافاسكربت .
- ان لم يتم ايجاد مطابقة سيتم ارسال جملة "لايوجد اقتراحات" .
- ان تم إيجاد مطابقة أو أكثر عندها سيتم ارسال استجابة لجميع تلك الأسماء .
- يتم إرسال الاستجابة الى المؤشر txtHint .
ليست هناك تعليقات:
إرسال تعليق