שימוש ב-AJAX MVC - חלק 1

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

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

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

MVC - דפוס ארכיטקטורה שמפריד יישום לשלושה חלקים: מודל (נתונים), תצוגה (View) ובקר (Controller).

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

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

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

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

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

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

שימוש ב-AJAX MVC - חלק 1

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

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

1. מהו אג'קס: אנחנו עוברים לנושא שנקרא אג'קס, איך משתמשים באג'קס בפרויקט MVC, ואג'קס זה קיצור של JavaScript אסינכרוני ו-XML.

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

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

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

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

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

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

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

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

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

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

12. ההפניה מהלייאוט: הדבר הבא שצריכים לעשות הוא להצביע על הקובץ הזה מהלייאוט הראשי כדי שכל הדפים יוכלו ליהנות ממנו, וניגשים ללייאוט, לאזור של ה-head ובונים כאן תגית סקריפט והמקור שלו מצביע על אותו קובץ jQuery, מאתרים אותו בסקריפטס, וכעת האתר יכול להשתמש ב-JQuery בכל המקומות.

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

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

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

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

17. איתור הלחצן ורישום המאזין: קוראים לספרייה, מאתרים את הלחצן שרוצים לתקשר איתו, והמזהה שצריך להוסיף לו, ואחרי שיצרנו את הלחצן בעזרת הספרייה נרשמים לאירוע הלחיצה שלו, ובאירוע הלחיצה של הלחצן הולכים לכתוב פונקציית שורה אנונימית, וזאת אומרת שהפונקציה הזאת שנמצאים בתוכה כרגע הולכת להתבצע כאשר הלקוח הולך ללחוץ על הלחצן של ההוספה או היצירה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סיכום:

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

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

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

MVC - דפוס ארכיטקטורה שמפריד יישום לשלושה חלקים: מודל (נתונים), תצוגה (View) ובקר (Controller).

להורדת קוד מקור של כל הדוגמאות בקורס MVC – לחץ כאן

פרקי ההרצאה: שימוש ב-AJAX MVC - חלק 1

תמלול ההרצאה: שימוש ב-AJAX MVC - חלק 1

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

