بسم الله الرحمن الرحيم
مقدمة
كثر في الآونه الأخيرة الحديث عن تقنية AJAX التفاعلية. حيث تعد تقنية AJAX واحدة من أهم المعالم التقنية للويب 2 أو الجيل الجديد من مواقع الويب.
تعمل AJAX على جلب و تحديث البيانات في صفحة إنترنت دون إعادة تحميل الصفحة بشكل كامل وهذا ما يجعل تطبيقات AJAX تفاعليه للغاية مثل تطبيقات سطح المكتب.
عادة ما تعتمد تطبيقات AJAX على كائن برمجي متوفر في معظم متصفحات الإنترنت الحديثة وهو تصنيف XmlHttpRequestويتم تخليق كائن من هذا التصنيف و هو يتولى عملية جلب و تحديث البيانات من الخادم ولكن هذا التصنيف مبني بطرق متباينة في متصفحات الإنترنت المختلفة وأسوئها هو متصفح إنترنت إكسبلورر حيث تم بناء التصنيف كـActiveX control مما قد يؤدي إلى ظهور رسالة تحذيرية من مخاطر الـActiveX
خطوات العمل
نبدأ أولا بملف php الذي يلعب دور المحرك حيث يمكنك برمجة كل ما يحلو لك حتى الإتصال بقاعدة بيانات و جلب المعلومات منها في هذا الملف. في هذا المثال سوف نجعل الـphp تطبع رسالة مكررة 33 مرة بإستخدام حلقة تكرارية بسيطة.
سوف نسمي الملف MyCutePage.php لاحظ أننا سوف نستخدمه لاحقاً.
في المثال السابق قمنا بتعريف متغير نصي يحوي عبارة الله أكبر ثم إستخدمنا الحلقة لكتابة عبارة سبحان الله 33 مرة في 33 سطر منفصل ثم بعد ذلك سنكتب محتوى هذا المتغير في DIV والتي لها المعرف MySweetDivكود 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; ?>';
الملف السابق لا يتم تحميله عند تحميل الصفحة الرئيسية خاصتك بينما يتم تحميله في حالة تنفيذ حدث ما و لذلك فإننا لن ندرجه من البداية في صفحتك بل عند تنفيذ حدث ما سنقوم بإنشاء وسوم أو Tag الإدراج بشكل ديناميكي
كلنا نعرف وسوم إدراج JavaScript
لكننا لن ندرج ملف الـ JavaScript بشكل مباشر منذ بداية تحميل الصفحة بل عند تنفيذ حدث ما و لهذا نحتاج لإنشاء الكود السابق بشكل ديناميكيكود PHP:<script type="text/javascript" src="MyJavaScript.js"></script>
الملف التالي سوف نسميه Ajax.js وهو الذي سننفذ فيه الحركة السابقة
أولا نستدعي عنوان المجلد الذي يحوى الصفحة و نضعه في المتغير urlكود 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);}
ثانيا نحسب طول العنوان (عدد الحروف) من بداية العنوان و حتى أخر علامة "/" وذلك لإستبعاد إسم الملف من العنوان ثم نضع هذه القيمة في المتغير 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
وهو يقوم بإدراج الملف الذي أرسلنا إسمه للدالة وأخيرا تقوم الدالة بإلحاق هذا العنصر في نهاية صفحتك الرئيسية.
الأن نكتب ملفك الرئيسي الذي يراه زوار موقعك
ببساطة شديدة ندرج ملف الـ JavaScript ثم نضع عنصر من النوع div لإستقبال الرسالة و أخيرا زر لتنفيذ الحدث وهو مناداة الدالة ajax_do الموجودة في ملف الـ JavaScript وإرسال إسم ملف الـ PHP كمتغير للدالة.كود 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>
الخلاصة
الطريقة التي عرضت لها ميزة واحدة فقط و هي أنها تسمح لك بجلب المعلومات من موقع أخر غير موقعك حيث أن هذا غير مسموح به في كائن XmlHttpRequest لكنها تعاني من مشكلة كبيرة و هي أن الطلب يجب أن يكون من نوع GET فقط و لا يمكن أن يكون من النوع POST
كافة الملفات التي إستخدمتها موجودة بالمرفق
أتمنى أن أكون قد وفقت في عرض الفكرة و منتظر ردودكم
رد مع اقتباس
