[Музички] Даг LLOYD: Значи уште еден вид на идејата дека вид на паѓа под чадорот на JavaScript е нешто што се нарекува AJAX. До овој момент, на нашите интеракција со вклучите Javascript- е ограничен да им помогнам на копче и нешто се случува. И конкретно, нешто што се случува е нашата веб-сајтови изгледаат и се чувствуваат промени. Нели? Како и особено, во документ Object Model видео, Ја променив боја на позадината. Но, кога ќе го направи тоа, јас не имаат да се направи било какви специјални дополнителни барања. Јас не мора да се побара серверот ме испрати на нова страница. Јас само се промени она што сум веќе. Јас не мора да ја превчитате мојата страница, и дефинитивно работите се променија, па тоа е одлично. Но има дефинитивно некои рачна интеракција на корисникот вклучени. AJAX е кул техника која им овозможува ни да се ажурира содржината на дадена страница, и не само на изглед и чувствувам, без претовар. 

И со посебно кога јас велат ажурирање на содржината на страницата, Јас не велам дека ние ја преработи страната користејќи JavaScript. Сакам да кажам дека ние всушност бара повеќе информации од серверот без нашата страница морале да ја превчитате. 

Сега тој вид на малку понапредна техника дека ние ќе треба да се зборува во врска со оваа видео. Ние ќе треба да имаат некои интеракција. Но, кога ќе се направи, јас ќе одам да се биде Изработка на барањата на веб сервер. Во овој случај, само што е водење мојот Apache веб сервер. Одам да се прават дополнителни барања, додека јас во посета на веб-страница, но мојата страница нема да се освежи. 

Тоа е само ќе да асинхроно ажурира мојот страница. А тоа е, всушност, AJAX која се залага за, е Асинхронни JavaScript и XML. XML е уште еден вид на Селектирај јазик, а вие може да се најде решение на мислам на тоа како HTML. Тоа не е сосема иста работа, но тоа е во основа, само маркап јазик. Така, тоа е асинхрони JavaScript и маркап јазик. 

Значи, со цел да го користите овој AJAX technique-- AJAX не е посебен програмски јазик. Тоа е само еден вид на сет на techniques-- ние треба да се создаде посебна Го вклучите Javascript-објект, кој се нарекува XMLHttpRequest. Сега, тоа е многу лесно да го направите тоа. Ние само се каже var, што и ние сакаме да се нарекуваме овој објект, еднаква на нови XMLHttpRequest. И сега имаме сега добиени на AJAX вид на објект, или XMLHttpRequest објект, што ќе им овозможи на нас да асинхроно ажурирање на нашата страница. 

Откако ќе ги имаат добивано оваа нова објект, овој XMLHttpRequest, ние треба да се направи нешто за да нејзините onreadystatechange однесување. Onreadystatechange однесување е навистина само кога ќе се направи барање на веб-страница, страница оди преку голем број на чекори. Прво, барањето не е испратена. Тогаш, неговото барање било испратени, но не постапил по. Тогаш барањето е постапено. Тогаш барањето е биде испратена назад до тебе. 

Потоа, барањето е целосно натоварен во вашата страница. Тоа се различни држави. И така ние треба да го поставите на нашите нови XMLHttpRequest објектот да се менуваат кога готовс промени на состојба. И обично, го правиме ова преку дефинирање анонимен функција, која ние сме запознаени со од Го вклучите Javascript-сега, дека се нарекува кога подготвени промени на состојба. Тоа навистина не е многу повеќе од тоа. Ние сме само ќе треба да се дефинира анонимен функција, како вид на она што што го правевте во JavaScript, каде што ќе имаат анонимен функција одговори на за клик, или кога ќе се прави мапа на разни објекти во низа. 