00:01
אנחנו עוברים לנושא שנקרא אג'אקס, איך אנחנו משתמשים באג'אקס בפרויקט MVC. אג'אקס זה קיצור של Asynchronous JavaScript and XML.
00:14
עכשיו, מה זה בדיוק אג'אקס ולמה חשוב לנו לדעת את זה? אג'אקס מאפשר לנו לשלוח ריקווייסט לשרת בלי לרפרש את הדף, והרבה פעמים אנחנו מציגים דף ואנחנו רוצים לבצע גלישה לאותו הדף, לא לדף אחר, להביא מידע ולעדכן את הדף עצמו, בלי שהלקוח יראה שכל הדף נטען לו מחדש.
00:38
אם הדף מכיל גרפיקה כבדה, או שהוא מכיל המון נתונים, ואנחנו נגלוש לאותו הדף בשיטה הקלאסית, בוא נניח עם לחצן סבנית, אז הלקוח יראה פשוט שכל הדף מתרפרש לו וזו גלישה פחות נעימה בשביל הלקוח.
00:55
אג'קס מאפשר לחוויית הגלישה להיות יותר אסתטית ויותר נעימה ללקוח. במידה ואנחנו רוצים לגלוש לדף אחר מהדף שבו אנחנו נמצאים, אין לנו כאן ביצוע אג'קס מפני שגם ככה אנחנו רוצים להציג דף אחר ולכן חובה עלינו לטעון את כל הדף מההתחלה.
01:12
כאן לא תהיה אג'קס. כאן יהיה גלישה עם לינק או עם לחצן submit שמביא אותנו לדף אחר או עם JavaScript שמביא אותנו לדף אחר אבל אג'קס זה רק מתי שאנחנו רוצים לגלוש לאותו הדף להביא מידע להישאר באותו הדף ופשוט לעדכן פרת אינפורמציה בדף עצמו בלי לרפרש את כל הדף לכן מאוד חשוב לנו לדעת איך זה מתבצע ב-MVC עם
01:35
כל הנושא של הקונטרולרים והאקשנים לאן בדיוק אנחנו מבצעים גלישה. אז בואו נראה איך אנחנו יכולים לבצע את זה. אז יש לנו כאן את התרגיל שעבדנו עליו מקודם, יש לנו פה את ה-controller product, יש לנו כאן אינדקס שמציג לנו את כל המוצרים, יש לנו את ה-detail שמציג לנו מוצר אחד, preate מאפשר ליצור מוצר חדש, update מאפשר לעדכן מוצר קיים,
02:05
ודיליט מוחק לנו מוצר. אנחנו ניקח אקשן אחד מכל האקשנים האלה, אנחנו נבחר את קריאייט, ואנחנו נבצע יצירה של מוצר בלי לצאת מהדף וללכת לדף אחר, ולהציג איזושהי הודעה למשתמש.
02:19
כלומר, ברגע שהמשתמש רואה את הדף של הקריאייט, הוא מכניס נתונים לגבי מוצר חדש, לוחץ על הלחצן להוספת המוצר, עדיין מתרחשת גלישה לשרת, אבל הגלישה תתבצע באג'קס מאחורי הקלעים, הדף לא יתרפרש ולא ייעלם לשום מקום, השרת יקבל את הנתונים שהמשתמש רוצה להוסיף, יכניס אותם לדאטאבייס, יחזיר תשובה לאותו הדף,
02:47
וכמובן אנחנו נציג את התשובה באחת ממספר דרכים בדף של הלקוח. כל זה יתבצע על ידי אג'קס מאחורי הקלעים ולא יראו שום רפרוש של הדף או טעינה מחדש של כל הדף.
03:00
דוגמה שאתם יכולים לראות דרך אגב זה אם אתם נמצאים בתוך פייסבוק ואתם רואים את הפידים שלכם על הקיר, ופתאום יש לכם איזה פיד חדש של אחד מהחברים, אתם לא רואים את כל הדף של פייסבוק מתרחש, אלא אתם רואים פתאום שמופיע לו החדשה שהתקבלה מאחד החברים, היא מופיעה על הקיר בלי שאנחנו נראה את כל
03:25
הדף נטען מחדש. לכן זה מאוד נוח ומאוד אסתטי להשתמש בצורה כזאת, מפני שהחוויית גלישה היא הרבה יותר נוחה למשתמש.
03:37
אז יש לנו פה את ה-Create, ומה שאנחנו הולכים לראות, אנחנו הולכים לראות מספר שיטות שבהן אנחנו יכולים לשלוח מידע באג'אקס, לעבד אותו בשרת, לקבל בחזרה ללקוח תשובה ולהציג את התשובה באחת ממספר דרכים על הדף שהמשתמש כבר היה בו.
03:56
אז בואו נתחיל. אנחנו הולכים לבצע פה מספר שינויים. קודם כל בואו נראה איך האתר מתנהג ללא אג'אקס. כאשר אנחנו גולשים לאתר אנחנו מנסים עכשיו לבצע הוספה של מוצר חדש, נוסיף איזשהו מוצר מבצע אד ונעלם לנו הדף חזרנו לדף של הרשימה ופה אנחנו רואים את המוצר שהתווסף
04:22
בוא נניח שאנחנו לא רוצים למחוק רגע את המוצר הזה בוא נניח שאנחנו לא רוצים לגשת לדף של כל הרשימה אלא אנחנו מעוניינים שכאשר הלקוח מוסיף מוצר חדש ולוחץ על אד הוא עדיין נשאר בדף הזה בכדי לאפשר לו להוסיף עוד מוצר אם הוא רוצה אם הוא רוצה לחזור לרשימה נארגן פה איזה לינק של לחזור לרשימה
04:47
אבל אנחנו לא רוצים שכאשר אנחנו לוחצים על add כל הדף יתרפרש והוא יישאר באותו המצב שבו היה מקודם. אז איך אנחנו יכולים להשיג את זה? בואו קודם כל נארגן את הלינק שמאפשר לנו לגלוש בחזרה לכל הרשימה.
05:04
זה בשביל לראות אם המוצר אכן התווסף. נלך לproducts, נלך ל-create ונוסיף פה בסוף, אחרי לחצן submit נוסיף איזשהו לינק שיאפשר לגלוש בחזרה לדף הראשי.
05:24
יש לנו פה html, action link, go back to list ואנחנו רוצים לחזור ל-index. בואו נוודא שהלינק עובד כמו שצריך, go back to list, חוזר בחזרה.
05:47
מעולה. עכשיו, איך אנחנו יכולים לטפל ב-request שהתבצע על ידי אג'אקס? הדבר הראשון שאנחנו צריכים לעשות, אנחנו רוצים להשתמש ב-jQuery בכדי לבצע אג'אקס.
06:04
זאת השיטה הפשוטה ביותר, יש כמובן כמה שיטות אחרות להשתמש באג'אקס, תשומה על ידי JavaScript טהור אבל היא טיפה מסורבלת אז לצורך שימוש ב jQuery בואו נצרף לסלושן על ידי נאגט את ספריית jQuery נאתר אותה יש לנו פה את הספרייה מבצע install k נסגור ונראה פה בסקריפט את jQuery אנחנו רואים אותו פה jQuery 2 3 0 מינימום הדבר הבא שאנחנו צריכים לעשות זה להצביע על
06:45
הקובץ הזה מהלייאוט הראשי בכדי שכל הדפים יוכלו ליהנות ממנו. אז ניגש ל-Layout, ניגש לאזור של ה-Head ונבנה כאן סקריפט והסורס שלו מצביע על אותו קובץ jQuery.
07:05
נאתר אותו בסקריפטס, הנה הוא, וכעת האתר יכול להשתמש ב-jQuery בכל המקומות. הדבר הבא שנעשה, נייצר כאן תגית RenderSection מפני שאנחנו הולכים לכתוב JavaScript בדף.
07:27
נקרא לתגית הזאת Scripts ונגדיר שזה ולא require. כעת אנחנו יכולים לגשת לדף שלנו ולבנות סקריפט עבור אג'אקס.
07:49
אז בואו ניגש לכאן, נבנה כאן סקשן, נקרא לו סקריפט, ופה בעצם אנחנו רוצים לכתוב קטע של JavaScript שיבצע את האג'אקס.
08:05
אג'אקס מתבצע ב-JavaScript או JavaScript טהור או על ידי jQuery ב-JavaScript, ולכן אנחנו צריכים לכתוב את זה בצד הלקוח. אוקיי, אז בואו נתחיל לכתוב בצד הלקוח את הקוד כדי לשלוח את הנתונים מהטופס הזה לשרת בלי שלחצן הסדמית יבצע את השליחה עצמה.
08:27
איך אנחנו עושים את זה? בואו נגדיר פה סקריפט. אנחנו נעשה את הכל כרגע באותו הדף בכדי שנראה את הכל במבט אחד, אבל כמובן שבמציאות אנחנו יכולים לבנות קובץ JavaScript חיצוני שמחזיק את הנתונים האלה ופשוט להפנות אליו מכאן.
08:46
אז יש לנו כאן קודם כל את האירוע של jQuery שנקרא Document Ready. האירוע הזה מתבצע תמיד בהרצה של הדף בטעינת הדף ולכן אנחנו יכולים להגדיר כאן רישום לדוגמה לאירועים כשאנחנו רוצים לשנות את הרישום של האירועים הקיימים.
09:08
יש לנו פה את הלחצן סבניט ויש לו אירוע קליק אנחנו רוצים להירשם אליו ובקליק שאנחנו נרשמים אליו אנחנו רוצים לשלוח את המידע הזה באג'קס לשרת ולבטל את פעילות הסבניט כך שהדף לא יתרפרש כי פעילות הדיפולטית של לחצן סדמית זה תמיד לרפרש את הדף.
09:28
אז אנחנו נגדיר פה פונקציית אינליין והפונקציית אינליין הזאת תבצע רישום ללחצן. בואו נקרא ל-JQuery, נאתר הלחצן שאנחנו רוצים לתקשר איתו, נקרא לו btn.create זה ה-ID שאנחנו צריכים להוסיף לו.
10:00
אחרי שיתרנו את הלחצן בעזרת JQuery נירשם לאירוע קליק שלו. באירוע קליק של לחצן אנחנו הולכים לכתוב פונקציית אינליין אוספת.
10:13
זאת אומרת שהפונקציה הזאת שאנחנו נמצאים בתוכה כרגע הולכת להתבצע כאשר הלקוח הולך ללחוץ על הלחצן add או create. מה אנחנו רוצים לעשות בתוך הפונקציה?
10:31
בתוך הפונקציה קודם כל ניקח את תגית הפורם עצמה.