שתי יכולות של תקשורת Ajax ב jQuery מחזירות את הסיפריה הוותיקה לחיים והופכות את השימוש בה להרבה יותר מהנה מכל API מקביל שיש בדפדפן. הראשונה היא השימוש ב Promises והשניה היכולת לקבוע Headers בצורה גלובאלית לכל בקשות התקשורת בעמוד.

1. שימוש ב Promises ב jQuery

עכשיו שדפדפנים תומכים ב async ו await, האופציה לעבור לתקשורת מבוססת Promises נראית הרבה יותר אטרקטיבית. זה עובד מאוד דומה ל Fetch API אבל עם שני הבדלים מרכזיים:

1. ב Fetch API ברירת המחדל היא לא לשלוח עוגיות.

2. ב Fetch API יש להוסיף עוד פעולה של פיענוח ל JSON שחוזר.

הקוד הבא שולף אוביקט JSON משירות מרוחק ומשתמש בו כדי להדפיס ערך לעמוד:

async function load() {
  const id = $('#person_id').val();

  const data = await $.getJSON(`https://swapi.co/api/people/${id}/`);

  $('.name').text(data.name);
}

$('#btnLoad').on('click', load);

אפשר לראות את הקוד בפעולה בקודפן הבא:

2. קביעת Headers גלובאליים

ביישומים גדולים יש כל מיני Request Headers שאתם רוצים לשלוח בכל בקשה. לדוגמא בדרך כלל תרצו להוסיף CSRF Token לכל בקשת Ajax שלכם כדי למנוע מתקפות CSRF. אני תמיד שוכח להוסיף כותרות קבועות כאלה ולכן מאוד אוהב שבפקודת jQuery אחת אני יכול לקבוע את הכותרות לכל בקשת Ajax ביישום.

בהנחה שיש לכם בעמוד תג meta כזה שמגדיר את ה CSRF Token:

<meta name="csrf-token" content="BUuKT+adJbdU5bHKPvXvgkOT8CKu3w/F3Sxj8IHVCFmxymZuy9wgGZPcRh1EH07R+YNnImUdsSOmH4S4uVND8g==" />

תוכלו להשתמש בפקודת ה jQuery הבאה כדי לצרף אותו לכל בקשת Ajax:

jQuery.ajaxSetup({
  headers: { 'X-CSRF-Token': jQuery('meta[name="csrf-token"]').attr('content') },
});

פשוט כותבים את זה באחד מקבצי ה JavaScript הראשונים שנטענים ולא צריך יותר לזכור אפילו שאתם שולחים Token עם כל בקשה. וכן אני יודע שאפשר לכתוב פונקצית תקשורת שלכם שתשתמש ב fetch ותוסיף את ה Headers האלה, אבל אצלי לפחות גם אם אני כותב כזו פונקציה אני שוכח להשתמש בה כשצריך לכתוב קוד חדש.