AJAX

בלי כתוביותעם כתוביות

מילון מושגים:

AJAX - טכניקה שמאפשרת לדף אינטרנט לשלוח ולקבל נתונים מהשרת ברקע ולעדכן את התצוגה בלי לטעון מחדש.

GET - שיטת HTTP לבקשת מידע מהשרת בלי לשנות אותו. הפרמטרים מועברים בדרך כלל בכתובת.

POST - שיטת HTTP לשליחת נתונים לשרת כדי ליצור או לעדכן משאב, למשל שליחת טופס.

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

צד לקוח - החלק של היישום שרץ בדפדפן ומולו המשתמש מתקשר, הכולל את התצוגה והאינטראקציה.

בוליאני - סוג נתונים שיכול לקבל אחד משני ערכים בלבד: אמת (true) או שקר (false).

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

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

AJAX

בשיעור זה אנו לומדים את הטכנולוגיה החשובה והנפוצה Ajax, קיצור של Asynchronous JavaScript And XML. אנו מבינים מדוע עדיף לפנות לשרת מאחורי הקלעים במקום לרפרש את הדף, בונים בעצמנו בקשות Ajax עם האובייקט XMLHttpRequest גם בשיטת GET וגם בשיטת POST, כותבים את צד השרת בדף ASPX וב-Handler מיוחד, ומציגים את התשובה בדף בלי רפרוש.

נושאי הסיכום המוצגים בשיעור:

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

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

3. הקמת הפרויקט: כדי לעבוד עם Ajax צריך גם צד שרת ולא רק HTML, ולכן פותחים פרויקט ASP.NET חדש, מפשטים אותו ומוסיפים לו דף HTML רגיל שישמש כ-home page, וכך יש לנו פרויקט שכולל צד שרת וצד לקוח.

4. מטרת הדוגמה: אנו רוצים לחצן שמביא מהשרת את הזמן האמיתי שלו, כלומר את הזמן בצד השרת, שעשוי להיות שונה משעון הלקוח כי השרת יכול להיות במדינה אחרת, ולהציג אותו ב-span בשם lblServerTime, הכל בלי לרפרש את הדף.

5. אובייקט XMLHttpRequest: מגדירים משתנה גלובלי בשם ajax ומכניסים לתוכו אובייקט חדש מטיפוס XMLHttpRequest. האובייקט הזה אחראי על יצירת הבקשה ב-Ajax, מסוגל לשלוח אותה לשרת מאחורי הקלעים ולקבל בחזרה את המידע ולדווח לג'אווה סקריפט שהמידע התקבל.

6. פונקציית open והפרמטרים שלה: קוראים לפונקציה open שמגדירה את פרמטרי השליחה. הפרמטר הראשון הוא שיטת השליחה: GET שבה הנתונים נשלחים ב-query string בשורת ה-URL, או POST שבה הנתונים נשלחים ב-request אך לא ב-query string. הפרמטר השני הוא הדף שאליו רוצים לשלוח, והפרמטר השלישי הוא ערך בוליאני שמציין האם השליחה אסינכרונית או סינכרונית.

7. שליחת פרמטרים ב-GET: מוסיפים לפרויקט דף Web Form בשם ServerPage.aspx, וכיוון שבחרנו GET מוסיפים את הפרמטרים לשורת ה-URL מופרדים בסימן שאלה, למשל פרמטר format שקובע את פורמט השעה הרצוי: פורמט 1 יחזיר שעה עם שניות ופורמט 2 בלי שניות.

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

9. מניעת שימוש בקאש: בעזרת setRequestHeader מגדירים פרמטרים לקריאה עצמה. מגדירים if-modified-since עם אובייקט Date חדש שמתאר את הזמן הנוכחי. הדפדפן שומר תשובות בקאש שלו, ואם יבקשו ממנו שוב את אותו דף הוא עלול להביא את המידע מהקאש במקום לגלוש לשרת, ואז נקבל את אותה שעה ישנה. על ידי השוואת זמן חדש לזמן הבקשה הקודמת אנו מאלצים אותו לגלוש לשרת בכל פעם מחדש.