Нешто се случи кога нешто не е кликнато. Во овој случај, тоа е само нешто што е случува кога состојбата на нашата страница промени. Постојат два други својства кои се вид of-- тие не се единствените својства кои се својствени за XMLHttpRequest, но тие се прилично важни. Има нешто што се нарекува readyState, која како што веројатно може да се погоди, е во врска со onreadystatechange. Тоа всушност ви кажува што readyState е. 0, 1, 2, 3, и 4 се можностите таму, и тие вид на приближно одговараат на она што Бев само зборува пред една секунда за. 

А потоа и статус, што се надевам дека ако се отиде во ред, е 200, кој е краток за, се разбира, во ред, која ние ја познаваме од HTTP. Значи, ние се надеваме дека нашите подготвени државата е четири, а нашиот статус е 200. И ако нашите подготвени државата е четири, и одговор е подготвен да се стави на страница, и статусот е 200, ние бевме во можност да се направи сè што успешно, Сега можеме да го асинхроно ажурирање на нашата страница без да ја превчитате целата содржина на него. 

Откако ќе ја дефинира она што се случува на однесувањето onreadystatechange, и ние го проверила дека readyState е 4 и статус е 200, тогаш сите ние треба да направите е отвори асинхрони барање, што е само правење некој HTTP GET генерално барање. Само тоа го правам програмски, наместо преку нашата веб пребарувач. А потоа ние испрати тоа барање. Значи она што го прави ова можеби изгледа во контекст? Значи тука е функција што се занимава со Ајакс барања. ВО РЕД? И јас сум произволно рече го прифаќа аргументот. И ова еден вид на општи скелет тука. На самиот почеток, се добива самите нов XMLHttpRequest објектот. Тогаш, јас треба да го поставите onreadystatechange однесување. И така јас ќе одам да се каже кога промени readyState, Сакам да се јавите на оваа функција. 

Која ќе се побара од прашање, ако readyState е 4, ако readyState се смени да биде 4, како и статусот беше 200, па имавме успешна барање, јас Сакате да направите нешто за страната. А ние ќе ги разгледаме на пример на она што дека нешто може да биде во една секунда. Па тогаш, сега имам дефинирано мојата анонимен функција, функција мојот одговор секогаш кога промени readyState. 

Па тогаш, само треба да се отвори побара, со користење на Отворениот метод. А потоа, Јас го испраќам ова барање. И ајде да ги разгледаме во поконкретен пример на она што може да направи за AJAX за веб-страници. Па имам тука многу едноставна страница наречена home.html. И јас имам информации оди тука и некој вид на опаѓачкото мени. 

И ние ќе го ревидира овој во една секунда. Но, мислам дека сега треба да направиме поглед на вистинските изворниот код. И така, јас ќе одам да се отвори home.html. И ќе видиме што ќе се случува. Па нагоре во самиот врв, овде, имам некои JavaScript работи што се случува. 

И тука, јас очигледно имаат А div чиј проект е infodiv, и некои информации се случува да одам таму. А потоа имам оваа форма. И во внатрешноста на оваа форма, имам нешто Одберете нарекува, која е само опаѓачкото мени со еден куп на различни опции. И, очигледно, кога тоа се менува, кога опцијата која е избран има менува, јас ќе одам да се јавите cs50Info некоја функција, а потоа јас ќе одам да помине во this.value, каде што тоа се однесува за која опција е избрана, и вредност е еден од овие тука, опција вредност = еднаква празни "Блумберг", "Бауден," "Чан" и "MALAN." 

Значи она што би можеле да се се случи тука кога ќе го направите ова? Па, ајде да ги погледнете blumberg.html. Изгледа како тоа е само програмка на некои HTML. И всушност, она што јас сум надевајќи се ќе се случи тука е, ќе одам да биде во можност да го приклучиш Оваа HTML директно во мојот веб-страница без да ја превчитате страницата, така што кога Изберам Хана од паѓачката мени, информации во врска со Хана, особено, оваа информација тука во blumberg.html, е она што се појавува на страната. И јас не треба да се освежи. И ако изберам некој друг, нивните информации ќе се појавиш. Како да го направите ова? Повторно, ова бара ни да се користи некои AJAX. И така, ќе се отвори ajax.js. И тука е таа функција, cs50Info. Ако името не е ништо друго, ќе се вратам. Јас не одам за да се направи нешто, ако празните опција е избрана. Инаку, јас ќе одам да се се создаде нов XMLHttpRequest. А потоа јас ќе одам да се каже, кога readyState промени, јавете се на оваа функција. 

А ако е readyState 4 и статусот е 200, тука е малку на jQuery на линијата 13. Но, сите што го правам е велејќи дека, промена на содржината на infodiv да се биде она што се вратив како одговор од моите HttpRequest. 

Која е мојата HttpRequest? Па, тоа е во право овде на линија 18 и 19. Линија 18, јас сум во основа се подготвува А Земи барање за име + html. И повторно, овде е името аргументот дека беше донесен во како параметар cs50Info. 

Значи, во основа, Јас сум поминува во нечија име, што беше тоа сет на опции што сме го виделе во опаѓачкото мени во форма. Јас не го сакам тоа име. А јас велам дека вие би сакале да Ве молиме да се добие за мене дека file.html, а потоа се прати тоа барање. 

И така што ќе onreadystatechange да се слуша и чекање и чекање и чекање, додека readyState е 4, и статусот е 200. Така што е подготвен да се служи, а барањето е успешно. А потоа ако е така, тоа се случува да промена на содржината на infodiv да биде текстот на одговорот што го добив назад. 

Значи, да се види како оваа всушност би можеле да работат. Па ние ќе минете во текот на мојот интернет пребарувач прозорецот, и ние ќе се погледне тука. Па ајде да ги разгледаме во она што се случува овде во AJAX. Па ние ќе го избере некој од опаѓачкото мени. Значи во овој случај, ајде само изберете Хана. И ќе забележите дека Ана информации се промени, но немав any-- ми страница не целосно ја превчитате. Работи останаа. Повеќето од работите остана. AJAX Тест не се промени. Самото копче, оваа опаѓачкото мени не се промени. Но, информациите таму се промени. И во зависност од тоа брзо компјутерот ми се движи, вие всушност може да се види дека содржината исчезнува, а потоа повторно се појавува навистина брзо. Тоа е тоа дали содржината е брише од infodiv, и потоа се заменува со нови асинхрони барање. 

Значи, ако јас се префрлат да се каже, Rob-- и повторно, да погледнам, а можеби и ние ќе го види, всушност исчезнуваат и се појавува брзо. Гледаш дека? Како тоа само се појави далеку, а потоа го полни? Тоа е барање на AJAX вид на кои се случуваат. И така во зависност од лице да изберам, јас сум правење на различни асинхрони барање за друга датотека дека имам на мојот сервер. И содржината на мојот infodiv се ажурирање, врз основа на кој од овие што сте ја одбрале. Значи тоа е навистина сè што постои на AJAX. Тоа ни овозможува да се направат овие асинхрони барања, надградби на една страница. Без да се освежување на целата страница, ние ќе треба да добијат нови содржина од тоа, со тоа што нова, свежа барање до серверот. И така, нашите страници може да стане сосема малку повеќе динамичен. 

И како што се повеќе и повеќе напредни, можете би можеле да се работи како да речеме, вашата e-mail сандаче, каде што не треба да правите ништо. Вие не мора да кликнете на опаѓачкото мени или кликнете на ништо, и одеднаш, вашиот најновите е-маил се појавува на врвот. Тоа е исто така само барање Ајакс. Ајакс бара вашиот сервер, сервер за електронска пошта, да се испрати во текот на сите информации за најновите Вашиот пораки, и менување на она што го гледате на екран за да може вашиот најнов сет на пораки. И ако имате еден нов на таму, тогаш содржината на таа div да се промени за да ја одрази ажурирани содржина. Јас сум Даг Лојд. Ова е CS50.