بسم الله الرحمن الرحيم
مقدمة
كثر في الآونه الأخيرة الحديث عن تقنية AJAX التفاعلية. حيث تعد تقنية AJAX واحدة من أهم المعالم التقنية للويب 2 أو الجيل الجديد من مواقع الويب.
تعمل AJAX على جلب و تحديث البيانات في صفحة إنترنت دون إعادة تحميل الصفحة بشكل كامل وهذا ما يجعل تطبيقات AJAX تفاعليه للغاية مثل تطبيقات سطح المكتب.
عادة ما تعتمد تطبيقات AJAX على كائن برمجي متوفر في معظم متصفحات الإنترنت الحديثة وهو تصنيف XmlHttpRequestويتم تخليق كائن من هذا التصنيف و هو يتولى عملية جلب و تحديث البيانات من الخادم ولكن هذا التصنيف مبني بطرق متباينة في متصفحات الإنترنت المختلفة وأسوئها هو متصفح إنترنت إكسبلورر حيث تم بناء التصنيف كـActiveX control مما قد يؤدي إلى ظهور رسالة تحذيرية من مخاطر الـActiveX
خطوات العمل
نبدأ أولا بملف php الذي يلعب دور المحرك حيث يمكنك برمجة كل ما يحلو لك حتى الإتصال بقاعدة بيانات و جلب المعلومات منها في هذا الملف. في هذا المثال سوف نجعل الـphp تطبع رسالة مكررة 33 مرة بإستخدام حلقة تكرارية بسيطة.
سوف نسمي الملف MyCutePage.php لاحظ أننا سوف نستخدمه لاحقاً.
كود PHP:
<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Content-Type: text/html;charset=windows-1256");
$html="الله أكبر";
for($i=0;$i<33;$i++)
$html.= "<br><b>سبحان الله</b>";
?>
div = document.getElementById('MySweetDiv');
div.innerHTML = '<?php echo $html; ?>';
في المثال السابق قمنا بتعريف متغير نصي يحوي عبارة الله أكبر ثم إستخدمنا الحلقة لكتابة عبارة سبحان الله 33 مرة في 33 سطر منفصل ثم بعد ذلك سنكتب محتوى هذا المتغير في DIV والتي لها المعرف MySweetDiv
الملف السابق لا يتم تحميله عند تحميل الصفحة الرئيسية خاصتك بينما يتم تحميله في حالة تنفيذ حدث ما و لذلك فإننا لن ندرجه من البداية في صفحتك بل عند تنفيذ حدث ما سنقوم بإنشاء وسوم أو Tag الإدراج بشكل ديناميكي
كلنا نعرف وسوم إدراج JavaScript
كود PHP:
<script type="text/javascript" src="MyJavaScript.js"></script>
لكننا لن ندرج ملف الـ JavaScript بشكل مباشر منذ بداية تحميل الصفحة بل عند تنفيذ حدث ما و لهذا نحتاج لإنشاء الكود السابق بشكل ديناميكي
الملف التالي سوف نسميه Ajax.js وهو الذي سننفذ فيه الحركة السابقة
كود PHP:
url = document.location.href;
xend = url.lastIndexOf("/") + 1;
var base = url.substring(0, xend);
function ajax_do (url) {
if (url.substring(0, 4) != 'http') {
url = base + url;
}
var jsel = document.createElement('SCRIPT');
jsel.type = 'text/javascript';
jsel.src = url;
document.body.appendChild (jsel);}
أولا نستدعي عنوان المجلد الذي يحوى الصفحة و نضعه في المتغير url
ثانيا نحسب طول العنوان (عدد الحروف) من بداية العنوان و حتى أخر علامة "/" وذلك لإستبعاد إسم الملف من العنوان ثم نضع هذه القيمة في المتغير xend.
للتوضيح أكثر نفرض لو أن الملف الذي نعمل به إسمه Me.js فعند تنفيذ الأمر
url=document.location.href
فإن المتغير url سيحتوي على شيء من هذا القبيل
http://www.yoursite.com/yourdir/Me.js
ولكننا نحتاج لأن يحتوي المتغير على ما يلي
http://www.yoursite.com/yourdir/
ثالثا سنقص من المتغير url الحروف من البداية و حتى القيمة التي يحويها xend ونضع النص الجديد في متغير أخر يدعى base
الأن سنكتب الدالة التي تعتبر أساس المحاكاة للـ AJAX والتي تسمى ajax_do وتأخذ متغير واحد يسمى url والذي يمثل عنوان ملف PHP الذي يؤدي دور المحرك (MyCutePage.php) .
الدالة تتحقق من العنوان المرسل إليها ما إذا كان كاملا مثل
http://www.yoursite.com/yourdir/MyCutePage.php
أو لا فإذا أرسلنا لها إسم الملف فقط فسوف تلحق به محتوى المتغير base حتى يكون العنوان كاملا
ثم تقوم الدالة بتخليق عنصر جديد وهو وسوم إدراج JavaScript والذي يسمى SCRIPT
وهو يقوم بإدراج الملف الذي أرسلنا إسمه للدالة وأخيرا تقوم الدالة بإلحاق هذا العنصر في نهاية صفحتك الرئيسية.
الأن نكتب ملفك الرئيسي الذي يراه زوار موقعك
كود PHP:
<html dir="rtl">
<head>
<title>مثال تجريـــــبي</title>
<script type="text/javascript" src="Ajax.js"></script>
</head>
<body>
<div id="MySweetDiv"></div>
<input type="button" onclick="ajax_do ('MyCutePage.php');" value="إضغط هنا" />
</body>
</html>
ببساطة شديدة ندرج ملف الـ JavaScript ثم نضع عنصر من النوع div لإستقبال الرسالة و أخيرا زر لتنفيذ الحدث وهو مناداة الدالة ajax_do الموجودة في ملف الـ JavaScript وإرسال إسم ملف الـ PHP كمتغير للدالة.
الخلاصة
الطريقة التي عرضت لها ميزة واحدة فقط و هي أنها تسمح لك بجلب المعلومات من موقع أخر غير موقعك حيث أن هذا غير مسموح به في كائن XmlHttpRequest لكنها تعاني من مشكلة كبيرة و هي أن الطلب يجب أن يكون من نوع GET فقط و لا يمكن أن يكون من النوع POST
كافة الملفات التي إستخدمتها موجودة بالمرفق
أتمنى أن أكون قد وفقت في عرض الفكرة و منتظر ردودكم