RSS

تقنية AJAX بعين المبرمج

06 مايو

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

تعدنا تقنية AJAX على المدى البعيد أن تجعل من الحوسبة أسهل منالا وذلك بنقلها إلى مخدمات الويب البعيدة، حيث لن نحتاج بعدها للوصول إليها إلا إلى برنامج المستعرض الذي بات من التطبيقات المعيارية الواسعة الإنتشار في هذه الأيام، وهو ما سيعفي المستخدمين من القلق حيال عمليات تنصيب البرمجيات أو نقل المعلومات حينما ينتقلون من مكان إلى آخر أو يضطرون إلى تغيير حواسيبهم لسبب أو لآخر، فتطبيقاتهم ومعلوماتهم ستصبح مستضافة على شبكة الإنترنت ويمكنهم الوصول إليها من أي مكان شريطة توفر إتصال بها. بكلمات أخرى أصبحت حزم التطبيقات المكتبية هي المستهدفة هذه المرة ليصار إلى تحويلها إلى تطبيقات ويب بما فيها معالج الكلمات وبرمجيات الجداول الممتدة والعروض التقديمية، فقد أصبح هذه الطموح متاحا وفي متناول اليد بفضل تقنية AJAX، ولا أدل على هذا التوجه من إطلاق حزمة Google Docs http://docs.google.com التي تصور هذا التوجه لا بل تجسده بكافة أبعاده، ولكم أن تتخيلوا يوما تكون فيه الحواسيب صغيرة القد لا تمتلك سوى مستعرضا للويب مع قدرة اتصال سريع بالشبكة والتي ستؤمن الولوج إلى المخدمات البعيدة حيث تستضاف كل من التطبيقات والبيانات، وهو ما يعد بأن يكون الحل البعيد الأمد لمشاكل التراخيص وسد الثغرات الأمنية أول بأول، إضافة إلى توفير حفظ إحتياطي أكثر كفاءة وتأمين بيئة مرنة لتشارك المعلومات رغم ما يضيفه من تحديات حول خصوصية المعلومات وأمنها.

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

أما لمن يتطلع إلى مزيد من التفاصيل التقنية المتعلقة تقنية AJAX أقول أن هذه التقنية لا تعدو كونها أسلوب في التوفيق فيما بين مجموعة من تقنيات تطوير مواقع الويب المتداولة سابقاً بطريقة متناغمة. وتتألف عناصر تلك الجوقة من تنسيق XML الذائع الصيت والذي يمثل صيغة التخاطب فيما بين المستعرض ومخدم الويب وذلك في الاتجاهين ضمن التطبيقات التي تعتمد هذه التقنية. أما العنصر الآخر فهو لغة JavaScript وهي التي يتم تنفيذ شيفراتها ضمن المستعرض على طرف الزبون, متيحا لهذه اللغة ميزة الاستجابة لأحداث المستخدم من نقر وتأشير وسواها من الأحداث التي لم تكن حتى الأمس القريب مما يتاح التعامل معه من قبل مطور تطبيقات الويب العاملة على طرف المخدم. يضاف إلى هذه العناصر خدمات الويب Web Services, وهي فئة من البرمجيات العاملة على طرف المخدم والتي تتلقى الاستدعاءات بصيغة XML غالبا والتي يتم تمريرها من خلال بروتوكول HTTP ومن ثم تعود فترسل استجاباتها بذات الأسلوب, وهي التي تمثل في حقيقة الأمر النواة التي يجري ضمنها التنفيذ الحقيقي للمهام.

في حقيقة الأمر لا تعتبر تقنية AJAX من الناحية الفنية أمرا معقدا، لكنها تتطلب شيئا من الإلمام بلغة JavaScript، لذا دعونا لا نطيل الكلام وننتقل مباشرة إلى مثالنا الأول:

function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    
    return ro;
}

var http = createRequestObject();

