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

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

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

في هذه الجزئية ستعرف على كتابة الأجاكس في مكتبة jQuery، سأشرح ثلاثة طرق للتعامل مع البيانات المستقبلة من طرق الخادم وهي ()ajax.$ و ()post.$ و ()get.$.

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

صفحة HTML ستكون مثل ما هي، وهذه شفرة 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>';
     }
}
?>

طريقة ()ajax.$

سنتعرف على أول طريقة وهي ()ajax.$ التي تعتبر كتطبيق منخفض المستوى في مكتبة jQuery، كتابة شفرة ()ajax.$ تكون بهذه التركيبة (مع شرح أجزاء الشفرة):

 $.ajax({
     type: METHOD, // الطريقة أو نوع المستخدمة في الإتصال مثل GET, POST
     url: "example.php", // عنوان الإتصال
     data: "var=value", // المتغيرات المرسلة
     success: function(data) {} // الدالة المستخدمة عند نجاح الإتصال
 });
 

الآن نعود إلى تطبيق الدرس، نضع شفرة Javascript التي ستحتوي على إتصال الأجاكس بإستخدام مكتبة jQuery وبطريقة ()ajax.$ (شرح الأوامر موجودة في الشفرة) (لوضع شفرة Javascript في الصفحة تكون الشفرة ضمن العنصر head كما ستشاهدها الآن):

 $(document).ready(function() {
     var ajax_load = '<span>Loading</span>'; // صورة التحميل قبل إستدعاء البيانات من الخادم
     $("select").change(function() { // في حال تغيير إختيارات الحقل select
         var year = "year=" + $(this).val() // نآخذ القيمة المختارة من إختيارات الحقل select
         $("#content").html(ajax_load); // نضع صورة التحميل قبل البدأ بالإتصال
         $.ajax({
             type: "GET", // إستخدام طريقة GET في الإتصال
             url: "query.php", // عنوان الإتصال هو ملف PHP
             data: year, // لدينا متغير واحد وهو السنة أو المتغير year
             success: function(data) { // في حال نجاح الإتصال يتم عرض البيانات
                 $('#content').hide().fadeIn(1000).html(data); // يتم عرض البيانات في العنصر الذي يحمل إسم الصنف #content
             }
         });
     });
});

بالنسبة لهذه لطريقة أو نوع الإتصال ()get.$ أو ()post.$ تستخدم لتخصيص الإتصال بطريقة GET أو POST وهي أفضل كما هو مذكور في وثائق موقع مكتبة jQuery من إستخدام ()ajax.$ إذا لم تدع الحاجة إلى ذلك. وتعتبر كتطبيق عالي المستوى في مكتبة jQuery.

طريقة ()get.$

المثال الآخر هو بإستخدام طريقة ()get.$ ضمن مكتبة jQuery لكتابة الإتصال، الشفرة التالية ستوضح كيفية عمل ذلك:

$.get(url , // عنوان الإتصال
     { variable: value}, // المتغيرات المرسلة
     function(data){ // الدالة المستخدمة عند نجاح الإتصال
         ..
     });

لتطبيق المثال العملي على هذا الدرس بإستخدام هذه الطريقة، كتبت هذه الشفرة لإستدعاء البيانات من القاعدة (إظهار الأحداث بناءاً على السنة التي يختارها المستخدم) وهي بنفس التركيبة التي كتبتها في الشفرة السابقة:

$(document).ready(function() {
     var ajax_load = '<span>Loading</span>'; // صورة التحميل قبل إستدعاء البيانات من الخادم
     $("select").change(function() { // في حال تغيير إختيارات الحقل select
         $("#content").html(ajax_load); // نضع صورة التحميل قبل البدأ بالإتصال
         $.get("query.php", { year: $(this).val() }, function(data) { // الطريقة تحتوي على عنوان الإتصال والمتغيرات المرسلة إضافةً إلى دالة الإتصال
             $('#content').hide().fadeIn(1000).html(data);  // يتم عرض البيانات في العنصر الذي يحمل إسم الصنف #content
         });
     });
 });

طريقة ()post.$

تركيبة هذه الطريقة في مكتبة jQuery لكتابة الإتصال موضحة في الشفرة التالية:

$.post(url , // عنوان الإتصال
     { variable: value}, // المتغيرات المرسلة
     function(data){ // الدالة المستخدمة عند نجاح الإتصال
         ..
     });

بما أننا طبقنا المثال العملي بطريقة ()get.$ فهي لا تختلف في تركيبتها عن طريقة ()post.$ (أقصد في كتابة الشفرة)، أكتفي بتطبيق المثال بإستخدام طريقة ()get.$.