לאחרונה רוב קוד התקשורת שאני כותב לא משתמש ב jQuery אלא ישירות ב XMLHttpRequest. התמיכה בדפדפנים טובה, יש את כל היכולות והממשק מאוד נוח. רק מה, יש מספר כותרות שצריך לזכור להוסיף לבקשות כדי שספריות צד השרת שלכם ידעו למה אתם מתכוונים כשאתם שולחים הודעה, כותרות ש jQuery מוסיף באופן אוטומטי לכל הודעה.

1. שליחת הודעות GET

ספריות Ajax כגון jQuery מוסיפות באופן אוטומטי לכל הודעה שלכם את הכותרת X-Requested-With ועבורה את הערך XMLHttpRequest כדי לציין שמדובר בבקשת Ajax (בניגוד לבקשה עבור עמוד מלא). כך אפשר לתת טיפול שונה לכל אחד מהמקרים.

הכותרת השניה החשובה היא Accept ותפקידה לספר לשרת איזה סוג תוכן אנו מצפים לקבל בתגובה לבקשה. גם כאן ספריות צד-שרת נעזרות בערך זה כדי לדעת מה לשלוח.

השמטה של כל אחת משתי הכותרות יכולה לעבוד, אבל גם יכולה לא לעבוד במקרים אחרים. שלחו את שתיהן ליתר ביטחון בכל בקשת GET באופן הבא:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/thing');

xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

xhr.addEventListener('load', handleResponse);

xhr.send();

2. שליחת הודעות POST

להודעות POST יש לשלוח את שתי הכותרות של GET ובנוסף הרבה פעמים הודעות POST כוללות תוכן (למשל אוביקט JSON עם פרמטרים). כדי שהשרת יבין מה סוג האוביקט וידע לקרוא אותו נכון, יש להוסיף כותרת Content-Type לבקשה. בנוסף את תוכן האוביקט רושמים כפרמטר לפונקציה send לאחר המרתו לטקסט רגיל.

הנה הקוד:

var xhr = new XMLHttpRequest();
xhr.open('POST', '/path/to/thing');

xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.addEventListener('load', handleResponse);

xhr.send(JSON.stringify({ name: 'ynon', url: 'www.tocode.co.il' });

3. פענוח תגובת השרת

האתגר המרכזי בפונקציה handleResponse הוא לזכור לטפל בשגיאות צד שרת או גישה לכתובת לא נכונה באמצעות בדיקת ה HTTP Status Code. הקוד נראה כך:

function handleResponse(ev) {
  var xhr = ev.target;
  if (xhr.status !== 200) {
    // handle HTTP error
    return;
  }

  var result = xhr.responseText;
  // if JSON is expected
  var resultObject = JSON.parse(result);

  // handle result object
}