מה זה AJAX וכיצד ניתן להשתמש בו בוורדפרס

מה זה Ajax?

"AJAX (ראשי תיבות של Asynchronous JavaScript And XML) היא טכניקה ליצירת יישומי רשת אינטראקטיביים המבוססים על קוד המורץ במסגרת דף HTML בודד, ולא כיישום מרובה דפים, כמקובל בסביבת ה-Web. מטרתה העיקרית של הטכניקה היא שיפור חוויית המשתמש והאצת מהירות הטעינה של דפי האינטרנט, מאחר שהיא מאפשרת לעדכן רק חלקים מבוקשים בדף האינטרנט, ללא צורך לטעון את הדף כולו מחדש במחשבו של המשתמש." להמשך קריאה בויקיפדיה
אמ;לק: AJAX זוהי טכנולוגיה המאפשרת לנו לשלוח מידע לשרת ולקבל מידע ממנו ללא כל צורך בריפרוש הדף הנוכחי בו היוזר נמצא.

מספר יתרונות בשימוש ב-AJAX:

• ממזער את השימוש בתעבורת השרת ומייעל את הפעולות היות והשרת אינו נדרש לעבד המון נתונים אלא את הרלוונטים בלבד בהתאם לבקשה שנשלחה, מה שמוביל בסופו של דבר לשיפורי מהירות
• חיסכון בזמן: למשתמשים וגם לשרת מכיוון שהמשתמש יכול לראות את התגובה מהשרת באופן מיידי ואילו השרת, כפי שציינו קודם, אינו נדרש לעבד רכיבים נוספים.
• חווית משתמש נעימה יותר: אין ספק שכיף לקבל נתונים חיים ולהימנע מרענון העמוד ו/או מעבר בין דפים לקבלת המידע.

AJAX בוורדפרס

אז… אחרי שחידדנו לגבי AJAX, הגיע הזמן לדבר על השימוש בטכנולוגיה במערכת ניהול התוכן הפופולרית בעולם – וורדפרס.
וורדפרס עושה שימוש נרחב ב-AJAX בממשק הניהול (בעיקר בעזרת jQuery בשל הפשטות ביחס ל-VanillaJS ומפני שוורדפרס מגיעה עם גרסת jQuery מובנית), בפעולות שוטפות שהנכם מבצעים, למשל: בהוספת/הסרת קטגוריות/תגיות/תגובות ואפילו במנגנון השמירה האוטומטי, שפועל נהדר בזמן כתיבת שורות אלו 🙂

אז איך נראה תהליך העבודה? פשוט מאד:

1. הגולש מבצע פעולה (למשל: לחיצה על כפתור) ששולחת בקשת AJAX מאחורי הקלעים אל wp-admin/admin-ajax.php בצירוף ה-action הרלוונטי ופרמטרים נוספים במידת הצורך.
   ניתן לשלוח את הבקשה ב-GET או ב-POST והיא זו שתפעיל את ה- action הרלוונטי בהתאם לערך המועבר בבקשה תחת action.
2. הקוד שמעבד את הבקשה ב- admin-ajax.php מייצר עבורכם 2 הוקים (Hooks) לשימוש:
   1. wp_ajax_YourActionName עבור משתמשים אשר מחוברים למערכת.
   2. wp_ajax_nopriv_YourActionName עבור גולשים שאינם מחוברים למערכת.

   שימו לב: YourActionName זהו הערך שהועבר תחת action בבקשת AJAX המתוארת בסעיף הקודם.
   בנוסף, במידה ותרצו לטרגט את כולם (משתמשים מחוברים + אורחים) יהיה עליכם לעבוד עם 2 ההוקים.

דוגמאות וסימוכין

דוגמה לבקשת AJAX בוורדפרס בעזרת jQuery:

jQuery.ajax({
         type : "post", // You can send the request in POST/GET
         dataType : "json",
         url : "/wp-admin/admin-ajax.php",
         data : {action: "YourActionName"},
         success: function(response) {
            console.log(response);
         }
});

הערות:

• כאמור, ניתן כמובן לשלוח את הבקשה ב-GET/POST
• יש לשלוח את הבקשה אל wp-admin/admin-ajax.php
• שימו לב שבדוגמה זו העברתי action בלבד, תוכלו להעביר אילו ערכים שתרצו (מישהו אמר Nonce?)

טיפול בבקשה ע"י הגדרת האקשנים (actions) עבור 2 ההוקים שנוצרו:

add_action("wp_ajax_YourActionName", "functionForUsers");
add_action("wp_ajax_nopriv_YourActionName", "functionForGuests");

function functionForUsers() {
         die(json_encode(array('msg'=>'Hello')));
}
function functionForGuests() {
         die(json_encode(array('msg'=>'Please login')));
}

כפי שבוודאי הבנתם, יצרתי כאן 2 פונקציות שעתידות להכנס לפעולה עבור משתמשים מחוברים/אורחים בהתאם להוק שנוצר בעקבות בקשת ה-AJAX שנשלחה.

ניתן לקרוא בהרחבה על עבודה נכונה עם AJAX באתרים מבוססי וורדפרס ב-Codex הרשמי