تعلم جي كويري jQuery مع اجاكس AJAX الخطوة الثالثة
مسار المقال الأصلي : http://jquery.bassistance.de/jquery-getting-started.html#rate
مع الشكر للسيد : Jörn Zaefferer
في هذة الخطوة سنكتب سكربت أجاكس AJAX يتيح للمستخدم أن يقيم مستوى المقال ويتيح له تحرير المعدل و إدخال علامة لتقيم هذا المقال
AJAX أجاكس
قبل أن نبدأ بتطبيقات الأجاكس لنحاول شرح معنى هذه الكلمة بشكل سريع و مبسط :
أجاكس اختصار كلمات Asynchronous Javascript And Xml هي طريقة تطوير مواقع الويب باستعمال XHTML و CSS لعرض المعلومات من جهة و استعمال DOM و JavaScript للتفاعل مع خيارات المستخدم و المعلومات المعروضة بشكل ديناميكي من جهة أخرى و استعمال Xml واموامر الأجاكس لتبادل المعلومات و البيانات مع خادم الويب بطريقة asynchrone ترجمة هذه الكلمة صعبة لكنها تتعلق بالوقت asynchrone تعني تبادل معلومات بين حاسوبين لا يستعملوا نفس التوقيت, تخيل أنك طرحت سؤال و قررت أن تتجاهل الجواب في حال تأخره أكثر من ثلاث ثوان
و يستعمل عكس هذه الكلمة في لغة البرمجة فيقال عن طريقة بأنها synchrone لاحظ حذف حرف A عندما تنتظر جواب على السؤال قبل أن تعطي جوابها.
في هذا التمرين :
سنحتاج للكود بي اتش بي rat.php على خادم الويب هذا الكود سيقوم بقراءة عدد العلامات و على أساس عدد العلامات سيعطي المتوسط لهذا التقييم
افتح الملف rat.php و اطلع على محتواه $rating هو متغير عدد العلامات
ملاحظة: في هذا التمرين عليك أن تفك ضغط الملف strterkit في الملف www لخادم الويب في حال استعمالك wamp
في هذا المثال سنستعمل الأجاكس لذلك سنولد الوسمات اللازمة بواسطة جيكويري jQyery و ندخلها في ديف و معرف هذة اليف هو rating
// نولد الوسمات
var ratingMarkup = ["قيم الموضوع: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
}
// نضيف الوسمات للحاوية
// ونستعمل معالج النقر click
$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
e.preventDefault();
// ارسال الأمر
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// ترتيب النتيجة
var result = [
"شكراً لمشاركتك, المتوسط العام هو ",
$("average", xml).text(),
", nombre de votes: ",
$("count", xml).text()
];
// عرض النتيجة
$("#rating").html(result.join(''));
} );
});
});
هذا الكود سيولد خمس عناصر مرسساة ancres و يضيفهم إلى الحاوية التي تحمل المعرف ID rating بعد ذلك نضيف إلى كل مرساة في هذة الحاوية معالج النقر كليك a click handler
عندما يضغط المستخدم على مرساة ancres سيرسل طلب بواسطة الطريقة بوست POST إلى السكربت rating
السكربت يرسل النتيجة بشكل اكس ام ال و بعدها تضاف إلى الحاوية التي تحمل المعرف rating ID
تستطيع أن تجد المزيد من المعلومات عن أوامر الأجاكس على هذه الصفحة
كما تستطيع مراجعة بند الأجاكس على موقع Visual jQuery
مشكلة تواجه مبرمجي الأجاكس عند تحميل محتوى جديد بواسظة أجاكس و هي عند إضافة معالجات الحدث الذين يتوجب تطبيقهم على المحتوى المحمل من جديد لتفادي تكرار الكود الحل هو تدب دالة
مثال:
$(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function() {
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
});
في هذه الحالة, الدالة addClickHandlers تطبق بعد أن يتم تحميل الدوم DOM أي بعد انتهاء تحميل الصفحة و في كل مرة ينقر فيها المستخدم على لرابط ينتمي للفئة clickMeToLoadContent طبق هذه الطريقة لتفادي التضارب مع المتغيرات أو الدوال العامة
مع تطبيقات الأجاكس البسيطة المستخدمة في هذا المثال نستطيع انجاز الكثير من تطبيقات الويب 2
لكنن ينقصنا ينقصنا المؤثرات الخاصةspecial effects
روابط مفيدة
- jQuery Module AJAX
- API jQuery فيها شرح و أمثلة عن طريقة append
- Thickbox إضافة لمكتبة جي كويري لتحسين أداء lightbox
المؤثرات الخاصة بواسظة jQuery
تستطيع تحقيق الكثير من المؤثرات الخاصة بواسطة jQuery و خاصة بواسطة show و hide
مثال:
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});
كما تستطيع مزج المؤثرات مع animate
مثال ديبوراما مع اختفاء بطيء للصور
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide',
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});
كما تستطيع استعمال مجموعة Interface elements الموقع يوفر لك الكثير من الأمثلة و الكود الجاهز للاستعمال و هناك الكثير من الإضافات الأخرى سنتكلم عن استعمالها في الخطوة الرابعة
استعمال tablesorter
ضافة tablesorter تتيح لك ترتيب الجداول و هي من تطبيقات أجاكس
يتوجب ضمها و بعد ذلك تحدد الجدول المراد ترتيبه لكي تجرب هذه الإضافة عليك إضافتها في ملف starterkit.html مباشرتاً بعد السطر الذي يضم مكتبة jQuery
بعد ضمها تستعملها بالشكل التالي
$("#large").tableSorter();
});
حاول أن تنقر على رأس الجدول و لاحظ كيف يتم اترايب بشكل تصاعدي
كما تستطيع تلوين الجدول كالحمار الوحشي
مثال:
$("#large").tableSorter({
//اسم الفئة التي توفرها الإضافة لتحقيق المطلوب
stripingRowClass: ['odd','even'],
// تلوين الجدول عند تنفيذ الإضافة
stripRowsOnStartUp: true
});
});
للمزيد من المعلومات راجع
TableSorter plug-in for jQuery
كل الإضافات تستعمل بهذه الطريقة أولاً ضم الغضافة ثم استعمال طريقها
روابط مفيدة
- مدونة لؤي آغا
- نسخة للطباعة
- سَجل الدخـول لإرسَــال تـَعلـيق.
