PracticU

הסבר על AJAX

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › הסבר על AJAX
מילון מושגים:
AJAX - טכניקה שמאפשרת לדף אינטרנט לשלוח ולקבל נתונים מהשרת ברקע ולעדכן את התצוגה בלי לטעון מחדש.
צד לקוח - החלק של היישום שרץ בדפדפן ומולו המשתמש מתקשר, הכולל את התצוגה והאינטראקציה.
צד שרת - החלק של היישום שרץ בשרת ואחראי על הלוגיקה, מסדי הנתונים והעיבוד שמאחורי הקלעים.
Node.js - סביבת ריצה שמאפשרת להריץ קוד JavaScript מחוץ לדפדפן, בעיקר בצד השרת.
C# - שפת תכנות מונחית עצמים של מיקרוסופט, המשמשת בעיקר לפיתוח יישומים על פלטפורמת .NET.
Python - שפת תכנות עילית וקריאה, נפוצה בפיתוח, אוטומציה, ניתוח נתונים ולמידת מכונה.
תגובה - המידע שהשרת מחזיר ללקוח בתשובה לבקשה, הכולל בדרך כלל נתונים וקוד סטטוס.
Northwind - מסד נתונים לדוגמה של מיקרוסופט, המדמה חברת מסחר ומשמש ללימוד ולהדגמת שאילתות SQL.
הסבר על AJAX
AJAX היא הטכניקה שמאפשרת לדף אינטרנט לפנות לשרת מרוחק ולהביא או לשלוח מידע, בלי להחליף את הדף ובלי רענון. ההרצאה מסבירה את הרעיון לפני שעוברים לעבודה בפועל.
איך זה עובד
1. מה זה: AJAX הוא ראשי תיבות של Asynchronous JavaScript and XML. זה מנגנון JavaScript ששולח בקשה לשרת, שיכול להיות השרת שלנו או של מישהו אחר, כדי להביא או לשלוח מידע טהור.
2. מה זה לא: זו לא גלישה לדף אחר, לא לחיצה על לינק או על לחצן submit, ולא גורמת לרענון הדפדפן. המשתמש יכול בכלל לא לדעת שהייתה בקשה.
3. XML ו-JSON: בעבר המידע נשלח ונקלט כ-XML, בתגיות. היום ברוב המקרים משתמשים ב-JSON, גם לשליחה וגם לקבלה.
4. התהליך: הדפדפן (ה-Frontend) מריץ קוד JavaScript, בדרך כלל בעזרת ספרייה מוכנה שמאחורי הקלעים כתובה ב-JavaScript מקורי, ושולח AJAX Request. בצד השרת (Backend) פונקציה בשפה כלשהי, כמו Node.js, C#, Java, Python או Ruby, מקבלת את הבקשה ומחזירה Response עם מידע טהור. הדפדפן מקבל את המידע ומציג אותו.
מה הלאה
בהמשך הסדרה משתמשים ב-AJAX בפרויקט כדי לפנות לשרת של חברת Northwind, להביא ממנו מוצרים ולהציג אותם באתר.
אחרי ההרצאה אפשר להסביר מה AJAX עושה ומה ההבדל בינו לבין מעבר לדף אחר.
השיעור הבא בקורס: התקנת Northwind אוטומטית דרך npm

פרקי ההרצאה: הסבר על AJAX

  1. 00:00

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

  2. 00:41

    משמעות ראשי התיבות AJAX

  3. 01:21

    גלישה ללא החלפת דף ורענון

  4. 02:17

    פורמט XML מול JSON

  5. 02:57

    סכמת שרת, Frontend ופונקציה

תמלול ההרצאה: הסבר על AJAX

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

  1. 00:02

    אנחנו מגיעים לנושא חדש וממש מעניין שנקרא Web Access. כאן אנחנו הולכים לראות איך אנחנו יכולים לגלוש לשרת מרוחק בכדי להביא מידע.

  2. 00:16

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

  3. 00:33

    הטכניקה הזאת נקראת AJAX. בעזרת AJAX אנחנו יכולים לגלוש לשרת מרוחק ולהביא מידע. אז ראשית, בואו נבין מה זה AJAX. AJAX זה ראשי תיבות של Asynchronous JavaScript and XML. בואו נבין מה זה.

  4. 00:54

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

  5. 01:17

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

  6. 01:42

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

  7. 02:06

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

  8. 02:31

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

  9. 02:57

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

  10. 03:24

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

  11. 03:42

    הגלישה הזאת הולכת לפונקציה, זה לא דף, אנחנו לא גולשים ומביאים דף, יש שם איזושהי פונקציה מסוימת, זה תמיד פונקציה שכתובה באיזושהי שפת תכנות שנמצאת בבק אנד, זה יכול להיות בנוד Js, C-Sharp, Java, פייתון, רובי, ויבי,

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: שליחת פרמטרים לראוטינג - ריאקט

ההרצאה הבאה: התקנת Northwind אוטומטית דרך npm

הרצאות קשורות מקורסים אחרים

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

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS