מה הוא AJAX וצורת הקריאה בjQuery

מה זה Ajax?

ajax היא טכנולוגיה שמשמעותה גישה לשרת תוך כדי ריצת העמוד בדפדפן, ללא טעינת העמוד.

לפי ויקיפדיה:

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

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

1. הדפדפן שעל המחשב שלנו שולח בקשה לשרת שיושב אי שם באינטרנט באמצעות כתובת URL רגילה.
2. השרת מעבד את הבקשה – בשפת שרת כדוגמת PHP וכדו', ויוצר את העמוד שבקשנו כפלט בשפת HTML.
3. השרת מחזיר לדפדפן שלנו את הפלט.

הדפדפן יכול, בשפת JS, לבצע עם הפלט כל דבר שהוא. לדוגמה – להדפיס אותו לHTML (באמצעות append וכדו'), לבצע על הפלט חישובים שונים ועוד.

ההבדלים בין ajax לבין טעינה רגילה:

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

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

דוגמאות לשימושים בAjax:

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

נדגיש

Ajax זו טכנולוגיה. צורת עבודה מסויימת של צד לקוח מול צד שרת. הפונקציה Ajax שתכף נכיר – זו פונקציה שמבצעת (כמה מפתיע) פעולה של Ajax, באמצעות הספריה jQuery. בדיוק כמו שjQuery לא המציאה את האירוע click, אלא עושה שימוש במילה click כדי לתאר אירוע לחיצה על אלמנט.

צורת הכתיבה – הפונקציה .ajax

jQuery.ajax( url [, settings ] );

url – מייצג את הכתובת של הקובץ שאליו אנו ניגשים על השרת. כמו שאמרנו, אנחנו ניגשים לקובץ ספציפי שיושב בכתובת ספציפית על השרת. הגדרה זו היא היחידה שהיא הגדרת חובה בפונקציה ajax של jQuery.

settings – מייצג רשימת הגדרות נוספות, שאת חלקן הנפוץ יותר מבחינתי אביא מיד, שהן אופציונליות.

הגדרות נוספות שניתן לתת לפונקציה

data

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

זה יכול להיות נתון אחד, string, ואז פשוט כותבים data: myStr,  יכול להיות מערך, ויכול להיות אובייקט שמכיל צמדים של name:value. לדוגמא: data: {firstName: 'moshe', lastName: 'cohen'} וכן הלאה. (עוד על שליחת נתוני טופס אפרט בעז"ה בהמשך, בפרק הבא והאחרון).

method

מתודת הHTTP שבאמצעותה תישלח הקריאה לשרת. ברירת המחדל היא GET, אך ניתן לשנות למשל לPOST.

צורת הכתיבה:

method: 'POST'

dataType

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

צורת הכתיבה (במקרה של JSON):

dataType: 'JSON'

דוגמה

var userData = {
    user_name: jQuery('#user_name').val(),
    user_pass: jQuery('#user_pass').val()
};
jQuery.ajax({
    url: '....', 
    method: 'POST,
    data: userData
}).done(function(response){
    if(response == 'success')
       alert('כניסה למערכת בוצעה בהצלחה');
    else
       alert('הכניסה נכשלה. נסו שנית');
});

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

שימו לב שבדרך כלל כאשר אנחנו רוצים לשלוח לשרת נתוני טופס באמצעות AJAX – לא נייצר מערך נתונים באופן ידני, אלא נעדיף להשתמש בserialize או serializeArray וכדו'. הפונקציות הללו עוברות על טופס ובאופן אוטומטי כל שדה שיש לו name – מכניסות למערך, כך שנוכל לשלוח בקלות.

הגדרות נוספות

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

פונקציות נוספות הקשורות בajax

getJson()

מבצעת גם היא פעולת Ajax, ומחזירה json. כמו שנשמע מהשם שלה – הפונקציה עובדת עם מתודת GET בלבד (ולא עם POST). הפונקציה בעצם מקבילה ל

jQuery.Ajax({
   dataType: 'JSON'
   ....
})

גם מידע עליה ניתן למצוא בפירוט רב למדי בתיעוד של jQuery.

.done(function(data){});

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

כמו שניתן לראות – הפונקציה done מכילה בתוכה פונקציה פתוחה, שמקבלת כפרמטר את מה שחזר מהשרת. ניתן לקרוא לזה באיזה שם שרוצים, ובשם הזה להשתמש בתוך הפונקציה של done.

לדוגמא:

jQuery.ajax(....)
.done(function(data){
    jQuery('#messageContainer').html(data); 
});

הפונקציה הנ"ל תכניס לאלמנט שנקרא messageContainer את התוכן שחזר לי מהשרת.

אפשרות נוספת, במידה והשתמשנו בjson תהיה לכתוב

jQuery.ajax({
    url: '....',
    dataType: 'JSON'
}).done(function(data){
    jQuery('#map').html(data.locations); 
    jQuery('#msg').html(data.msg); 
});

יש עוד?

וודאי! את כל המידע השלם על פונקציות נוספות ושימושים נפוצים ומעניינים עבורם תוכלו למצוא בתיעוד של jQuery על נושא ajax

בהצלחה!