HTML וכל מה שמסביב

מה זה Ajax?

אז מה זה?

Ajax הם ראשי תיבות של Asynchronous JavaScript and XML. זוהי למעשה דרך להעביר נתונים מהשרת לדף אינטרנט בלי צורך לטעון את כל הדף מחדש.

שינוי אזור מסוים בדף נעשה בעזרת מנגנון ה DOM, וזה הופך את הדף לקריא יותר.

איך זה עובד?

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

כאן יש הבדל בין IE (אינטרנט אקספלורר) לדפדפנים אחרים.

ב IE, האובייקט לבקשת נתונים נקרא ActiveXObject, ובדפדפנים אחרים הוא נקרא XMLHttpRequest או בקיצור XHR.

הקוד בג'אווה סקריפט צריך לזהות את הדפדפן וזה יכול להעשות למשל בעזרת הבדיקה window.XMLHttpRequest . אם הערך הזה מחזיר true, אז זה כל דפדפן חוץ מ IE, אחרת זה IE. לדוגמא:

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

או באופן א-סינכרוני בעזרת הקוד הבא:

כאשר בשורה 17 יוצרים פונקציה שתופעל כאשר התוצאה תגיע מהשרת.

בדוגמא ה א-סינכרנית משתמשים במשתנה readyState של האובייקט xmlHttp כדי לבדוק מה מצב התשובה. ל readyState יש מספר ערכים:

  1. 0 – הבקשה לא מאותחלת.
  2. 1 – הבקשה אותחלה.
  3. 2 – הבקשה נשלחה.
  4. 3 – הבקשה בעיבוד ע"י השרת.
  5. 4 – הבקשה הושלמה.

כאשר קבלנו את התשובה אפשר לעדכן את הדף. למשל, אם בעמוד ה HTML יש אלמנט עם id="test":

<h2 id="test">Some text</h2>

אז בתשובה (במקום ה …) אפשר לשים את הקוד הבא:

document.getElementById("test").innerHTML = xmlHttp.responseText;

כמובן שצריך להיות קוד בשרת שיממש את הטיפול בבקשה.

דוגמא מלאה:

הערות בקשר לדוגמא:

  1. בשורות 40-42 הגדרתי כפתור, שכאשר עוברים עםהעכבר מעליו, תקרא הפונקציה ()sendRequest.
  2. בשורות 10-18 אני יוצר את האובייקט המתאים (בדקתי רק עבור firefox).
  3. בשורות 21-27 הגדרתי פונקציה שתקרא כאשר תגיע תשובה מהשרת. הקריאה כאן תהיה א-סינכרונית. בשורה 25 אני מעדכן את הטקסט שבכפתור.
  4. בשורות 28-36 אני מבצע את הקריאה לשרת, וזאת בעזרת exception handling. יש אפשרות להעביר פרמטרים לשרת (ואפילו מקובל לעשות את זה) אבל למען הפשטות לא העברתי אף פרמטר בדוגמא הזאת. במקום GET (בשורה 30) אפשר להשתמש ב POST, אך אני אינני נכנס לפרטים לגבי ההבדלים בין GET ל POST. הסקריפט שמורץ בשרת הוא ajaxresp.php .
  5. חשוב: כדי למנוע התקפות על אתרי אינטרנט (התקפות XSS) יש בדפדפנים המודרנים מנגנון שמאפשר לקוד ג'אווה סקריפט לגשת רק לאותו דומיין שבו נכתב הסקריפט. אני בזבזתי מספר שעות כדי להבין למה הדוגמא שלי לא עובדת (עד שהיא עבדה בסוף). בעקרון, צריך להשתמש באותו דומיין (למשל localhost) כדי שהדוגמא תעבוד. ייתכן שבעתיד אני אכתוב עמוד על שרתים (בייחוד על Apache).
  6. תכנית ה PHP בשרת נראית כך:
    ומה שהדוגמא הזאת עושה הוא פשוט החלפת הטקסט בכפתור מ This is some text ל Result from Ajax כאשר עוברים עם העכבר על פני הכפתור.

רפרנס

אתר מצוין על Ajax באנגלית: w3schools.

אתר בעברית פה (כולל הפניה לאתר של רן בר-זיק).

להגיב »

עדיין אין תגובות.

RSS feed for comments on this post. TrackBack URI

להשאיר תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

יצירה של אתר חינמי או בלוג ב־WordPress.com.

%d בלוגרים אהבו את זה: