[השמעת מוסיקה] דאג LLOYD: אז עוד אחד סוג של רעיון ש סוג של נופל תחת המטרייה של JavaScript היא משהו שנקרא AJAX. עד לנקודה זו, שלנו אינטראקציה עם JavaScript היה מוגבל לדחוף כפתור ומשהו קורה. ובאופן ספציפי, משהו שקורה הוא אתרי האינטרנט שלנו להיראות ולהרגיש שינויים. יָמִינָה? כמו בפרט, ב וידאו מודל אובייקט מסמך, שיניתי את צבע הרקע. אבל כאשר אני עשיתי את זה, לא היה לי לעשות כל בקשות מיוחדות נוספות. אני לא צריך לבקש ש השרת לשלוח לי דף חדש. אני רק שיניתי את מה שכבר היה לי. אני לא צריך לטעון מחדש את הדף שלי, ודברים בהחלט השתנו, אז זה נהדר. אבל יש בהחלט כמה אינטראקציה הוראות שימוש מעורבת. AJAX הוא טכניקה המאפשרת מגניב שלנו לעדכן את התוכן של דף, ולא רק את המראה ו מרגיש, מבלי לטעון מחדש. 

ובמיוחד על ידי כש אומר עדכון התוכן של דף, אני לא אומר שאנחנו לשכתב הדף באמצעות JavaScript. אני אומר שאנחנו באמת לבקש מידע נוסף מהשרת ללא בדף שלנו יש כדי לטעון מחדש. 

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

זה רק הולך אסינכרוני לעדכן את הדף שלי. וזה, למעשה, שAJAX מייצג, הוא Asynchronous JavaScript ו- XML. XML הוא סוג אחר של סימון שפה, ואתה יכול למיין של חושב על זה בדיוק כמו HTML. זה לא בדיוק אותו הדבר, אבל זה בעצם רק שפת סימון. אז זה אסינכרוני JavaScript ושפת סימון. 

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

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

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

משהו קרה כש משהו לוחץ. במקרה זה, זה פשוט משהו שהוא קורה כאשר המדינה של הדף שלנו שינויים. ישנם שני מאפיינים אחרים הסוג של-- הם לא רק הנכסים ש טבוע XMLHttpRequest, אבל הם די חשובים אלה. יש משהו שנקרא readyState, שכפי שאתה בוודאי יכול לנחש, הוא קשור לonreadystatechange. זה בעצם אומר לך מה הוא readyState. 0, 1, 2, 3, ו -4 הם האפשרויות שיש, והם סוג של בערך מתאים למה ש אני רק מדבר על לפני שנייה. 

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

אחרי שהגדרנו את מה שקורה לonreadystatechange ההתנהגות, ואנחנו כבר בדקנו שreadyState הוא 4 ומעמד הוא 200, אז כל מה שאנחנו צריכים לעשות הוא לפתוח את אסינכרוני בקשה, שרק עושה Http בדרך כלל מקבל בקשה. פשוט עושה את זה תכנותי, במקום באמצעות דפדפן האינטרנט שלנו. ולאחר מכן אנו שולחים בקשה ש. אז מה עושה את זה אולי נראה כמו בהקשר? אז הנה פונקציה ש עוסק בבקשות AJAX. אוקיי? ואני כבר אמרתי באופן שרירותי היא מקבלת את הטענה. וזה סוג של שלד כללי כאן. בהתחלה מאוד, אנחנו מקבלים את עצמנו אובייקט XMLHttpRequest חדש. אז, אני צריך להגדיר את התנהגות onreadystatechange. ואז אני הולך להגיד כאשר שינויי readyState, אני רוצה שתקרא בפונקציה זו. 

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

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

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

וכאן, יש לי כנראה div id infodiv, וקצת מידע הולך ללכת לשם. ואז יש לי טופס זה. ובתוך זה טופס, יש לי משהו נקרא בחר, ש רק תפריט נפתחת עם חבורה של אפשרויות שונות. וככל הנראה, כאשר שמשנה, כש יש האפשרות שנבחרה השתנה, אני הולך לקרוא כמה פונקציה cs50Info, ואז אני הולך ל לעבור בthis.value, שם זה מתייחס ל איזו אפשרות נבחר, וערך הוא אחד מאלה כאן, אפשרות ערך = שווה ריק, "בלומברג", "באודן," "צ'אן," ו" מלאן. " 

אז מה בעצם אולי יקרה כאן כשאני עושה את זה? ובכן, בואו ניקח להסתכל blumberg.html. נראה כאילו זה רק קטע של כמה Html. ולמעשה, מה שאני מקווה הולך לקרות כאן הוא אני הולך להיות מסוגל לחבר Html זה ישירות לתוך דף האינטרנט שלי מבלי לטעון מחדש הדף, כך שכש אני בוחר חנה מהנפתחת תפריט, מידע על חנה, במידע מסוים, זה כאן בblumberg.html, זה מה שמופיע בדף. ואני לא צריך לרענן. ואם בחרתי מישהו אחר, המידע שלהם היה מופיע. איך אני עושה את זה? שוב, זה דורש שלנו להשתמש בחלק AJAX. וכך, אנו פותחים את ajax.js. וכאן הוא פונקציה ש, cs50Info. אם שם שום דבר, אני חוזר. אני לא הולך לעשות שום דבר אם האפשרות הריקה נבחרה. אחרת, אני הולך ליצור XMLHttpRequest חדש. ואז אני הולך להגיד, כאשר שינויי readyState, לקרוא לפונקציה זו. 

ואם readyState הוא 4 והמעמד הוא 200, הנה קצת של jQuery על קו 13. אבל כל מה שאני עושה הוא אומר, לשנות את התוכן של infodiv להיות כל מה שיש לי גב כ תגובה מHttpRequest. 

מה הוא HttpRequest שלי? ובכן, זה נכון כאן בקו 18 ו -19. קו 18, אני בעצם מכין GET בקשה לשם + .html. ושוב, שם כאן הוא את הטענה כי הייתה עבר כבפרמטר לcs50Info. 

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

וכך onreadystatechange כי הוא הולך להיות הקשבה ומחכה ומחכה ומחכה, עד readyState הוא 4, והמצב הוא 200. אז הוא מוכן להיות מוגש, והבקשה הייתה מוצלחת. ואז אם זה, זה הולך לשנות את התוכן של infodiv להיות טקסט התגובה שחזרתי. 

אז בואו לראות איך זה אולי באמת עובד. אז ניסע מעל לדפדפן שלי חלון, ואנחנו נראים כאן. אז בואו נסתכל מה קורה כאן בAJAX. אז אנחנו תבחרו מישהו מהתפריט הנפתח. אז במקרה הזה, בואו רק לבחור חנה. והודעה שחנה של מידע השתנה, אבל לא היו לי any-- הדף לא טען מחדש לחלוטין. הדברים נשארו. רוב הדברים נשארו. מבחן AJAX לא השתנה. הכפתור עצמו, זה תפריט הנפתח לא שינה. אבל מידע שיש עשה שינוי. ותלוי איך מהירות מהלכי המחשב שלי, אתה באמת יכול לראות שהתוכן נעלם ולאחר מכן מופיע שוב באמת בִּמְהִירוּת. זה להיות התוכן נמחק מinfodiv, והוחלף לאחר מכן ב בקשת אסינכרוני חדשה. 

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

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