آموزش استفاده از ای‌جکس (Ajax) در وردپرس

///آموزش استفاده از ای‌جکس (Ajax) در وردپرس

آموزش استفاده از ای‌جکس (Ajax) در وردپرس

سایر بخش های سری آموزشی " ایجاد افزونه وردپرس "

ایجکس(Ajax) چیست؟

Ajax مخفف شده عبارت Asynchronous Java and XML و به معنی ترکیب نامتقارن جاوا اسکریپت و XML است.

کار اصلی این فناوری دریافت و نمایش اطلاعات در صفحه بدون نیاز به رفرش یا Refresh کردن صفحه است. به عبارتی با استفاده از Ajax می توان اطلاعات را بدون نیاز به تغییر صفحه پردازش کرده و نتیجه را در همان صفحه نمایش داد. این ویژگی باعث می شود تا رابط کاربری سایت ها بسیار بهتر شود.

در صورتی که متوجه کاربرد این فناوری نشده اید، کافیست به صفحه افزودن دسته ها رفته و یک مورد جدید را اضافه کنید! دسته ای که ایجاد می کنید به فهرست دسته ها اضافه می شود، بدون اینکه نیاز باشد صفحه مجدد بارگذاری شود. این کار (ذخیره تغییرات در پایگاه داده) بدون اینکه صفحه رفرش شود، توسط فناوری ای جکس انجام می گیرد.

چرا از ایجکس استفاده کنیم؟

همانطور که متوجه شدید، این فناوری باعث می شود تا تجربه کاربری سایت‌تان بهتر شود. همچنین ایجکس می تواند از حجم داده هایی که باید پردازش شوند به اندازه قابل توجهی کاهش دهد.

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

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

استفاده از ایجکس با جی کوئری

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

آدرس URL

تمام درخواست های ایجکس در وردپرس باید به مسیر wp-admin/admin-ajax.php ارسال شوند. البته توجه داشته باشید که مقدار صحیح آدرس کامل باید باشد، زیرا جی کوئری نمی تواند این مقدار را شناسایی کند. بنابراین در افزونه ها برای مقدار دهی آدرس لازم است که از توابع و دستورات مخصوص استفاده کنید.

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

my_ajax_obj.ajax_url

داده Data

تمام داده هایی که به سرور ارسال می شوند، باید داخل یک آرایه قرار گیرند. همچنین برای درخواست هایی که به تغییر اطلاعات در پایگاه داده نیاز دارد، لازم است که یک nonce نیز ارسال کنید تا سرور از قانونی بودن منبع ارسال کننده درخواست مطلع شود.

کدهای مثال ما تا این مرحله:

{_ajax_nonce: my_ajax_obj.nonce, //nonce
  action: "my_tag_count",        //action
  title: this.value              //data
}

کد بالا همان آرایه داده است که از چند جزء تشکیل شده است که به بررسی هریک می پردازیم.

Nonce

Nonce کلمه ترکیبی “Number used ONCE” به معنای عدد یکبار مصرف است. در واقع Nonce یک شماره سریال هگزادسیمال است که به هر فرم اختصاص داده می شود.

عدد Nonce توسط کدهای PHP تولید شده و به جی کوئری ارسال می شود. هرچند که شما می توانید خودتان نیز مقدار Nonce را مشخص کنید اما ساده ترین روش این است که از دستور زیر استفاده کنید و نگران ناهمانگی و سایر مشکلات نباشید:

_ajax_nonce: my_ajax_obj.nonce

Action

تمام درخواست های ای جکس در وردپرس باید پارامتر Action را در بخش داده داشته باشند که برای مقدار آن می توانید از کاراکترهای دلخواه استفاده کنید.

بهتر است که در این نام گذاری به کاربرد کدها توجه کرده و برهمان اساس نامی را انتخاب کرد.

از آنجا که ما می خواهیم تعداد برچسب ها شمارش شود از نام “my_tag_count” استفاده کرده ایم.

action: "my_tag_count"

سایر داده هایی که سرور برای انجام وظایف خود نیاز دارد نیز در همین آرایه (Data) قرار می گیرند. در صورتی که تعداد داده ها برای انتقال زیاد باشد از دو فرمت رایج XML و JSON استفاده می شود که البته بیشتر برای دریافت داده ها استفاده می شوند تا ارسال داده ها.

در مثال ما سرور تنها یک پارامتر نیاز دارد، بنابراین ما از کلید ‘title’ استفاده کردیم.

title: this.value

Callback

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

در این مثال ما متن دکمه رادیویی را با نتیجه برگشتی از پایگاه داده عوض می کنیم. به کدهای تابع Callback مثال نگاه کنید:

function(data) {
    this2.nextSibling.remove();
    $(this2).after(data);
}

کد نهایی

در این مطلب ما کدهای ایجکس را به کدهای جی کوئری نوشته قبلی اضافه کردیم. اگر تمام این کدها را کنار هم قرار دهیم به شکل زیر می شود:

jQuery(document).ready(function($) {           //wrapper
    $(".pref").change(function() {             //event
        var this2 = this;                      //use in callback
        $.post(my_ajax_obj.ajax_url, {         //POST request
           _ajax_nonce: my_ajax_obj.nonce,     //nonce
            action: "my_tag_count",            //action
            title: this.value                  //data
        }, function(data) {                    //callback
            this2.nextSibling.remove();        //remove current title
            $(this2).after(data);              //insert server response
        });
    });
});

این کدها را می توانید داخل یک بلاک در صفحه و یا به صورت یک فایل استفاده کنید. برای مثال می توانید این کدها را داخل فایل myjquery.js ریخته و آن را در زیر پوشه ای به نام /js/ به فایل های افزونه اضافه کنید.

نویسنده: |۱۳۹۵/۵/۲۲ ۲۰:۵۲:۲۰۲۲ مرداد ۱۳۹۵|ساخت افزونه وردپرس, سری آموزشی|۲ دیدگاه

درباره نویسنده:

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

۲ Comments

  1. ... ۱۷ آبان ۱۳۹۷ در ۵:۰۳ - پاسخ

    سپاس

    • تیم راهنمای وردپرس ۱۹ آبان ۱۳۹۷ در ۱۰:۰۶ - پاسخ

      موفق باشید

نظر شما چیست