10. אירוע onReadyStateChange: מגדירים לאובייקט אירוע onReadyStateChange שרושם פונקציית ג'אווה סקריפט שלנו בשם showResult, שתיקרא כאשר התשובה תחזור מהשרת, ותפקידה לקבל את הנתונים ולעדכן את ה-UI. לבסוף קוראים לפונקציה send שמבצעת בפועל את ה-request לשרת.

11. בדיקת התשובה ב-showResult: הפונקציה נקראת מספר פעמים בדרך, גם ביצירת האובייקט, בשליחה ובקבלת התשובה, ולכן בודקים קודם אם ajax.readyState שווה 4, שהוא הערך האחרון שמציין שהתשובה הגיעה פיזית מהשרת. אחר כך בודקים אם ajax.status שווה 200, שהוא קוד ההצלחה של ה-response, כי הגלישה עלולה להיכשל אם השרת נפל, הדף אינו זמין או טעינו בשם הדף. אם הכל תקין מכניסים ל-innerHTML של ה-span את המידע שהגיע, שנמצא ב-ajax.responseText, ואחרת מציגים את קוד השגיאה.

12. צד השרת בדף ASPX: הקוד מתבצע באירוע Page Load שרץ בכל גלישה לדף. מקבלים את הפרמטר בעזרת Request.QueryString עם השם format, ואם הפורמט שווה 1 כותבים ב-response.write את DateTime.Now עם ToLongTimeString, שהוא השעה עם השניות, ואחרת את ToString, שהוא השעה והתאריך.

13. Response.End: חשוב לסיים את התשובה ב-response.end, כי בלעדיו הדף מחזיר בנוסף לנתון גם את כל תוכן ה-HTML של הדף שגלשנו אליו, ואנחנו רוצים לקבל רק את השעה עצמה. ה-label אינו מסוגל להציג קוד HTML שלם ולכן הרפרוש הציג רק את הכותרת, אבל ב-alert רואים שהתקבל כל הדף, ועם response.end מתקבל רק המידע הרצוי.

14. בקשה בשיטת POST: בונים שני לחצנים, אחד ל-GET ואחד ל-POST, ומשכפלים את הפונקציה ל-createGetRequest ול-createPostRequest. ב-POST משנים את השיטה ל-post, גולשים לדף שרת חדש ServerPage2.aspx, מורידים את הפרמטרים משורת ה-URL ומגדירים אותם בנפרד במשתנה params, בפורמט 2 הפעם.

15. ההגדרות הדרושות ל-POST: ב-setRequestHeader מגדירים Content Type עם הערך application/x-www-form-urlencoded שמציין ששולחים פוסט עם פרמטרים, מגדירים Content Length עם params.length שהוא אורך הפרמטרים שנשלחים, ומגדירים Connection עם close שמציין שהחיבור לשרת סגור בסוף. בפונקציית send שולחים את הפרמטרים עצמם. בצד השרת מקבלים את הפרמטר לא מה-query string אלא מ-Request.Form, שהוא האוסף של הפרמטרים שנשלחו בטופס.

16. העדפת POST על פני GET: נהוג תמיד להשתמש ב-POST ב-Ajax משתי סיבות. ראשית, אין לנו URL גלוי שמישהו צריך להעתיק ולהדביק, והסיבה היחידה לשלוח פרמטרים ב-URL היא כשרוצים שאדם יוכל להעתיק את הכתובת המלאה ולהשתמש בה מאוחר יותר, כמו לינק של וידאו ביוטיוב. שנית, ב-GET סך כל המידע שאפשר לשלוח בפרמטרים הוא 256 תווים בלבד, ואילו ל-POST אין הגבלה כזאת, ולכן למרות שהשיטה מורכבת יותר היא מתאימה ושימושית יותר ל-Ajax.

