AJAX – אירועים לאחר סיום הפעולה

מה קורה לאחר סיום בהצלחה או כישלון של קריאת הAJAX?

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

לדוגמה יש לנו כפתור של "טען עוד פריטים". שלחנו לשרת כמה פריטים כבר נטענו, השרת ביצע שאילתא לDB והחזיר לנו את הפריטים הבאים בתור. בנקודה הזו אנחנו צריכים לקחת את הפריטים שהתקבלו מהשרת ולהכניס אותם לתוך הHTML כדי שהגולש יוכל לראות אותם. עד לאותו רגע – הנתונים הללו נשארים "מאחורי הקלעים" ולא גלויים לגולש.

דוגמה נוספת – הגולש מילא נתוני טופס ולחץ על שליחה. שלחנו לשרת את נתוני הטופס, השרת שמר את הנתונים הללו לDB או שלח מייל למנהל האתר, כעת הוא מחזיר לנו נניח "success" כאשר השמירה/השליחה הצליחה, ואנחנו רוצים להציג לגולש הודעה שפרטיו נשמרו ונחזור אליו בהקדם. אם נכתוב את הקוד שמציג הודעה לגולש שלא בתוך הפונקציות שנפרט מיד – ההודעה תופיע עוד לפני שהנתונים הגיעו לשרת לצורך שמירה, לכן אנחנו חייבים ללכוד את הזמן שבו פעולת הAJAX הסתיימה.

סטאטוס הקריאה

כאשר פעולת AJAX מסתיימת – היא חוזרת לדפדפן עם סטאטוס. הסטאטוס הזה מסמן לדפדפן אם הפעולה הצליחה/נכשלה/הקישור לא אותר וכדו'. בין הסטאטוסים הנפוצים בעת ביצוע קריאת AJAX נוכל למצוא:

• סטאטוס 200 – הפעולה הצליחה
• סטאטוס 404 – חוזר כאשר הכתובת שאליה פנינו לא קיימת. במקרה כזה יש לוודא שהURL שאליו קראנו אכן תקין.
• סטאטוס 500 – חוזר כאשר יש שגיאת שרת. כלומר הפונקציה שבצד השרת לא תקינה. במקרה כזה, אם זה הקוד שלנו – נדאג לתקן אותו, ואם זה לא קוד שלנו אלא של איזשהו צד שלישי – נוודא שהפרמטרים ששלחנו אכן תקינים, אולי שיבוש בפרמטרים שנשלחו גרם לבעיה בפעולה שהשרת צריך לבצע.

 

ישנן מספר פונקציות שניתן להשתמש בהן בעת סיום פעולת הAJAX. נתעכב כאן על כמה מהפונקציות שבהן יוצא לעשות שימוש.

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

האירועים done / success

אירועים זהים. ככל הידוע לי, הפונקציה done חדשה יותר, ואמורה להחליף את success הישנה יותר.

לכאן נגיע כאשר פעולת הAJAX הסתיימה ללא תקלות – סטאטוס 200 – בלבד. הפונקציה מקבלת כפרמטר את התוכן שחזר מהשרת, כך שנוכל לעשות איתו מה שצריך.

להלן מספר דוגמאות:

// טען עוד פריטים
var total = 40; // כמות הפריטים סך הכל.
jQuery.ajax({
    url: 'myDomain.com/loadmore.php',
    data: {current_posts: 20} // כאן נשלח את מספר הפריטים שיש כבר על המסך
}).done(function(items){
    jQuery('#items_container').append(items); // לאחר קבלת הנתונים מהשרת - נדפיס אותם למסך
});

// שליחת נתוני טופס למערכת שמחזירה סטאטוס ומספר פנייה או הודעת שגיאה
jQuery.ajax({
    url: 'system.com/saveForm.asp',
    data: jQuery('form').serializeArray(), //  פונקציה שאוספת את נתוני הטופס למערך לצורך שליחה
    dataType: 'JSON'
}).done(function(jsonData){
    if(jsonData.status == 'saved') // אם הסטאטוס הוא שהפנייה נשמרה
        alert('פנייתך נשמרה. מספר הפנייה: ' + jsonData.number); // נקפיץ הודעה עם מספר הפנייה
    else // אם הפנייה לא נשמרה
        alert(data.errorMsg); // נקפיץ את ההודעה שחזרה מהשרת
});

