تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )
لمقدمة :
AJAX هي اختصار لـ Asynchronous JavaScript And XML
و قد اخذت بالانتشار في عام 2005 بواسطة Google في مشروعهم Google Suggest
و هي ليست بـ "لغة برمجة" جديدة , بل هي تقنية لانشاء تطبيقات ويب تفاعلية افضل و اسرع !
بفضلها يمكن لـ JavaScript التواصل مباشرة مع الخادم ( Server ) باستخدام كائن XMLHttpRequest
حيث يمّكن هذا الكائن JavaScript من تبادل البيانات مع الخادم دون الحاجة لاعادة تحميل الصفحة في كل مرة
حيث يقوم بطلب جزء صغير من البيانات من الخادم بدلا من طلب الصفحة كاملة كما هو معلوم عند الغالبية منا
اخيراً , تقنية AJAX مدعومة في كل المتصفحات الحديثة خصوصاً متصفح Firefix المفتوح المصدر و Opera
لغات يفضل ان تلم باساسياتها قبل البدء :
الموضوع جداً بسيط و لا يتطلب منك تعلم اشياء جديدة ما دمت تلم بالاساسيات
فقط قم بنقل الاكواد الى جهازك و نفذها على خادمك المحلي ثم ابدأ بالتعديل عليها لتفهم اكثر
مثال تطبيقي :
مثالنا سيكون عبارة عن قائمة تعتمد على قائمة اخرى في اظهار عناصرها [ مثال ]
عند اختيار احد المصنعين من القائمة الاولى سيتم عرض موديلات سيارته في قائمة الثانية
اولاً : ملف الـ HTML و نموذج عرض القوائم
كود هتمل:
<html> <head> <title>ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="main.js"></script> <!-- استدعاء ملف الجافا سكربت --> </head> <body> <form name="car"> <select name="make" onChange="getInfo()"> <!-- قائمة المصنعين --> <option value="0">- Select Make</option> <option value="1">Toyota</option> <option value="2">Nissan</option> <option value="3">GMC</option> </select> </form> <div id="main"> <!-- هنا سيتم طباعة قائمة الموديلات --></div> </body></html> اسم النموذج : car , اسم قائمة المصنعين : make
( عند اختيار عنصر منها سيتم استعداء دالة getInfo من ملف الجافا سكربت
ثانياً : ملف PHP لجلب بيانات القائمة من قاعدة البيانات
كود PHP:
<?
header('Content-Type: text/html; charset=UTF-8');
$id = intval($_GET['id']); // رقم المصنع
$link = mysql_connect("localhost","root",""); // الاتصال بقاعدة البيانات
$db = mysql_select_db("car",$link); // تحديد قاعدة البيانات
$sql = "SELECT * FROM model WHERE make=$id"; // البحث في قاعدة البيانات
$result = mysql_query($sql);
echo "<select name='model'>";
echo "<option value='0'>-- Select Model</option>";
while ( $row = mysql_fetch_array($result) )
{
echo "<option value='{$row['id']}'>{$row['name']}</option>"; // طباعة عناصر القائمة
}
echo "</select>";
mysql_free_result($result);
mysql_close($link);
?>
اسم قاعدة البيانات : car ( ملف قاعدة البيانات و باقي الملفات في المرفقات )
المتغير id : يحمل رقم المصنع في قاعدة البيانات المرسل عن طريق النموذج
اذن سيقوم السكربت بالبحث في جدول موديلات السيارات ( model )
عن الموديل الذي ينتمي للمصنع رقم id ثم يطبع الناتج في القائمة model
ثالثاً : ملف الجافا سكربت الذي يطلب من الخادم و يرسل الى المتصفح
كود PHP:
var xmlHttp = new XMLHttpRequest(); // تعريف الكائن
function getInfo()
{
xmlHttp.open('get','test.php?id='+ document.car.make.selectedIndex); // ارسال الطلب
xmlHttp.onreadystatechange = handleInfo;
xmlHttp.send(null); // انهاء الطلب
}
function handleInfo()
{
if(xmlHttp.readyState == 1)
{
document.getElementById('main').innerHTML = 'loading ..';
}
else if(xmlHttp.readyState == 4)
{
var response = xmlHttp.responseText; // رد الخادم
document.getElementById('main').innerHTML = response; // طباعة القائمة
}
}
اهم خواص الكائن XMLHttpRequest
1. الخاصية onreadystatechange
تحتفظ هذه الخاصية بالدالة التي ستقوم بمعالجة طلب الخادم
2. الخاصية readyState
تعيد هذه الخاصية حالة الطلب كما يلي :
0 = لم يجهز الطلب
1 = الطلب جُهــز
2 = الطلب ارسل
3 = جاري معالجة الطلب
4 = الطلب اكتمل
3. الخاصية responseText
تعيد هذه الخاصية رد الخادم و هو هنا عناصر القائمة التي تم طباعتها في ملف الـ PHP
- كي نرسل طلب الى الخادم نحتاج الى الطريقة open و التالي تأخذ المعطيات التالية :
1. طريقة ارسال الطلب GET او POST
2. عنوان سكربت الـ php و طريقة ارسال المتغير id اليه
- كي ننهي الطلب نحتاج الى الطريقة send
اعتقد انه كل شئ اصبح واضح لكن تبقى اهم نقطة و هي ما يلي :
كود PHP:
else if(xmlHttp.readyState == 4)
{
var response = xmlHttp.responseText;
document.getElementById('main').innerHTML = response;
}
في حال اكتمل الطلب سيتم اسناد رد الخادم الى المتغير response
ثم ارساله الى الـ div ذا الاسم main اي في المكان المحدد لقائمة الموديلات
اعذروني على التقصير فانا على عجل , لمزيد من التفاصيل راجعوا الرابط التالي :
