لكي تقوم بتحديث الصفحة بشكل مباشر عليك استخدام تقنيات تبادل البيانات التي تعمل بدون الحاجة لتحديث الصفحة.

أشهر تقنية هي AJAX فهي تقوم بإنشاء اتصال HTTP مع السيرفر و تمكنك من ارسال أو جلب البيانات وعندها يمكنك تحديث محتوى محدد في الصفحة الخاصة بك مباشرة

تعريف AJAX: هو اختصار لـ Asynchronous JavaScript (جافا سكربت غير المتزامنة أي أن الأحداث تنتج عن ضغط أزرار مثلا كاستجابة لفعل المستخدم)و XML وهذه التقنية تساعدنا على تحميل البيانات من الخادم دون تحديث صفحة المتصفح.

JQuery هي أداة رائعة توفر مجموعة غنية من أساليب AJAX لتطوير تطبيقات الويب(بالإضافة لعملها في إضافة تأثيرات و animation لصفحات الويب و تغيير Css ..).

مثال:

عند الضغط على الزر button يتم تنفيذ function بدوره يستدعي AJAX ليتصل على URL ويجلب البيانات من السيرفر وفي حال النجاح success (اتصال صحيح) يتم تنفيذ التابع الآخر الذي يأخذ parameter المتحول result (نتائج الاتصال) و يقوم باسناد محتواه في العنصر #div1

رابط المثال:

معالجة طلب Http Reaquest

حدث في المتصفح نتيجة ضغط المستخدم أحد الأزرار => إنشاء عنصر Http Reaquest و إرسالة للسيرفر => معالجة السيرفر للطلبية و إعادة النتيجة للمتصفح.

رابط يشرح تقنية AJAX:

شرح مفصل لاستخدام AJAX مع jQuery

وكنصيحة استخدم AJAX مع مكتبة jQuery لأنها تبسط و تسهل التعامل معها