مقارنة إطار جافا سكريبت: اياكس

اياكس

السبب الأكثر إلحاحًا لاستخدام إطار عمل JavaScript هو توحيد طلبات Ajax عبر المتصفحات. طلب Ajax هو طلب HTTP غير متزامن يرسل طلبًا إلى برنامج نصي من جانب الخادم ثم يحصل على نتيجة استجابة، مثل البيانات بتنسيق XML أو JSON أو HTML أو تنسيق نص عادي. تحتوي معظم أطر عمل JavaScript على شكل من أشكال كائن طلب Ajax الذي يقبل سلسلة من الخيارات كمعلمات. تتضمن هذه الخيارات وظائف رد الاتصال التي يتم استدعاؤها عند تلقي استجابة من خادم الويب، وتبدو طلبات Ajax لـ ExtJS وMooTools وPrototype كما يلي:

القائمة 11: طلب Ajax في مكتبة ExtJS

تحويلة.Ajax.طلب({
عنوان URL: "server_script.php"،
المعلمات: {
الاسم 1: "القيمة 1"،
الاسم 2: "القيمة 2"
},
الطريقة: "POST"،
النجاح: الوظيفة (النقل) {
تنبيه (transport.responseText)؛
}
});

يقبل ExtJS معلمة، بما في ذلك الحقول مثل عنوان url والمعلمات والطريقة ووظيفة المعالجة الناجحة. يحتوي حقل عنوان url على عنوان البرنامج النصي من جانب الخادم، والذي يتم استدعاؤه بواسطة طلبات Ajax. Params نفسها عبارة عن كائن يتكون من أزواج المفاتيح/القيمات، والتي يتم تمريرها بعد ذلك إلى الخادم. يحتوي حقل الطريقة على قيمتين اختياريتين: GET أو POST، والقيمة الافتراضية هي طريقة النشر. الحقل الأخير هو النجاح، والذي يتم استدعاؤه بعد حصول الخادم على استجابة ناجحة. في هذا المثال، من المفترض أن يقوم الخادم بإرجاع نص عادي، ويتم تقديم هذا النص للمستخدم من خلال طريقة التنبيه ().

بعد ذلك، دعونا نستكشف طلبات Ajax في MooTools.

القائمة 12: طلب Ajax في MooTools

طلب جديد({
عنوان URL: "server-script.php"،
بيانات: {
الاسم 1: "القيمة 1"،
الاسم 2: "القيمة 2"
},
الطريقة: "نشر"،
عند الاكتمال: الوظيفة (الاستجابة) {
تنبيه (استجابة) ؛
}
}).يرسل()؛

كما ترون، MooTools يشبه إلى حد كبير ExtJS. ستلاحظ أنه يتم تمرير المتغيرات عبر حقل البيانات، ويجب أن تكون حقول الطريقة بأحرف صغيرة. بالإضافة إلى ذلك، على عكس وظيفة معالج النجاح، يستخدم MooTools وظيفة onComplete. أخيرًا، على عكس ExtJS، يرسل MooTools الطلب فعليًا باستخدام وظيفة Request send().

وأخيرا، دعونا نلقي نظرة على الاختلافات الواضحة بين النموذج الأولي.

القائمة 13: طلب Ajax في النموذج الأولي

جديد Ajax.Request('server-script.php', {
المعلمات: {
الاسم 1: "القيمة 1"،
الاسم 2: "القيمة 2"
},
الطريقة: "نشر"،
onSuccess: الوظيفة (النقل) {
تنبيه (transport.responseText)؛
}
});

كما ترى، يعمل النموذج الأولي بنفس الطريقة، ولكن مع وجود اختلافات بسيطة في بناء الجملة. بالنسبة للمبتدئين، يقبل كائن طلب النموذج الأولي معلمتين لتمريرهما إلى المُنشئ. المعلمة الأولى هي عنوان URL الذي سيتم إرسال الطلب إليه، كما رأيت في المثالين السابقين، والمعلمة الثانية هي كائن يحتوي على الخيارات لكل طلب Ajax. وبطبيعة الحال، يتم تمرير عنوان URL كمعلمة منفصلة وليس في قائمة الخيارات. بالإضافة إلى ذلك، تجدر الإشارة إلى أنه، على عكس MooTools، يرسل مُنشئ كائن النموذج الأولي الطلب ضمنيًا، لذلك ليست هناك حاجة لاستدعاء أي طريقة لتشغيل طلب HTTP.

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

في الفصول التالية، ستتعرف على تحسينات تجربة المستخدم (UE) التي تقدمها أطر عمل JavaScript لمطوري الويب.

عنوان إعادة الطباعة: http://www.denisdeng.com/?p=729

العنوان الأصلي: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html