هذا هو الموضوع الثاني حول إستخدام الأجاكس في مكتبات Javascript ضمن سلسلة الأجاكس بسهولة، في المرة سابقة تحدثنا عن إستخدام الأجاكس في مكتبة jQuery وفي الحقيقة مع الإمكانيات التي توفرها هذه المكتبة تعتبر كتابة الشفرة فيها سواء كان كتابة شفرة أجاكس أو غيرها سهلة ولا تحتاج إلى تعقيد.

اليوم سنتحدث عن إستخدام الأجاكس في مكتبة MooTools ومكتبة MooTools هي مكتبة كبقية مكتبات Javascript لها مستخدميها وتوفر نسخة للتحميل حسب طلب المطور الخصائص التي سيحتاجها وذلك سيساعد على تقليل الحجم وإختيار ما تريده بالضبط.

الأجاكس في مكتبة MooTools

في مكتبة MooTools سنتعرف على كتابة الأجاكس عن طريق كائن Request وطرق مختصرة أخرى لإرسال المتغيرات مع طريقة send العامة، قبل ذلك نجهز أساسيات المثال المعد لهذا الدرس ثم ندخل في بقية التفاصيل.

كائن Request

كائن Request في مكتبة MooTools هو المسؤول عن عملية إرسال وإستقبال البيانات من الخادم إلى الصفحة عن طريق الاجاكس، كتابة الكائن تكون بهذه الطريقة:

new Request(options);

إذا أردنا كتابة الكائن ومع الخيارات المرفقه معه والتي ستحتوي على عنوان رابط الملف ونوع الإرسال وغيره من الخصائص نضمنه إلى متغير جديد بحيث يكون بهذا الشكل:

var myRequest = new Request({
     url: '/reqHandler.php'.
     method: 'get'.
     onSuccess: function(response) {
         alert(response);
     }
});

إستخدمنا حدث onSuccess ويستخدم هذا الحدث عند نجاح العملية وتوجد أحداث كثيرة تستطيع التعامل معها ضمن الكائن Request وأضعها في هذه القائمة:

  • onSuccess: هذا الحدث يتم عندما تكون الإستجابة ناجحة لإستقبال البيانات من الخادم.
  • onFailure: هذا الحدث يتم عندما تكون الإستجابة غير ناجحة (فاشلة) لإستقبال البيانات من الخادم. (مثل خطا 404)
  • onCancel: هذا الحدث يتم عندما تكون الإستجابة الطلب ملغية. (إلغاء العملية)
  • onException: هذا الحدث يتم عندما يكون هناك إستثناء عند وضع خيار رأس الكائن XMLHttpResponse.
  • onRequest: هذا الحدث يتم عندما يكون في وقت إرسال الطلب لإستقبال البيانات.
  • onComplete: هذا الحدث يتم عند حدوث نجاح أو فشل للعملية كاملة (بإستخدام onSuccess أو onFailure) أي بعد إتمام الطلب كامل.

طرق إرسال المتغيرات

بعد أن كتابة كائن Request والأحداث المطلوبة لن ترسل المتغيرات التي كتبتها حتى تُرسل لإستدعاء البيانات من الخادم وذلك عبر طريقة أو دالة send، ومهمتها إرسال الطلب إلى الخادم، طريقة إستخدامها تكون بهذا الشكل:

myRequest.send();

ويمكن أن تحتوي على المتغيرات التي تريد إرسالها إلى الخادم، وهناك طريقتين الأولى وضع المتغيرات كمصفوفة والثانية وضع المتغيرات في سطر واحد كما ستشاهد في الشفرة التالية:

myRequest.send('username=mobde3net&email=mobde3net@gmail.com');

myRequest.send({
     username: 'mobde3net',
     email: 'mobde3net@gmail.com'
});

تلاحظ الفرق البسيط في الطريقتين في كتابة المتغيرات، وهذا إختياري إذ يمكنك إرسال المتغيرات ضمن كائن myRequest قبل تنفيذ الطريقة send.

طرق أخرى لإرسال الطلب إلى الخادم

كائن Request يوفر طرق مختصرة لإرسال البيانات مثل طريقة send، وتمثل الطرق أسماء نوع الطلب أو طريقة الطلب مثل get،post،put،delete .. يمكن إرسال الطلب بهذا الشكل إذا إستخدمنا الطرق المذكورة في هذه الفقرة:

// get إرسال الطلب بطريقة
myRequest.get({ username: 'mobde3net' });
// post إرسال الطلب بطريقة
myRequest.post({ username: 'mobde3net' });
// put إرسال الطلب بطريقة
myRequest.put({ username: 'mobde3net' });
// delete إرسال الطلب بطريقة
myRequest.delete({ username: 'mobde3net' });

إرسال المتغيرات عن طريق إعداد العنصر

يمكن إرسال طلب جديد عن طريق عنصر محدد مباشرة دون إنشاء كائن Request، فمكتبة MooTools توفر إختصارات عند التعامل مع العنصر Element وهي خاصة عند التعامل مع حقل input ضمن نموذج HTML، لإرسال طلب مباشرة عن طريق عنصر form مثلاً تكون التركيبة بهذه الطريقة:

$('form').send(url);

في مثال بسيط، إذا أردنا إرسال طلب إلى الخادم عن طريق نموذج HTML، وكان رابط النموذج (قيمة خاصية action في وسم form) موجود يمكن أن نمنع النموذج من المواصلة وبدلاً من الذهاب إلى رابط آخر نقوم بإرسال طلب إلى الخادم بإضافة أو إستدعاء بيانات.

في مكتبة MooTools هناك طرق للتعامل مع العناصر مثل طريقة set أو get وتستخدم الأولى على سبيل المثال في تعديل أو إضافة عدة أشياء مثل تعديل خصائص CSS أو إضافة شفرة HTML مباشرة داخل العنصر أما الثانية لأخذ أشياء أخرى من العنصر كخصائص الوسم (Attributes) وهكذا، يمكن إستعمال المحرف send مع طريقة set وهو يقوم بنفس عمل طريقة send في كائن Request، كما يوضح المثال البسيط التالي:

$('form').set('send', {
     // في حال نجاح إستجابة الطلب
     onSuccess: function(response){
             alert(response);
     }
}).addEvent('submit', function(event){
     event.preventDefault(); // لمنع المتصفح من الإنتقال إلى رابط النموذج
     this.send(); // action إرسال الطلب وأخذ رابط النموذج من خاصية
});

مثال عملي على إستخدام الأجاكس في مكتبة MooTools

سنطبق ما تعلمناه كما في المثال العملي الموجود في الجزء الثالث من كتابة الأجاكس في Javascript وسنستخدم نفس المثال ولكن بإستخدام مكتبة MooTools بدلاً من كتابة الأجاكس من الصفر، يجب تحميل مكتبة MooTools قبل البدأ بتطبيق المثال أو أن تكون لديك مرفقة في الجهاز أو الموقع.

صفحة HTML ستكون مثل ما هي التي كتبناها في المثال العلمي خلال الجزء الثالث من كتابة الأجاكس في Javascript، وهذه شفرة HTML لهذا الدرس ( مع إستخدام لغة PHP لإستدعاء السنوات المسجلة في قاعدة البيانات في الحقل):

<?php
$connect = mysql_connect('localhost', 'root', '');
$db_connect = mysql_select_db($table, $connect);
if (!$connect) { die('Could not connect: ' . mysql_error()); }
mysql_query("set charset UTF8");
?>

<div id="form">
     <p>تطبيق بسيط يطرح حدث معين مرتبط بالسنة التي يضعها الزائر.</p>
     <form method="GET">
     <p>إختر السنة التي تم فيها الحدث
         <select name="year">
         <option selected="selected">إختر السنة</option>
        
         <?php
         $result2 = mysql_query("SELECT * FROM events WHERE event_cloned = 'N' ORDER BY event_year DESC");
         while($row = mysql_fetch_array($result2)) {
         echo '<option value="'.$row['event_year'].'">'.$row['event_year'].'</option>';
         }
         ?>
        
         </select>
    
     </p>
 </form>
 </div>

<div id="content"> </div>

التغييرات التي سنشاهدها في الصفحة ستكون عن طريق عنصر div الذي يحمل الصنف content# ، نفس الشيء لملف query.php (الملف الذي يستقبل متغيرات الصفحة للتعامل مع قاعدة البيانات في إستدعاء البيانات المطلوبة لصفحة HTML)، ليس هناك تغييرات في ملف PHP:

<?php

// شفرة الإتصال بقاعدة البيانات
$connect = mysql_connect('localhost', 'root', '');
$db_connect = mysql_select_db('test', $connect);
mysql_query("set charset UTF8");
if (!$connect) { die('لم يتم الإتصال: ' . mysql_error()); }

// تعريف المتغير event_year
// ولإستقبال هذا المتغير في إكمال الإتصال بالأجاكس
if($_GET['year']) {
     $event_year = $_GET['year'];
     $result = mysql_query("SELECT * FROM events WHERE event_year = '$event_year'");

     // عرض المعلومات من قاعدة بيانات بإستخدام التكرار
     // وبواسطة الدالة while
     while($row=mysql_fetch_array($result)) {
         echo '<div><h2>'.$row['event_name'].'</h2>';
         echo '<p>'.$row['event_description'].' <span>(تاريخ '.$row['event_date'].')</span></p>';
         echo '</div>';
     }
}
?>

كتابة الأجاكس في مكتبة MooTools

سأضع شفرة Javascript الخاصة بمكتبة MooTools، التطبيق سيكون بإستخدام كائن Request وشرحناه في الأعلى:

window.addEvent('domready',function(){
    var ajax_load = '<span class="loading">Loading</span>';
    var contentElement = $('content');
    
    $$('.year').addEvent('change',function(){
        var getCurYear = this.get('value');
        var req = new Request({
            method: 'get',
            url: 'query.php',
            data: { year : getCurYear },
            onRequest: function() {
                contentElement.set('html',ajax_load);
            },
            onComplete: function(response) {
                contentElement.set('html',response).setStyle('opacity', '0');
                var FxElement = new Fx.Tween(contentElement,{property: 'opacity', duration: '900'});
                FxElement.start('0','1');
            }
        }).send();
    });
});

سأشرح ما تم كتابته في الشفرة السابقة على هذه القوائم:

  • السطر 1: إضافة حدث domready قبل بداية التعامل مع مكتبة MooTools.
  • السطر 2: كتابة متغير خاص لمقطع التحميل (صورة التحميل).
  • السطر 3: كتابة متغير خاص بعنصر content#.
  • السطر 5: إضافة حدث change للعنصر الذي يحمل الصنف year. (عنصر الإختيارات أو الوسم select)
  • السطر 6: كتابة متغير يشير إلى القيمة الحالية لعنصر الإختيارات.
  • السطر 7: متغير جديد لكتابة كائن Request.
  • السطر 8: إشارة إلى طريقة الطلب أو نوع الطلب، إخترنا الطريقة GET.
  • السطر 9: إشارة إلى عنوان الطلب.
  • السطر 10: إشارة إلى البيانات، هنا نكتب المتغيرات التي سترسل مع الطلب بواسطة طريقة send.
  • السطر 11: حدث onRequest، أي أنه أثناء حدوث الطلب ونضع فيه مقطع التحميل قبل إستدعاء البيانات وهو موجود في السطر 12.
  • السطر 14: حدث onComplete، يستخدم كما ذكرنا في حالة إكتمال الطلب ونستخدم عند كتابة الدالة متغير response ويحتوي على البيانات المستدعاه من الخادم.
  • السطر 19: إستخدام الطريقة send بعد الطلب لإرساله إلى الخادم.

الآن شرحنا الأجزاء الرئيسية لكتابة الأجاكس، بالنسبة لمحتويات الحدث onComplete فضلت شرحها بشكل منفصل وإستخدمناه فيها كائن Fx الخاص بالمؤثرات في مكتبة MooTools ، هنا شرح بقية السطور:

  • السطر 15: وضع محتويات المتغير response ضمن عنصر content#، وإشارة خاصيةopacity فيه إلى الصفر. (قبل عمل التأثير)
  • السطر 16: متغير FxElement ونكتب فيه كائن Fx ونستخدم تأثير Tween للمتغير contentElement (عنصر content#) في التحكم بخاصية opacity ومع كتابة مدة التأثير وأشرنا إلى أن التأثير مدته 900 جزء من الألف من الثانية.
  • السطر 17: إستخدام طريقة أو دالة start في تحويل القيمة خاصية opacity من 0 إلى 1 وهنا تكون مدة التحويل هي المدة التي حددناها في السطر السابق 900 جزء من الألف من الثانية (duration: 900).

سطور التأثيرات ليس لها دخل في الأجاكس، ولكن أحببنا إستخدامها إضافة عليها فقط.