17. Generic Handler במקום דף ASPX: דף ASPX רגיל מיועד לגלישה ומחזיר HTML מלא עם ממשק משתמש, מכיל המון אירועי שרת שאיננו משתמשים בהם ומאיטים את הביצוע. לכן מוסיפים Generic Handler בשם ServerHandler עם הסיומת ashx, שאין לו ממשק משתמש כלל, מכיל מחלקה שיורשת מ-IHttpHandler ופונקציה אחת בשם ProcessRequest שמקבלת את ה-context שיצר את הריקווסט, ודרכו ניגשים ל-context.request לקבלת הפרמטרים.

18. המאפיין IsReusable: ה-handler מכיל מאפיין שמתאר האם מותר שמספר לקוחות יבצעו קריאות בו-זמנית ואותו טרד בשרת ישרת אותם. כאשר IsReusable שווה false נוצר אובייקט חדש לכל לקוח שגולש לדף, גם בו-זמנית, וכך נמנעות בעיות של מקביליות, וכאשר הוא שווה true מותר להשתמש באותו אובייקט לקריאות חוזרות ונשנות. בודקים את שלוש השיטות ורואים שה-GET מחזיר שעה עם שניות, ה-POST מחזיר שעה ותאריך, וה-handler מחזיר את השעה, הכל בלי רפרוש של הדף.

בסיום השיעור למדנו מהו Ajax ומדוע הוא חשוב, בנינו בקשות Ajax בעצמנו עם XMLHttpRequest והפונקציות open, setRequestHeader ו-send, טיפלנו בתשובות עם readyState ו-status, כתבנו צד שרת בדף ASPX עם response.write ו-response.end, ולמדנו להעדיף POST על GET ולהשתמש ב-Generic Handler לשרת נתונים בלי ממשק משתמש. תודה רבה, ולהתראות בשיעור הבא.

בשיעור הבא נעסוק בנושא JSON.

מילון מושגים:

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

Java - שפת תכנות עילית ומונחית עצמים, הרצה על מכונה וירטואלית (JVM) ומשמשת לפיתוח מגוון יישומים.

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד

פרקי ההרצאה: AJAX

תמלול ההרצאה: AJAX

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

