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

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

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

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

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

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

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

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

DOM - ייצוג עץ של מבנה דף HTML בזיכרון, שמאפשר לקוד לקרוא ולשנות את תוכן הדף ומבנהו.

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

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

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

השיעור האחרון על AJAX מראה שיטה שבה השרת מחזיר JSON, והלקוח ממלא תבנית שמוגדרת מראש בדף.

הכנת התבנית

1. סקריפט לא מוכר: מגדירים תגית script עם מזהה product-template וסוג מומצא שהדפדפן לא מכיר. הדפדפן טוען את התוכן ל-DOM אבל לא מפעיל אותו, ולכן אפשר לגשת אליו ולשנות אותו.

2. סימני מקום: בתוך התבנית כותבים סימני מקום, שהם שמות המאפיינים בתוך סוגריים מסולסלים כפולים, למשל לשם המוצר ולמחיר.

הלקוח

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

4. החלפה בלולאה: עוברים בלולאת for-in על כל המאפיינים של האובייקט שהגיע מהשרת, ומחליפים בכל מאפיין את סימן המקום בערך שלו בעזרת replace.

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

הדגמה

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

למה זה יתרון

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

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

השיעור הבא בקורס: יצירת פילטרים

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

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

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

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

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

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

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

00:15
אז השיטה האחרונה שאנחנו הולכים לראות גם היא הולכת לקבל אובייקט ג'ייסון מהשר"ט שזה הדבר הכי יעיל אבל אנחנו הולכים לעשות משהו טיפה שונה מבחינת התצוגה בצד של הלקוח.
00:28
קודם כל מה שאנחנו הולכים לעשות אנחנו הולכים לבנות איזשהו סקריפ שהוא לא מוכר על ידי הדפדפן ותכף נראה מה הסיבה שאנחנו הולכים לעשות את זה. אז יש לנו פה תגיד סקריפ, סליחה סגירה, אנחנו נותנים לה איי-די, ניקח בוא נגיד פרודקט טמפלייט, ונגדיר לה טייפ מומצא, אין טייפ כזה,
01:06
אנחנו ממציאים כרגע איזה משהו. מה שיקרה זה ש-JavaScript הולכת לטעון את הסקריפט הזה, אבל היא לא הולכת להוציא אותו לפועל כי היא לא מכירה את הטייפ שלו.
01:23
אבל הסקריפט יהיה טעון ב-DOM, וזה אומר שאנחנו נוכל אחר כך לגשת ולבצע עליו שינויים. כלומר, להחליף את המידע שיש בו עם המידע שקיבלנו מההשערה.
01:34
DOM זה Document Object Model, זה בעצם עץ האובייקטים שהדפדפן בונה מהתגיות. הוא יצרף את הסקריפט הזה אליו וזה יאפשר לנו לגשת אליו ב jQuery אבל הוא לא יריץ שום דבר בסקריפט הזה. בתוך הסקריפט בואו נבנה div פתיחה וסגירה נגדיר לדיו את אותה קלאס added product נגדיר את אותו html שהיה לנו
02:13
אבל כאן אנחנו לא ניתן span אלא נמציא איזשהו מרקאפ כלומר שומר מקום שאנחנו הולכים להחליט זה עבור product name ונסגור את ה h3 נבצע את אותו הדבר אוקיי אז יש יש לנו כאן את תפיסת ה-HTML הזאת, שימו לב שה-ID שלה זה Product Template, ואנחנו הולכים עכשיו להגדיר את הגישה ל-HTML האמיתי.
03:12
ב-HTML האמיתי יש לנו למעלה את התגית הזאת שאנחנו צריכים להיפטר ממנה. במקום כל התגית הזאת שנקראת Added Product, אנחנו לא צריכים כבר את הסטייל הזה, נשאיר אותה כתגית ריקה.
03:32
כעת מה שנשאר לנו לעשות זה להכניס את הנתונים למקומות הנכונים. ויש לנו את פונקציית success, קיבלנו את הדאטה מהשרת, ומה שאנחנו הולכים לעשות זה כמה דברים.
03:45
דבר ראשון, אנחנו הולכים לבנות משתנה, נקרא לו טמפלייט, ונאתר בעברת jQuery את ה-id product-template. בואו נסתכל שזה בדיוק אותו הדבר, יש לנו פה product-template.