ניתן להוסיף עוד המון קוד בעת done או success, הקפצת פופאפים, קידום מונה טעינות, קריאה לפונקציות כאלה ואחרות ועוד.

האירועים fail / error

עוד צמד אירועים דומים. האירוע fail הוא החדש, ועדיף להשתמש בו ולא בerror.

לכאן נגיע כאשר קרתה תקלה כזו או אחרת ופעולת הAJAX נכשלה. לדוגמה:

jQuery.ajax({
    .....
}).done(function() {
    alert( "AJAX succeeded" );
}).fail(function() {
    alert( "AJAX failed!" );
});

הפונקציה שבתוך fail מקבלת 3 פרמטרים, שבהם כמעט ולא נעשה שימוש בדרך כלל. הפרמטרים הם:

1. האובייקט של הקריאה שנכשלה – jqXHR
2. סטאטוס הקריאה – סטרינג. לא נתקלתי במשהו שאינו "error".
3. הודעת השגיאה – סטרינג. לדוגמה "not found"

האירוע always

כאן נוכל לכתוב קוד שאנחנו רוצים שיקרה גם אם הקריאה הצליחה וגם אם היא נכשלה.

לדוגמה:

jQuery.ajax({
    ..... 
}).done(function() {
    alert( "AJAX succeeded" ); 
}).fail(function() {
    alert( "AJAX failed!" ); 
}).always(function() {
    alert( "something to do in every situation!" ); 
});

האירוע ישמש אותנו כדי לכתוב קוד שצריך לקרות בכל מקרה, גם אם הקריאה נכשלה וגם אם הצליחה.

אופן הכתיבה

את האירועים של לאחר סיום פעולת הAJAX נכתוב באחת משתי האפשרויות הבאות:

• הדרך הפשוטה ביותר היא כמו בדוגמאות שהופיעו למעלה בפוסט זה – מיד לאחר סגירת הסוגריים של jQuery.ajax().
• ישנה אפשרות לשמור את כל פונקצית הAJAX שלנו למשתנה, ועליו להפעיל את האירוע של חזרה מAJAX, כך שהוא ישמש כסלקטור שלנו, בדיוק כמו שכפתור כלשהו משמש כסלקטור לאירוע קליק.

אופן המימוש שבאמצעות שמירת הקריאה למשתנה חשובה מאד, והיא תשמש אותנו בעז"ה בפוסט שידבר על עצירת פעולת הAJAX באופן ידני.

מיד תהיינה דוגמאות.

בדומה לתחביר של אירוע קליק – ניתן את שם האירוע (לדוגמה done), ואז בתוך סוגריים את הפונקציה שצריכה לקרות באותו אירוע, בדרך כלל כמובן נשתמש בפונקציה פתוחה (function וכל הקוד הפנימי), אבל זה יכול להיות רק שם של פונקציה שכתובה במקום אחר בקוד.

בתוך הסוגריים של הפונקציה שלנו נקבל את הפרמטרים שמגיעים לנו עם האירוע – בדיוק לפי המפורט למעלה, בפירוט הפונקציות. אלו פרמטרים שקריאת הAJAX החזירה, וכך יש לנו אפשרות להשתמש בנתונים הללו.

דוגמאות לשימוש בנתוני קריאת AJAX

דוגמה לשימוש במשתנה שיכיל את אובייקט הקריאה:

בדוגמה הבאה נשמור את אובייקט הקריאה למשתנה (בשם xhr), ואת אירועי החזרה מקריאת AJAX נפעיל על המשתנה שלנו.

var xhr = jQuery.ajax({
    url: ....,
    method: 'POST'
});
xhr.done(function(data){
    alert('AJAX call is done!');
});
xhr.fail(function(){
    alert('AJAX call failed....');
});

דוגמה לשימוש בפונקציה סגורה שמוצהרת במקום אחר:

בדוגמה הבאה נכין פונקציה שמכניסה קוד HTML לתוך אלמנט כלשהו בDOM. בסיום קריאת הAJAX נפעיל את הפונקציה הזו, כך שהיא תכניס לDOM את הנתונים שחזרו מהשרת.

function append_items(data){
    jQuery('items_container').html(data);
}
jQuery.ajax({
    url: ....,
}).done(append_items);

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