function sndReq(action) {
    http.open('get', 'rpc.php?action='+action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update   = new Array();

        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}

تقوم شيفرة JavaScript المعروضة أعلاه بإنشاء كائن اتصال حيث يعالج حالتي مستعرض IE Microsoft و Firefox حيث تختلف طريقة الحصول على ذلك الكائن باختلاف لبمستعرض، بالإضافة إلى تابعي إرسال الطلب إلى المخدم والتعامل مع الاستجابة العائدة منه، وحتى نستطيع استخدام هذه الشيفرة البرمجية علينا تضمينها في صفحة الويب حيث نريد استخدامها، ومن ثم نجعل حدثا ما يقوم بقدح آلية إرسال الطلب، كالنقر على رابط ما كما في المثال التالي:

<a href="javascript:sndReq('foo')">[foo]</a>

وهو ما يعني أنه حين يقوم أحدهم بالنقر على هذا الرابط فسيتم في الخفاء استدعاء الصفحة التالية rpc.php?action=foo والتي يمكن لها أن تتضمن على سبيل المثال المعالجة التالية:

switch($_GET['action']) {
    case 'foo':
        /* do something */
        echo "foo|foo done";
        break;
    ...
}

طبعا فإن استخدام تقنية AJAX ليس حكرا على لغة PHP، بل إن أي لغة تعمل على طرف المخدم مثل ASP.NET أو JSP أو حتى Perl يمكن لها أن تلعب الدور الذي تقوم به PHP في هذا المثال.

بتفحص التابع الذي يتعامل مع الاستجابة التي تعاد من الاستدعاء السابق وهي في حالتنا “foo|foo done” نرى أنه يقوم بقسمة السلسلة النصية التي تعاد إليه إلى شقين مستعينا بالرمز | كفاصل فيما بينهما، حيث يعتبر أن الشق الأول ما هو إلى قيمة خاصية المعرف أي id للعنصر المراد تعديل محتواه باستخدام التابع innerHTML بناء على ما تم إرساله في الشق الآخر من هذه السلسلة النصية والذي ورد بعد الفاصل، فلو كانت صفحتنا تتضمن العنصر التالي:

<div id="foo"> </div>

فسيصبح محتوى ذلك العنصر بعد تنفيذ استدعاء AJAX على الشكل التالي:

<div id="foo">foo done</div>

هذه هي ببساطة نواة تقنية AJAX ولب فكرتها وكل ما عدى ذلك يبنى فوق هذه الأفكار ويطورها دون أن يأتي بأي جديد (ألا تتفقون معي على بساطتها مقارنة بكل مضامينها وتأثيراتها الواعدة)، فعلى سبيل المثال تستخدم صيغة XML الأغني في نقل البيانات عوضا عن الشكل البسيط الذي استخدمناه في المثال السابق “id|text”.

طبعا في الحياة العملية لا يقوم المطورون بتطبيق هذه التقنية بهذا المستوى من البدائية، لكن عوضا عن ذلك يستعينون ببعض المكتبات التي توفر لهم مزيدا من الإمكانيات والمرونة وصولا إلى تحقيق غاياتهم الأكثر تعقيدا وتطلبا، ومن هذه المكتبات نذكر مكتبة prototype.js التي باتت ذائعة الصيت وواسعة الانتشار، وسوف نستعرض في الفقرات القادمة بعضا من أهم المزايا والإمكانيات التي تتيحها للمطور بما يخدم أهدافه في بناء تطبيقات AJAX أكثر تفاعلا وديناميكية. يمكنك الحصول على آخر إصدار من هذه المكتبة من الموقع (http://www.prototypejs.org)، ولتضمين هذه المكتبة في صفحتك ما عليك سوى إضافة السطر التالي:

<script type="text/javascript" src="path/to/prototype.js"></script>

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

Document.getElementById('foo').innerHTML = 'foo done';

يمكننا استخدام الطريقة المختصرة التالية بمعونة ما توفره مكتبة prototype.js:

$("foo").innerHTML = 'foo done';

ليس هذا فحسب، بل هنالك التابع $F الذي يعيد قيمة حقل الإدخال للعنصر الذي تم تمرير معرفه إليه، حتى وإن كان ذلك العنصر عبارة عن لائحة منسدلة (إن كل من سبق له محاولة الحصول على القيمة المختارة من لائحة منسدلة باستخدام لغة JavaScript يعي تماما حجم هذه الخدمة التي يوفرها لنا هذا التابع).

<select name="country" id="country">
    <option selected="selected" value="SYR">Syrian Arab Republic</option>
    <option value="UAE">United Arab Emirates</option>
    ...
</select>

$F('country');    // SYR

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

<form id="search" action="search.php" method="post">
    <input type="text" name="query" value="thing" />

    <select name="field">
        <option value="artistname">Artist Name</option>
        <option value="title" selected="selected">Title</option>
    </select>

    <input type="submit" name="submit" value="Search" />
</form>

// query=thing&field=title&submit=Search
Form.serialize($("search"));

أخيرا أود الإشارة إلى كائن Insertion الذي تقدمه هذه المكتبة والذي يتيح لك قدرا كبيرا من المرونة والتحكم فيما تضيفه إلى محتوى صفحتك برمجيا، وهو أمر حيوي للغاية من وجهة نظر التابع الذي يتعامل مع الاستجابة القادمة كجواب لاستدعائك ضمن آلية عمل AJAX، ويقدم لنا هذا الكائن أربعة طرق مختلفة لإقحان نص ما ضمن محتويات الصفحة الحالية وهي Before و After و Top و Bottom، ويوضح المثال التالي كيفية استخدامه:

new Insertion.Before("foo", "<p>I'm before!</p>");

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

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

 
 

الأوسمة: , ,

3 responses to “تقنية AJAX بعين المبرمج

  1. almhajer

    6 مايو 2010 at 10:58 صباحًا

    شكرا جزيلا ويعطيك العافية
    ولا ننسى أن استخدام تقنية json مع الأجاكس يعطي قوة فوق القوة التي تتميز بها الأجاكس وحدها
    بالتوفيق

     
  2. حنان مصراتة

    3 مايو 2013 at 9:21 صباحًا

    أشكركم جزيل الشكر وكما أتمنى منكم تطبيقات أكثر وأكثر للأستفادة أفضل والله يعطيكم العافية فأنا جديدة على الموضوع الآن سندرس هذه التقنية الأجاكس مع الphp لذا أنا متشوقة لمعرفة الكثير عن هذه التقنية مع لغة الجافا سكريبت

     

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

 
%d مدونون معجبون بهذه: