جلسه ۵۴ : استفاده از Ajax در ساخت پلاگین

• جزئیات
• نوع محتواآموزشی

مقدمه

با عرض سلام و وقت به خیر خدمت کاربران سایت پی وی لرن به ویژه کاربرانی که به سیستم مدیریت محتوای قدرتمند وردپرس علاقمند هستند.
به ” دوره متخصص وردپرس ” خوش آمدید!
در این دوره قرار است توسعه و ارتقاء پلاگین های وردپرس را به صورت جامع و کامل بیاموزیم.
فرقی نمی کند که در شرف نوشتن اولین پلاگین خود هستید و یا این که پنجاهمین پلاگین خود را می نویسید! امیدوارم این دوره برایتان مفید باشد.
در جلسه گذشته با نحوه کار با jQuery و استفاده از آن در ساخت پلاگین آشنا شدیم.
در ادامه دوره جاوا اسکریپت به نحوه استفاده از Ajax در ساخت پلاگین می پردازیم.

استفاده از Ajax در ساخت پلاگین

پیش از شروه ” استفاده از Ajax در ساخت پلاگین ” به اینو سوال احتمالی پاسخ می دهیم که آژاکس چیست.

آژاکس چیست؟

آژاکس مخفف JavaScript Asynchronous و XML است. XML یک فرمت تبادل داده است و UX یک توسعه دهنده نرم افزار برای تجربه کاربر است.
Ajax یک روش ارتباطی اینترنتی است که به کاربر اجازه می دهد اطلاعات خاصی را از یک سرور درخواست کند و این اطلاعات جدید را در همان صفحه بدون نیاز به بارگذاری مجدد کل صفحه نمایش دهد.
Ajax یکی از مواردی است می تواند تجربه کاربری بهتری را فراهم آورد.

XML فرمت تبادل داده سنتی است.
هنگام کار با کد PHP ، بسیاری از توسعه دهندگان از JSON استفاده می کنند زیرا ساختار داده های داخلی ایجاد شده از جریان داده منتقل شده؛ با سهولت بیشتری با رابط، ارتباط برقرار می کند.

برای دیدن Ajax در عمل ، به قسمت مدیریت وردپرس خود بروید و یک دسته یا برچسب اضافه کنید.
وقتی دکمه Add New را کلیک می کنید ، در این حال تغییرات صفحه را مشاهده می کنید.
سابقه برگشت مرورگر خود را بررسی کنید ، اگر این صفحه بارگیری مجدد شده است ، می توانید دو ورودی برای صفحه مشاهده کنید.

Ajax برای کار کردن حتی نیاز به هیچی اقدامی از سوی کاربر ندارد.
Google Docs بطور خودکار هر چند دقیقه یکبار سند شما را با Ajax ذخیره می کند.
(بدون اینکه نیازی به شروع یک عمل صرفه جویی در این زمینه باشد.)

دلیل استفاده از Ajax در ساخت پلاگین چیست؟

بدیهی است که Ajax باعث بهبود تجربه کاربر می شود.
آژاکس به جای ارائه یک صفحه خسته کننده و استاتیک، به شما امکان می دهد تا یک تجربه پویا، پاسخگو و کاربر پسند را ارائه دهید.
با کمک آژاکس کاربران می توانند فورا بازخورد دریافت کنند که آیا اقداماتی که انجام داده اند درست بوده است و یا اشتباه صورت گرفته است.
با کمک آژاکس دیگر نیازی به ارسال فرم ندارید تا دریابید که در یک زمینه اشتباه کرده اید. زیرا زمینه های مهم به محض وارد کردن اطلاعات قابل تأیید هستند.

آژاکس می تواند میزان داده های برگشتی را به طرز چشمگیری کاهش دهد.
فقط داده های مربوطه به جای کل محتوای صفحه باید تبادل شوند ، این در واقع اتفاقی است که هنگام بارگیری مجدد صفحه رخ می دهد.

در زمینه افزونه های وردپرس، آژاکس بهترین وسیله برای شروع فرآیندی مستقل از محتوای وردپرس است.

چگونه به استفاده از Ajax در ساخت پلاگین پرداخت؟

اگر در ودپرس تازه وارد هستید و در  محیط های دیگر تجربه استفاده از Ajax را دارید ، باید یک مواردی را دوباره به خاطر آورید.
روشی که وردپرس آژاکس را پیاده سازی می کند با آنچه در گذشته عادت کرده اید متفاوت است.
اگر همه چیز برایتان جدید است ، مشکلی نیست.
اصول اولیه را از اینجا خواهید آموخت.
هنگامی که یک مبادله اساسی آژاکس را ایجاد کردید ،  یک راه حل برای گسترش در آن پایگاه و توسعه killer app با رابط کاربری بسیار جذاب است!

در وردپرس دو مؤلفه اصلی هرگونه تبادل آژاکس وجود دارد.

• سمت مشتری JavaScript یا jQuery
• سمت سرور PHP

همه مبادلات آژاکس دنباله بعدی  وقایع را دنبال می کنند.

بعضی از page event ها تابع  JavaScript یا jQuery را آغاز می کنند.
این تابع برخی از داده ها را از صفحه جمع آوری کرده و آن را از طریق درخواست HTTP به سرور ارسال می کند.
ز آنجا که رسیدگی به درخواست های HTTP با JavaScript بسیار ناخوشایند است jQuery به وردپرس بسته می شود.
می خواهیم از اینجا به بعد فقط روی کد جی کوئری تمرکز کنیم.
امکان استفاده از آژاکس و جی کوئری با یکدیگر به صورت مستقیم وجود دارد.
سرور درخواست را دریافت می کند و کاری بر روی داده انجام می دهد.
این فرآیند ممکن است داده های مرتبط را گردآوری کرده و در قالب پاسخ HTTP به مرورگر مشتری ارسال کند.
اما از آنجا که آگاه کردن کاربر در مورد آنچه اتفاق می افتد هدف آژاکس است لذا امکان این که پاسخی ارسال نشود خیلی کم است.
تابع  jQuery که درخواست اولیه Ajax را ارسال کرده است.
سپس این تابع پاسخ سرور را دریافت می کند و روی آن کار می کند.
این کار ممکن است چیزی را در صفحه به روزرسانی کند و / یا پیام خود را از طریق برخی موارد به کاربر ارائه دهد.

در ادامه مبحث ” استفاده از Ajax در ساخت پلاگین ” به نحوه استفاده از Ajax با jQuery می پردازیم.

استفاده از Ajax با jQuery

حالا وقت آن است که “do stuff” را در jQuery تعریف نماییم.
ما از متود ()post.$ استفاده می کنیم که از سه پارامتر استفاده می نماید:

• URL برای ارسال درخواست POST
• داده های ارسال شده
• یک تابع فراخوانی برای راه اندازی پاسخ سرور

URL

کلیه درخواست های وردپرس آژاکس باید به wp-admin / admin-ajax.php ارسال شود.
URL صحیح و کامل باید از PHP تهیه شود.
jQuery نمی تواند این مقدار را به تنهایی تعیین کند ، و شما نمی توانید URL را در کد jQuery خود کدگذاری کنید و انتظار داشته باشید که دیگران از افزونه شما در سایت خود استفاده کنند.

اگر این صفحه از ناحیه مدیریت باشد ، وردپرس URL صحیح را در متغیر سراسری جاوا اسکریپت ajaxurl تنظیم می کند.
برای ایجاد صفحه از طریق قسمت عمومی، باید خود URL درست را ایجاد کرده و با استفاده از ()wp_localize_script به jQuery منتقل کنید.

داده

کلیه داده هایی که باید به سرور ارسال شوند در مجموعه داده ها گنجانده شده اند.
علاوه بر داده های مورد نیاز برنامه شما، باید یک پارامتر عمل نیز ارسال کنید.
برای درخواست هایی که می تواند منجر به تغییر دیتابیس شود ، باید یک فرستاده را ارسال کنید.
با این کار سرور می داند که این درخواست از یک منبع قانونی آمده است.
آرایه داده نمونه ما که به متد .post () ارائه می شود مانند این است:

هر مؤلفه در ادامه توضیح داده شده است.

Nonce

Nonce یک portmanteau “شماره مورد استفاده ONCE” است.
Nonce در اصل یک شماره سریال منحصر به فرد شش ضلعی است که به هر نمونه از هر فرم ارائه شده اختصاص داده شده است.
nonce با اسکریپت PHP برقرار شده و به همان روشی که URL به آدرس جی کوئری منتقل شده است ، به عنوان یک ویژگی در یک شیء سراسری منتقل می شود. در این حالت به عنوان my_ajax_obj.nonce ارجاع می شود.
ساده ترین راه این است که این مقدار nonce را به _ajax_nonce بزنید.
اگر با کد PHP تاییدیه دریافت کرده اید ، می توانید از کلید دیگری استفاده کنید.
توجه کنید که استفاده از مقدار پیش فرض ساده تر است.
در ادامه نحوه اعلام بیانیه این جفت key-value آورده شده است:

Action

کلیه درخواست های وردپرس آژاکس باید یک آرگومان اکشن در داده ها باشند.
این مقدار یک رشته دلخواه است که بخشی از آن برای ساختن یک برچسب اکشن که از آن برای هوک کد گیرنده Ajax استفاده می شود؛ استفاده خواهید کرد.
بهتر است برای این مقدار توضیحی مختصر در مورد هدف فراخوانی آژاکس داشته باشید.
در این مثال ، ما از “my_tag_count” به عنوان مقدار تابع خود استفاده خواهیم کرد.
اعلامیه این جفت key-value به شرح زیر است:

اطلاعات دیگری که سرور برای انجام وظیفه خود نیاز دارد نیز در این آرایه قرار دارد.
اگر زمینه های زیادی برای انتقال وجود دارد ، دو قالب مشترکی که می توانند برای ترکیب زمینه های داده در یک رشته برای انتقال راحت تر استفاده شوند ، XML و JSON هستند.

استفاده از این فرمت ها اختیاری است ، اما هر کاری که می کنید باید با اسکریپت PHP در سمت سرور هماهنگ شوید.
در مثال ما ، سرور فقط به یک مقدار ، یک رشته واحد برای عنوان book انتخاب شده نیاز دارد ، بنابراین ما از عنوان “title” استفاده خواهیم کرد.

در jQuery ، شی ای که رویداد را اخراج کرده است، همیشه در این متغیر موجود است. بر این اساس ، مقدار عنصر انتخاب شده ما همین است. Value

اعلامیه ما از این جفت key-value به این شرح است:

” استفاده از Ajax در ساخت پلاگین “را با مبحث callback به پایان می رسانیم.

Callback

کنترل کننده callback تابعی است که می تواند پس از انجام درخواست پاسخ از سرور برگشت داده شود.
بار دیگر ، ما معمولاً یک عملکرد ناشناس را در اینجا مشاهده می کنیم.
تابع یک پارامتر ، پاسخ سرور را منتقل می کند.
پاسخ می تواند از یک بله یا خیر به یک پایگاه داده بزرگ XML باشد.
داده های قالب بندی شده JSON نیز یک قالب مفید برای داده ها است.
حتی به پاسخ احتیاجی نیست.
در حقیقت اگر پاسخی نباشد دیگر نیازی به پاسخ دادن به فراخوانی نیست.
توجه به UX و اطلاع به کاربر در خصوص این که چه اتفاقی در حال رخ دادن است همیشه ایده خوبی است.
بنابراین توصیه می شود همیشه پاسخ دهید و نشانه هایی از وقوع یک اتفاق ارائه دهید.

در این مثال ما متن فعلی را زیر ورودی رادیو با پاسخ سرور جایگزین می کنیم ، که شامل تعدادی ارسال  برچسب گذاری شده با عنوان book است.
تابع برگشت ناشناس ما در اینجا به صورت زیر است:

کلام آخر

در این جلسه به صورت مفصل به نحوه استفاده از Ajax در ساخت پلاگین پرداختیم.
در جلسه بعدی شما را با سرور PHP و Enqueaching آشنا می نماییم.
با پی وی لرن همراه باشید.