[موسیقی] داگ لوید: بنابراین یکی بیشتر مرتب کردن بر اساس مفهوم است که مرتب کردن بر اساس افتد در زیر چتر جاوا اسکریپت چیزی به نام AJAX است. تا این مرحله، ما تعامل با جاوا اسکریپت محدود شده است به فشار یک را فشار دهید و چیزی اتفاق می افتد. و به طور خاص، چیزی که اتفاق می افتد است از وب سایت ما نگاه و احساس تغییرات. درست؟ مانند به طور خاص، در سند مدل شیء ویدئو، من رنگ پس زمینه را تغییر داد. اما وقتی که من انجام داد، من مجبور برای انجام هر گونه درخواست های ویژه اضافی. من مجبور به درخواست است که سرور من ارسال صفحه جدید. من فقط تغییر آنچه که من در حال حاضر. من مجبور به بارگذاری مجدد صفحه من، و چیزهای قطعا تغییر، به طوری که بزرگ است. اما قطعا وجود دارد برخی از تعامل کتابچه راهنمای کاربر نام داشته است. AJAX یک تکنیک سرد است که اجازه می دهد تا است ما برای به روز رسانی محتوای یک صفحه را و نه فقط نگاه و احساس می کنم، بدون بارگذاری مجدد. 

و به طور خاص وقتی که من می گویند به روز رسانی محتوای یک صفحه را من ادعا نمی کنم ما بازنویسی صفحه با استفاده از جاوا اسکریپت. من گفت: ما در واقع درخواست اطلاعات بیشتر را از سرور بدون صفحه ما نیاز به بارگذاری مجدد. 

حالا که از یک بیت از یک تکنیک پیشرفته تر که ما قصد داریم به بحث درباره در این فیلم. ما قصد داریم برخی از تعامل داشته باشند. اما زمانی که ما انجام دهید، من قصد دارم به ساخت درخواست به وب سرور. در این مورد، فقط چه در حال اجرا وب سرور آپاچی من. من قصد دارم به ساخت اضافی درخواست در حالی که من از دیدن یک صفحه وب، اما صفحه من تازه کردن. 

این فقط رفتن به ناهمگام صفحه من به روز رسانی. و این، در واقع، که AJAX مخفف، آسنکرون جاوا اسکریپت و XML است. XML نوع دیگری از نشانه گذاری است زبان، و شما می توانید از مرتب سازی بر اساس از آن فکر می کنم درست مثل HTML. این کاملا همان چیزی نیست، اما آن را اساسا تنها یک زبان نشانه گذاری. پس از آن یک ناهمزمان است جاوا اسکریپت و یک زبان نشانه گذاری. 

بنابراین در جهت استفاده از این AJAX AJAX technique-- یک زبان برنامه نویسی جداگانه است. این فقط از نوع یک است مجموعه ای از techniques-- ما نیاز به ایجاد یک ویژه جاوا اسکریپت که یک XMLHttpRequest را به نام. در حال حاضر، آن را بسیار آسان برای انجام این کار. ما فقط می گویند VAR، هر آنچه که ما می خواهیم به پاسخ این شیء، برابر XMLHttpRequest را جدید است. و در حال حاضر ما در حال حاضر به دست آمده مرتب کردن بر اساس AJAX شی، یا XMLHttpRequest را جسم، که اجازه خواهد داد ما را به ناهمگام صفحه ما به روز رسانی. 

پس از ما این جدید بدست شی، این XMLHttpRequest را، ما باید برای انجام کاری به آن رفتار onreadystatechange. Onreadystatechange رفتار است که واقعا فقط زمانی که شما یک درخواست به یک صفحه وب، صفحه می رود از طریق تعدادی از مراحل. اول، یک درخواست ارسال نشده است. پس از آن، درخواست شده است فرستاده شده، اما به آن عمل نکرده. پس از آن به درخواست شده است پس از عمل. پس از آن به درخواست است در حال بازگشت به شما ارسال می شود. 

پس از آن، درخواست است به طور کامل در صفحه خود را لود می شود. آن دسته از کشورهای مختلف هستند. و بنابراین ما نیاز به مجموعه ما شی XMLHttpRequest جدید به تغییر زمانی که تغییرات دولت آماده است. و به طور معمول، ما این کار را با تعریف یک تابع بی نام که ما با از آشنا جاوا اسکریپت در حال حاضر، نامیده می شود که تغییرات دولت آماده است. این واقعا خیلی بیشتر از آن است. ما فقط قصد داریم به تعریف شود یک تابع بی نام، نوع مانند آنچه ما در حال انجام جاوا اسکریپت، که در آن ما یک تابع بی نام پاسخ به یک بر روی کلیک کنید، یا زمانی که ما انجام یک نقشه از اشیاء مختلف در یک آرایه. 

چیزی اتفاق افتاده است که چیزی کلیک شد. در این مورد، آن را فقط چیزی است اتفاق می افتد زمانی که دولت از صفحه ما تغییرات. دو ویژگی دیگر وجود دارد که مرتب سازی بر of-- آنها نیست تنها خواص که ذاتی به XMLHttpRequest را، اما آنها آنهایی که بسیار مهم است. چیزی به نام که readyState وجود دارد، که همانطور که شما احتمالا می توانید حدس بزنید، مربوط به onreadystatechange است. آن را در واقع به شما می گوید چه که readyState است. 0، 1، 2، 3، و 4 احتمالات وجود دارد، و آنها از حدود مربوط به چه من فقط در مورد یک ثانیه قبل صحبت شد. 

و پس از آن وضعیت، که امیدوارم اگر همه چیز خوب رفت، 200، که کوتاه است برای، البته، OK، که ما با از HTTP آشنا هستید. بنابراین ما در حال امیدوار است که دولت آماده ما چهار است، و وضعیت ما 200 است. و اگر دولت آماده ما چهار، و پاسخ آماده به قرار داده می شود است صفحه، و وضعیت 200، ما قادر به انجام شد همه چیز با موفقیت، در حال حاضر ما می توانید ناهمگام به روز رسانی صفحه ما بدون نیاز به بارگذاری مجدد کل محتوای آن است. 

بعد از ما تعریف کرده ایم چه اتفاقی می افتد به رفتار onreadystatechange، در و ما بررسی که که readyState 4 و وضعیت 200، پس از آن که همه ما نیاز به انجام است باز کردن یک آسنکرون درخواست، که فقط یک خطای HTTP به طور کلی دریافت درخواست. فقط آن را انجام برنامه نویسی، جای اینکه از طریق مرورگر وب است. و سپس ما که درخواست ارسال کنید. بنابراین چه می کند این شاید مانند نگاه در زمینه؟ بنابراین در اینجا یک تابع است که معاملات با درخواست AJAX. باشه؟ و من گفته ام خودسرانه استدلالی را می پذیرد. و این یک نوع از اسکلت کلی در اینجا. در آغاز، ما خود یک شی XMLHttpRequest جدید است. سپس، من نیاز به تنظیم رفتار onreadystatechange. و بنابراین من قصد دارم برای گفتن زمانی که readyState تغییر، من می خواهم شما را به این تابع. 

که در حال رفتن به درخواست درخواست، اگر که readyState 4، اگر که readyState تغییر کرده است به 4، و وضعیت 200، بنابراین ما تا به حال یک درخواست موفق، من خواهید برای انجام کاری به این صفحه. و ما یک نگاه در یک مثال از آنچه که چیزی ممکن است در یک ثانیه باشد. بنابراین پس از آن، در حال حاضر من تعریف کرده اند تابع بی نام من، تابع پاسخ من هر زمان که readyState تغییر. 

پس من فقط نیاز به باز کردن یک درخواست، با استفاده از روش باز است. و پس از آن، من که درخواست ارسال کنید. و اجازه دهید یک نگاه به عنوان مثال بتن تر از آنچه آژاکس می توانید در صفحات وب ما انجام دهد. بنابراین من در اینجا بسیار ساده صفحه نام home.html. و من اطلاعات می رود در اینجا و نوعی منوی کشویی. 

و ما این را در یک ثانیه دوباره. اما من فکر می کنم ما در حال حاضر باید یک را در کد منبع واقعی نگاه کنید. و به این ترتیب، من قصد دارم برای باز کردن home.html. و خواهیم دید که چه خبر است. بنابراین تا در بالا بسیار در اینجا، من برخی از مسائل جاوا اسکریپت است که در جریان است. 

و در اینجا، من ظاهرا یک 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، من اساسا آماده یک درخواست برای نام + اچ دریافت کنید. و دوباره، نام اینجا است این استدلال که بود به عنوان یک پارامتر به cs50Info منتقل می شود. 

بنابراین اساسا، من در کسی و عبور من نام، که که مجموعه ای از گزینه بود که ما در دیدم منوی کشویی در فرم. من گرفتن که نام. و من گفت: من شما را به دوست لطفا دست آوردن برای من که file.html، و پس از آن که درخواست ارسال کنید. 

و به طوری که onreadystatechange است که به گوش دادن و انتظار و انتظار و در انتظار، تا زمانی که که readyState 4، و وضعیت 200 است. پس از آن آماده به خدمت گرفته شود، و درخواست موفقیت آمیز بود. و سپس در صورت آن است، آن را به تغییر محتویات infodiv به متن پاسخ که من پشت کردم. 

بنابراین اجازه دهید که چگونه این را ببینید در واقع ممکن است کار کند. بنابراین ما به مرورگر من سر پنجره، و ما در اینجا نگاه کنید. بنابراین اجازه دهید نگاهی به چه خبر است در اینجا در AJAX. بنابراین ما کسی را انتخاب کنید از منوی کشویی. بنابراین در این مورد، اجازه دهید فقط هانا را انتخاب نمایید. و توجه داشته باشید که هانا اطلاعات تغییر کرده است، اما من any-- ندارد من صفحه به طور کامل بازنگری نیست. چیزهای ماند. بسیاری از چیزهای ماند. تست AJAX را تغییر دهید. دکمه خودی خود، این منوی کشویی را تغییر دهید. اما اطلاعات وجود دارد انجام تغییر دهید. و بسته به نحوه سرعت حرکت کامپیوتر من، شما در واقع ممکن است که محتوای از بین می رود و پس از آن دوباره ظاهر واقعا به سرعت. که محتوای بودن حذف شده از infodiv، و سپس با یک جایگزین درخواست ناهمزمان جدید است. 

بنابراین اگر من آن را تغییر دهید به گفت، Rob-- و دوباره، نگاهی، و شاید ما آن را در واقع دیدن ناپدید می شوند و ظهور به سرعت. شما می بینید که؟ چگونه آن را فقط ظهور دور، و سپس آن را پر؟ که درخواست آژاکس مرتب کردن بر اساس وقوع است. و به این ترتیب بسته به فرد من را انتخاب کنید، من ساخت یک ناهمزمان مختلف درخواست به یک فایل های مختلف که من بر روی سرور من داشته باشد. و محتویات من infodiv حال به روز رسانی، که بر اساس آن از این من را انتخاب کرده اید. به طوری که است که واقعا همه به AJAX است. این اجازه می دهد تا ما را به این آسنکرون درخواست، به روز رسانی به یک صفحه. بدون نیاز به تازه کردن کل صفحه، ما در حال رفتن به جدید محتوای از آن با ساخت درخواست تازه و جدید به سرور. و بنابراین، می تواند تبدیل به صفحات ما بسیار کمی بیشتر پویا. 

و همانطور که ما بیشتر و پیشرفته تر، شما ممکن است چیزهایی مانند گرفتن مثلا، صندوق ورودی ایمیل، که در آن شما را مجبور به انجام هر کاری. شما لازم نیست که به کلیک بر روی منوی کشویی یا هر چیزی را کلیک کنید، و ناگهان همه از یک، جدید ترین خود ایمیل نشان می دهد تا در بالای صفحه. که فقط یک درخواست AJAX را نیز. آژاکس درخواست خود را سرور، سرور ایمیل، به بیش از تمام اطلاعات ارسال در مورد آخرین ایمیل های شما، و تغییر آنچه شما در دید صفحه نمایش می شود، جدید ترین مجموعه خود را از ایمیل. و اگر شما یکی از جدید در وجود دارد، پس محتوای که دیو تغییر خواهد کرد به بازتاب محتوای به روز شد. من داگ لوید هستم. این CS50 است.