00:01
אנחנו מגיעים לנושא מאוד חשוב בג'אווה סקריפט, מאוד נפוץ, והוא נקרא אג'אקס. אג'אקס זה קיצור של אסינכרוניוס ג'אווה סקריפט אנד אקס-אמ-אל.
00:14
ומה שאג'אקס אומר זה פשוט מאוד לבצע קריאה לשרת מדף ה-HTML שלנו, לשלוח נתונים, לקבל בחזרה מידע, אבל כל זה לא על ידי ריקווסט רגיל שהדף מתרפרש ואנחנו רואים את כל הדף נטען, אלא קריאה מאחורי הקלעים.
00:33
בואו נסתכל על דוגמה איפה קיים לנו אג'אקס. אז אני גולש לאתר gmail.com וזה בעצם האימייל של חברת ג'ימייל. ועכשיו הדף הזה שמבקש ממני to sign in, אני רואה פה user name, אני רואה פה password, אני בעצם רואה שדף הזה הוא דף סטטי, עומד ובכלל לא משתנה.
00:58
אבל אם אנחנו נסתכל טוב טוב בדף, אנחנו נראה את המספר הזה שקופץ פה כל שנייה. מה שאנחנו רואים כאן זה כל שנייה מספר מתעדכן. בואו נקרא מה בעצם המספר הזה אומר. המספר אומר over ואז המספר הזה megabytes and counting of free storage.
01:19
כלומר gmail באה ואומרת לנו יש לנו את המספר הזה שמספר מאוד מאוד גבוה של megabytes בכלל שיש להם עבור storage של אנשים ששמים את המידע שלהם בgmail בכל העולם וכל שנייה אני רואה שהמספר הזה קופץ.
01:37
עכשיו, איך זה יכול להיות שהמספר הזה מתעדכן והדף עצמו נשאר סטטי? הרי רק JavaScript יכולה לעדכן את המספר הזה באופן סטטי. אז האם JavaScript מעדכנת את המספר הזה בלי בכלל קשר לשרת על ידי איזשהו טיימר שמתעדכן כל שנייה ומוסיף מספר מסוים של ערכים למספר הזה?
02:02
אז כמובן התשובה היא לא, אחרת אנשים היו עולים על זה ופשוט היו קולטים שזה מספר מפוברק. מה שקורה זה שכל שנייה gmail בדף הזה גולשת לשרת, מקבלת מהשרת את הנתון הנכון של כמה מגה בייט או פרי סטורג' קיימים ל-gmail, מחזירה באותה שנייה את המספר הזה ל-JavaScript ו-JavaScript מציגה את
02:28
המספר הזה על הדף עצמו. אבל הנקודה היא שהדף נשאר סטטי ואפשר לעשות את הדבר הזה רק עם שימוש ב-Ajax. לא היו משתמשים באג'קס והיו מרצים גלישה לשרת, אז היינו רואים משהו מוזר שאני עושה כרגע, שכל פעם אני לוחץ על F5 בעצם והדף מתרפרש כי ישנו ריקווסט לשרת.
02:56
וזה כמובן חוויית גלישה פחות נוחה למשתמש לראות דבר כזה. אם הדף היה מכיל גרפיקה הרבה יותר כבדה, אז בכלל היה לוקח לו הרבה יותר זמן להתען.
03:06
ולכן אנחנו חייבים שיהיה לנו פה את המנגנון הזה שהדפדפן מאפשר לגשת לשרת בלי לרפרש את הדף, לגשת לשרת מאחורי הקלעים, ריקווסט רגיל בסופו של דבר, הדף בשרת מקבל את הריקווסט, מבצע את הפעולה הדרושה, נניח במקרה הזה לוקח כמה מגה בייט אוף רי סטורג' קיימים, מעדכן אותו,
03:28
ומחזיר אותו ללקוח, שהלקוח מקבל בחזרה את התשובה, מציג אותה על איזשהי לייבל בלי שקרה שום דבר לדף. אז בואו נראה בעצמנו איך אנחנו עושים דבר כזה.
03:39
בשביל לעשות דבר כזה אנחנו צריכים כמובן שיהיה לנו גם צד שרת עכשיו באפליקציה ולא רק html, לא רק צד לקוח. ולכן מה שנעשה, אנחנו פשוט נפתח New Website.
03:52
אנחנו נעשה את זה בפרויקט sp.net. אז בואו ניצור פרויקט חדש ואנחנו רואים כבר שהוא שמור פה בתיקיית אג'אקס. בואו נפתח אותו בתיקייה חדשה, נקרא לה אג'אקס Open, אוקיי.
04:10
ויש לנו כרגע דף, או יותר נכון, פרויקט ASP.NET חדש. בואו נוריד ממנו כמה דברים בשביל שיהיה יותר פשוט להבין מה קורה בו. נוריד את הדף של ה-ASP.NET, נוריד את הסקריפטס, נוריד את appdata ונישאר עם פרויקט פשוט.
04:30
נוסיף new item ונצרף קובץ html פשוט, אבל עדיין יש לנו פה פרויקט שבעצם הוא צד שרת וצד לקוח. בואו נקרא לדף הזה home page, ויש לנו דף html רגיל לגמרי.
04:55
נקרא לזה בכותרת אג'אקס אסינכרוניוס ג'אווה סקריפט אנד אקס אמ.ל. שזה הראשי התיבות של אג'אקס. אוקיי, ועכשיו אנחנו יכולים להגדיר כאן איזה שהיא סקריפט language javascript type text javascript אנחנו רוצים להגדיר לנו לחצן רגיל input type שווה button ומה שאנחנו רוצים לעשות זה להביא משהו מהשראת לדוגמה show server time, מהו הזמן
05:44
האמיתי שקיים בצד השרת, ואנחנו רוצים לעשות את כל זה מבלי לרפרש את הדף, כלומר להביא את המידע ב-ajax מאחורי הקלעים. אוקיי, בואו נגדיר כאן span, נקרא לה id lbl server time, וכמובן הזמן של השעון של הלקוח הוא יכול להיות אחר מאשר הזמן של השעון של השרת, כי יכול להיות שהשרת נמצא במדינה אחת,
06:19
ודפדפן גולש אליו ממדינה אחרת. אנחנו רוצים לקחת את הזמן שנמצא בצד של השרת. אז בואו נבנה פה פונקציה ונקרא לה CreateRequest והיא זאת שתייצר את ה-request ב-Ajax.
06:38
אז בואו נראה איך אנחנו עושים את זה. דבר ראשון אנחנו צריכים לקחת משתנה ברמה גלובלית, נקרא לו Ajax. מה שאנחנו רוצים לעשות זה להכניס לתוכו אובייקט חדש מטיפוס XMLHTTPRequest.
07:00
האובייקט הזה זה אובייקט שאחראי על יצירת ה-request ב-ajax ומסוגל גם לשלוח את הבקשה לשרת מאחורי הקלעים בעזרת מנוע של ajax וגם לקבל בחזרה את המידע מהשרת ולדווח ל-JavaScript שהמידע התקבל.
07:19
דבר הבא שאנחנו רוצים לעשות זה לקרוא לפונקציה שנקראת open שמגדירה כל מיני פרמטרים בשביל לשלוח את הבקשה על ידי ajax.
07:32
הפרמטר הראשון שאנחנו צריכים להגדיר זה מהי שיטת שליחת הנתונים. אנחנו יכולים לשלוח את הנתונים בגט ואנחנו יכולים לשלוח את הנתונים בפוסט. להזכירכם, גט זה אומר שהנתונים הולכים להישלח לשרת ב-query סטרינג ופוסט הנתונים הולכים להישלח לשרת ב-request אבל לא בתוך ה-query סטרינג.
07:54
query סטרינג זה הפרמטרים שנשלחים בשורת ה-URL. אנחנו נעשה דוגמה גם לזה וגם לזה. אז בואו נשלח בגט. הפרמטר הבא שאנחנו צריכים זה לאיזה דף אנחנו רוצים לשלוח את הנתונים.
08:10
אז בואו בשלב הזה נוסיף דף לשרת Add New Item, נבחר ב-Web Forum, נקרא לו Server Page וזה דף ASP.NET רגיל שמתבצע בצד של השרת ואז אנחנו יכולים לקחת את השם שלו, ServerPage.aspx, לחזור לדף ה-HTML ולהדביק אותו פה כי זה הדף שאנחנו גולשים אליו.
08:47
עכשיו בואו גם נשלח לדף הזה פרמטרים, בגלל שאנחנו בשיטת get שהגדרנו כאן אז הפרמטרים נשלחים ב-query string ולכן נגדיר את הפרמטרים ב-query string במחרוזת הזאת בשורת ה-url שמופרדת על ידי סימן שאלה.
09:05
אז איזה פרמטר נשלח? אז בואו נשלח פרמטר שנקרא פורמט שווה בוא נניח 1 או 2 וזה אומר איזה פורמט אני רוצה לקבל את השעה מהצד של השרת.
09:17
אם זה בפורמט 1 בוא נניח שאני רוצה לקבל את השעה ואת השעה פלוס השניות, אם זה פורמט 2 אני רוצה לקבל את השעה בלי השניות, דבר מסוים כזה.
09:31
ככה אנחנו יכולים לשלוח פרמטר לשרת וגם לקבל בחזרה את הפרמטר לפי מה ששלחנו. הדבר הבא שאנחנו רוצים לשלוח זה פרמטר בולעני שנקרא true או false כמובן, שמציין האם השליחה צריכה להיות אסינכרונית או סינכרונית.
09:50
זה אומר אסינכרונית וזה אומר שבזמן שאני שולח את הבקשה הזאתי מבצע בעצם את הריקווסט הדפדפן ימשיך לבצע את הפעילויות הרגילות שלו ולא ימתין עד שהתשובה תגיע בחזרה אם הייתי שולח פולס אז בזמן השליחה הייתי פשוט נתקע עד שהתשובה הייתה מגיעה בחזרה בשיטה השנייה בשיטה הסינכרונית
09:51
משתמשים כאשר אני חייב לקבל את הפרמטר