[Гуляе музыка] Даг Lloyd: Так што яшчэ роду паняцці, што роду трапляе пад парасонам JavaScript з'яўляецца тое, што называецца AJAX. Да гэтага моманту, нашы ўзаемадзеянне з JavaScript была абмежаваная націснуць Кнопка і нешта адбываецца. І канкрэтна, тое, што адбываецца нашы сайты выглядаць і адчуваць сябе змены. Дакладна? Як і ў прыватнасці, у аб'ектная мадэль дакумента відэа, Я змяніў колер фону. Але калі я гэта зрабіў, у мяне не было рабіць нейкія адмысловыя дадатковыя запыты. У мяне не было прасіць, каб сервер адправіць мне новую старонку. Я толькі што змяніў тое, што я ўжо. У мяне не было, каб перазагрузіць маёй старонцы, і рэчы вызначана змянілася, так што гэта выдатна. Але ёсць, безумоўна, некаторыя ўдзел кіраўніцтва узаемадзеянне з карыстальнікам. AJAX з'яўляецца прахалодны метад, які дазваляе нам абнавіць кантэнце старонкі, і не толькі погляд і адчуваю, без перазагрузкі. 

І асабліва, калі я кажуць абнаўлення кантэнце старонкі, Я не кажу, перапішам старонка з дапамогай JavaScript. Я кажу, што мы на самай справе прасіць больш інфармацыі з сервера без наша старонка неабходнасці перазагрузкі. 

Цяпер, нібы крыху больш прасунутая тэхніка што мы збіраемся казаць аб у гэтым відэа. Мы збіраемся, каб мець некаторы ўзаемадзеянне. Але калі мы робім, я буду рабіць запыты да вэб-серверу. У гэтым выпадку, толькі што працуе мой вэб-сервер Apache. Я збіраюся рабіць дадатковыя запыты, пакуль я наведвання вэб-старонкі, але мая старонка не абнаўляецца. 

Гэта проста будзе асінхронна абнавіць старонку. І гэта, на самай справе, якія AJAX расшыфроўваецца, з'яўляецца асінхронны JavaScript і XML-. XML з'яўляецца іншы выгляд разметкі мова, і вы можаце сартаваць думаць пра яго, як і HTML. Гэта не зусім тое ж самае, але гэта ў асноўным проста мова разметкі. Так што гэта асінхронны JavaScript і мова разметкі. 

Так, каб выкарыстоўваць гэта AJAX AJAX technique-- не з'яўляецца асобным мовай праграмавання. Гэта проста свайго роду набор techniques-- мы неабходна стварыць спецыяльны Аб'ект JavaScript, які называецца XMLHttpRequest. Цяпер, гэта вельмі лёгка зрабіць гэта. Мы проста скажам, вар, незалежна мы хочам, каб назваць гэты аб'ект, роўная новы 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 запыт цэлым. Проста рабіць гэта праграмна, а не праз наш вэб-браўзэры. А потым мы адпраўляем гэтую просьбу. Так што, можа быць, робіць гэта выглядаць у кантэксце? Дык вось, што функцыя здзелак з AJAX запытаў. ДОБРА? І я сказаў адвольна ён прымае аргумент. І гэта свайго роду Наогул шкілет тут. У самым пачатку, мы атрымліваем самі новы аб'ект 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, я ў асноўным рыхтуецца GET запыт імя + .html. І зноў, імя тут аргумент, што было перадаецца ў якасці параметру cs50Info. 

Так у асноўным, я перадаю у чыіх-то імя, якое было, што набор опцый што мы бачылі ў у які расчыняецца меню ў форме. Я атрымліваю гэтае імя. І я кажу, што хачу, каб вы калі ласка, атрымаць для мяне, што file.html, а затым адправіць гэтую просьбу. 

І так, што onreadystatechange збіраецца быць слухаць і чакаць і чакаць і не чакаць, пакуль readyState 4, і стан 200. Так што гэта можна падаваць на стол, і запыт быў паспяховым. І потым, калі яна ёсць, яна збіраецца змяніць змесціва infodiv быць тэкставы адказ, што я вярнуўся. 

Такім чынам, давайце паглядзім, як гэта можа на самай справе працаваць. Такім чынам, мы над галавой браўзэры вокны, і мы будзем глядзець тут. Такім чынам, давайце зірнем на што адбываецца тут, у AJAX. Такім чынам, мы будзем выбіраць кагосьці з які расчыняецца меню. Такім чынам, у гэтым выпадку, давайце проста выбраць Ханна. І заўважце, што Ханна інфармацыя змянілася, але ў мяне не было майго any-- старонка не зрабіў цалкам перазагрузіць. Матэрыял застаўся. Большая частка матэрыялу засталася. AJAX выпрабаванняў не зменіцца. Сама кнопка, гэта у які расчыняецца меню не мяняецца. Але ёсць інфармацыя зрабіў змены. І ў залежнасці ад таго, як хутка мой кампутар перамяшчаецца, вы на самой справе можаце ўбачыць, што ўтрыманне знікае, а затым з'яўляецца сапраўды хутка. Гэта змест з'яўляецца выдалены з infodiv, і затым заменены на Новы асінхронны запыт. 

Так што, калі я пераключыць яго будзе сказаць, Rob-- і зноў, зірніце, і, магчыма, мы ўбачым яго на самай справе знікаць і з'яўляцца хутка. Вы бачыце, што? Як гэта проста выскачыў прэч, а затым напоўніў? Вось запыт AJAX роду адбываецца. І так у залежнасці ад чалавек я выбіраю, я што робіць іншы асінхронны Запыт у іншы файл што ў мяне ёсць на маім сэрвэры. І ўтрыманне майго infodiv абнаўленні, на падставе якіх з іх я выбраў. Так што на самай справе ўсё, што трэба AJAX. Гэта дазваляе нам, каб зрабіць гэтыя асінхронны запыты, абнаўлення старонкі. Без таго, каб абнавіць ўсю старонку, мы збіраемся, каб атрымаць новы Змест з яго шляхам новы свежы запыт да сервера. І так, нашы старонкі можа стаць трохі больш дынамічным. 

І, як мы атрымаем больш і больш прасунутыя, вам можа атрымаць такія рэчы, як скажам, ваш паштовую скрыню, дзе вы не павінны нічога рабіць. Вы не павінны націснуць у які расчыняецца меню або націсніце нічога, і раптам, ваш найноўшы E-mail з'яўляецца ў верхняй частцы. Гэта таксама проста просьба Аякс. Аякс просіць ваш Сервер, сервер электроннай пошты, адправіць па ўсёй інфармацыі аб вашых апошніх лістоў, і змяніць тое, што вы бачыце на Экран будзе ваш найноўшы набор электронных лістоў. І калі ў вас ёсць новы ў ёсць, то змест гэтага DIV змены будуць адбівацца абноўлены кантэнт. Я Дуг Лойд. Гэта CS50.