الأشخاص

لدينا 6 من الأشخاص المتصلين.
تحديث  ثغرة

المواضيع

إضافة تعليق

عليك تسجيل الدخول حتى تتمكن من التعليق.

ajax-ops مكتبة للعمليات التفاعلية التصريحية

أهلا بك في استعراض ajax-ops، طريقة عمل تطبيقات ذات انتاجية عالية.

هذه الصفحة تطبيق من صفحة واحدة يعتمد على محتوى ساكن. أغلب العجائب التي تراها هنا يحفزها data-toggle="ajax-load".

الصندوق الجانبي يحتوي أزرار تقوم بعمليات AJAX عجيبة، اضغط على زر "الاستعراض" في الشريط العلوي للعودة لهذه الصفحة.

تحميل المحتوى

كما ترى زر "تحديث" الموجود في صندوق "الأشخاص الجانبي" هو مجرد رابط عبر وسم <a> له "href" تشير إلى رابط ملف نصي يحتوي العدد المراد إظهارة مكان الرقم الموسوم بوسم "span" وتم الإشارة له عبر المحدد selector بالقيمة data-target="#connected-count" وتم تحديد النوع كنص data-format="text" لهذا فإن وجود وسوم لن يتم معالجتها مما جعل الضغط على زر "ثغرة" لا ينفظ السكربت ولا يظهر التنبيه بل يطبعه كما هو.

اضغط [+] في أي من الصناديق الجانبية تحمل محتوى جزئي Partial HTML فيه نموذج استمارة في الصندوق الرئيسي. (في التطبيقات العملية يمكنك استعمال الاستمارات الفعالة active form في توليده عوضا عن ال full layout) تم عمل ذلك بطريقة بدهية جدا وهي:

<button data-url="demo/data-ar/newpost.html" data-toggle="ajax-load" data-target="#main-pane">+</button>

جلب بيانات خام وإخراجها

في قائمة المواضيع الجانبية انقر على "موضوع 1" حيث نجلب بيانات صافية بهيئة JSON من الخادم ثم تمريرها إلى أي نظام قوالب في جافاسكربت مثل handlerbars. بنفس الطريقة السابقة حددنا الرابط عبر href أو data-url والمحدد selector للعنصر المستهدف لكن الفرق هنا أننا حددنا اسم القالب عبر data-template="post" (حيث لدينا قالب اسمه موضوع "post" وهو يخرج لنا الموضوع والتعليقات التي عليه)

<a href="#" data-url="demo/data-ar/post1.json" data-toggle="ajax-load" data-template="post" data-target="#main-pane">post 1</a>

زر التحديث داخل عرض الموضوع يعمل رغم أنه زرع بعد جهوزية الصفحة ذاك الزر يجلب التعليقات الحديثة ويزرعها في رأس التعليقات وذلك من خلال العلامة data-how="prepend"

<button class="btn btn-default" type="button" data-toggle="ajax-load" data-url="demo/data-ar/fresh.json" data-template="comments" data-target="#comments-box" data-how="prepend">refresh</button>

استمارات AJAX

اضغط على زر [+] وحاول إرسال النموذج. سيتم استعمال AJAX لإرسال النموذج للخادم وذلكن من خلال وضع onsubmit="return ajax_ops.submit_form(this);" والتي ترسل النموذج للخادم ثم تضع رد الخادم الجزئي مكان النموذج. لقد استعملنا طريقة GET لكن في التطبيقات الحقيقية عليك استعمال POST.

معالجة الأخطاء

الرابط إلى "التغريدة الثانية" يؤشر إلى صفحة غير موجودة 404. في تلك الحالة يتم تطبيق قالب اسمه "flashmsg" وإظهاره في أقرب محتوى يمكنك تخصيصه عبر الإعدادات العامة بالشكل التالي: ajax_ops.flashmsg_opts.selector='.content:first'.

العمليات المعقدة على أكثر من هدف

يمكنك استخدام محددات selectors تطابق أكثر من عنصر يمكن لكل عنصر أن يحتوي قالب مختلف خاص به لنفس البيانات المجلوبة

<a data-toggle="ajax-load" href="/posts/today.json" data-target=".posts">my link</a>
<div class="posts" data-template="posts_titles"></div>
<div class="posts" data-template="full_posts"></div>

الصناديق البائنة Modal

يمكن لصنادئق الحوار البائنة أن تصنع تجربة غنية من خلال ajax-modal و ajax-forms جرب ما يلي

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

كيف تم عمل كل ذلك؟

  • أي رابط أو زر عليه data-toggle="ajax-modal" يؤدي النقر عليه إلى إظهار صندوق بائن يجلب من "href" أو "data-url"
  • يتم إحاطة ما يعيده الخادم ب >div< عليها فئات بووتستراب الخاصة بالصندوق البائن (يمكن تخصيصها) ثم إظهارها
  • كما في حالة رابط "حساب جديد" يمكن إحلال صندوق مكان الحالي عبر data-modal-attr='{"replace":1}'
  • يمكن أن يحتوي الصندوق على استمارة من خلال onsubmit="return ajax_ops.modal_form(this);" المبنية على submit_form التي تحدثنا عنها سابقا.
  • يمكن اخباره أن يغلق الصندوق عند النجاح بتمرير معاملات إلى modal_form
  • الرد الذي أظهر نجاح تسجيل الدخول استعمل ajax_ops.refresh('.me'); لتحديث كل العناصر المتعلقة بالمستخدم من خلال الفئة me
  • الشريط العلوي وصندوق التعليق جلبا نفس البيانات وهي me.json لكن كل منهما استعمل قالب مختلف لإظهارها

علميات معقدة أكثر

يمكن استعمال data-toggle="ajax-ops" عوضا عن data-toggle="ajax-load". والتي عوضا عن جلب محتوى تجلب أوامر أو عمليات يجب تنفيذها op-codes. اضغط رابط "التغريدة الأولى" وستجد زر مكتوب عليه "أظهر المزيد من التعليقات" النقر عليه يؤدي إلى إخفاء الزر نفسه وإضافة نص "لا مزيد من التعليقات" هي تجلب قائمة عناصرها تتكون من عنصرين أو 3 هي العملية المطلوبة والهدف والمعاملات إن وجدت.

[
    ["remove","#more-comments"],
    ["load","#comments", {"how":"append", "text":"no more comments"}]
]

الزر الآخر يجلب بيانات ويلبسها قالب ثم يضيفها إلى التعليقات إلى جانب حذف الزر نفسه.

[
	["remove","#rel-posts"],
	["load","#comments", {"how":"append", "template": "post", "data": {
		"username":"Khaleel Tahseen", "content": "This is a SECOND test post", "comments": [{"username":"Ali Obada", "content": "this is a comment"}, {"username":"Khaleel Ahmed", "content": "this is another comment"}, {"username":"Ali Obada", "content": "this is a comment"}, {"username":"Khaleel Ahmed", "content": "this is another comment"}]
		}
	}]
]