تستخدم AJAX لإنشاء تطبيقات أكثر فعالية و احترافية .
مثال عن ASP/PHP
يظهر المثال التالي كيف يمكن لصفحة الانترنت التواصل مع السيرفر بينما يكتب المستخدم أحرف اسمه في حقل النص و باللغة العربية .
شاهد المثال المباشر
شرح المثال باستخدام showHint()
عند كتابة المستخدم أحرفاً في الحقل السابق فإن الكود
showHint() سيعمل . سيعمل الكود مع الحدث onkeyup .function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
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","gethint.asp?q="+str,true);
xmlhttp.send();
}
شرح الكود السابق
ان حقل النص فارغ (str.length==0) يقوم الكود الوظيفي بمسح محتوى txtHint و استحضار الكود الوظيفي .
ان لم يكن الحقل فارغ عندها سيقوم الكود الوظيفي
showHint() بإظهار التالي :- إنشاء كائن XMLHttpRequest .
- إنشاء كود وظيفي حيث سيعمل عندما تصبح استجابة السيرفر جاهزة .
- إرسال الطلب الى ملف خارجي على السيرفر .
- لا حظ بأن القيمة q تم اضافتها على الرابط مع محتوى حقل النص .
صفحات السيرفر ASP و PHP
تسمى الصفحة على السيرفر التي سيتم استدعائها من خلال الجافاسكربت JavaScript بصفحة السيرفر من نوع ASP و PHP .
قمنا بوضع مثالين واحد بلغة ASP و الآخر بلغة PHP .
ملف ASP
ان الكود الآمن الموجود في ملف gethint.asp يفحص في مصفوفة الأسماء ويعيد الاسم أو الأسماء المقاربة الى المتصفح :
<%response.expires=-1
dim a(30)
'إملأ المصفوفة بالأسماء
$a[]="منى"
$a[]="محمد"
$a[]="ملك"
a(4)="حسام"
a(5)="أنس"
a(6)="صالح"
a(7)="سمير"
a(8)="أحمد"
a(9)="قصي"
a(10)="جمانة"
a(11)="كندة"
a(12)="صفوت"
a(13)="فادي"
a(14)="بشار"
a(15)="وحيد"
a(16)="سلوى"
a(17)="صلاح"
a(18)="ناجي"
a(19)="حامد"
a(20)="حمود"
a(21)="إيناس"
a(22)="عبادة"
a(23)="تيم"
a(24)="ميسون"
a(25)="حمد"
a(26)="ليزا"
a(27)="صفاء"
a(28)="رامي"
a(29)="وسام"
a(30)="رهف"
// استخدم القيمة q من خلال الرابط
q=ucase(request.querystring("q"))
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
/*
النتيجة " لايوجد اقتراحات" اذا لم يتم ايجاد أي تلميحات أو النتيجة بالقيمة الصحيحة .
*/
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
ملف PHP
في المثال التالي تم كتابته بلغة PHP .
ملاحظة :
لتشغيل مثال PHP قم بتغير قيمة متغير الرابط في ملف HTML من ملف gethint.asp إلى 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;
?>
ليست هناك تعليقات:
إرسال تعليق