מדריך jQuery – AJAX

מה זה Ajax?

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

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

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

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

  1. הדפדפן שעל המחשב שלנו שולח בקשה לשרת שיושב אי שם באינטרנט.
  2. השרת מעבד את הבקשה – בשפת שרת – PHP/ASP,  וכדו', ויוצר את העמוד שבקשנו כפלט בשפת HTML
  3. השרת מחזיר לדפדפן שלנו את קובץ הHTML שנוצר לו, ומצרף אליו משאבים שונים הנחוצים לעמוד (תמונות, קבצי CSS, JS וכו')

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

אז זהו. שלא.

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

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

  • בטעינה רגילה נטען כל העמוד, עם כל המשאבים. ב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, ולגשת ישירות לערכים שהוא מכיל.

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

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

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

getJson()

מבצעת גם היא פעולת Ajax, ומחזירה json. היא בעצם מקבילה ל

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(....)
.done(function(data){
  jQuery('#map').html(data.locations);
jQuery('#msg').html(data.msg);
});

יש עוד?

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

בהצלחה!

כתוב/כתבי תגובה