[За възпроизвеждане на музика] Дъг 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, където бихме имате анонимен функция отговори на на клик, или когато правехме карта на различните обекти в масив. 

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

И тогава статут, които надявам се, ако всичко вървеше добре, е 200, което е съкращение за, разбира се, OK, които ние сме запознати с от Http. Така че ние се надяваме, че нашите готови състояние е четири, и статута ни е 200. И ако нашата готовност състояние е четири, и отговорът е готов да бъде поставен върху страница, както и статута е 200, ние бяхме в състояние да направим всичко е успешно, Сега можем да асинхронно актуализираме нашата страница без да се налага да се презареди цялото съдържание на него. 

След сме определено какво се случва, с поведението onreadystatechange, и ние проверихме, че readyState е 4, а статус е 200, След това всичко, което трябва да направите, е отворят асинхронен молба, която е само на вземане на Http цяло GET заявка. Просто го прави програмно, вместо през нашия уеб-браузър. И тогава ние изпращаме това искане. Така че това, което прави това може би изглеждат като в контекст? Така че тук е функция, която сделки с AJAX заявки. ДОБРЕ? И аз съм произволно каза тя приема аргумент. И това нещо като обща скелет тук. В самото начало, ние се себе си нов XMLHttpRequest обект. След това, аз трябва да зададете onreadystatechange поведение. И така, аз отивам да се каже, когато се променя readyState, Искам да се обадя на тази функция. 

Кой ще поиска от въпрос, ако readyState е 4, ако се е променило readyState да бъде 4, и състоянието е 200, така че ние трябваше успешна заявка, I искам да направя нещо, за да страницата. И ние ще разгледаме един пример за това, което че нещо може да бъде в секунда. И така, сега съм определено моята анонимна функция, функция отговорът ми винаги, когато промените readyState. 

Така че тогава аз просто трябва да се отвори поиска, като се използва методът Open. И тогава, Аз изпращам това искане. И нека да разгледаме най- по-конкретен пример от това, което можем да направим AJAX на нашия уеб страници. Така че аз имам тук един много прост страница, наречена home.html. И аз имам информация отива тук и някаква падащото меню. 

И ние ще преразгледаме това за една секунда. Но мисля, че сега трябва да вземе Посетете действителната изходния код. И така, аз отивам да се отворят home.html. И ще видим какво се случва. Така че най-горната част тук, имам някои неща, че JavaScript става. 

И тук, аз очевидно има Разделение на чието ID е infodiv, и някаква информация е да отиде там. И тогава аз имам тази форма. И вътре в този форма, имам нещо нарича Select, която е само на падащото меню с куп различни варианти. И очевидно, когато, което се променя, когато опцията, която е била избрана има променило, аз отивам да се обадя някои функции cs50Info, и след това аз ще се мине през this.value, когато това се отнася до коя опция е избрана, и стойност не е един от тях тук, опция стойност = равнява празна, "Блумберг" "жилото", "чан" и "Malan." 

Така че това, което може в действителност да се случи тук, когато аз правя това? Е, нека да Посетете blumberg.html. Изглежда, че това е просто откъс от някои Html. И всъщност, това, което аз съм с надеждата, ще се случи тук е аз отивам да бъде в състояние да включите това Html директно в уеб страницата ми без да се налага да се презареди страницата, така че когато Аз избирам Hannah от падащото меню меню, информация за Хана, по-специално, тази информация тук, в blumberg.html, е това, което се показва на страницата. И аз не трябва да се освежи. И ако аз избрах някой друг, тяхната информация ще се появи. Как мога да направя това? Отново, това изисква нас, за да използвате някои AJAX. И така, ние ще се отворят ajax.js. И тук е, че функцията, cs50Info. Ако името е нищо, аз се върне. Аз няма да направи нищо, ако празната опцията е избрана. В противен случай, аз отивам да създаване на нов XMLHttpRequest. И тогава аз ще кажа, когато readyState промени, наричат ​​тази функция. 

И ако е readyState 4, както и статута е 200, тук е малко по- на JQuery по линия 13. Но всичко, което правя е като каза, да променят съдържанието на infodiv да бъде каквото и да се върна като отговор от моя HttpRequest. 

Каква е моята HttpRequest? Е, това е полето тук по линия 18 и 19. Line 18, аз съм основно подготовката а GET искане за име + .html. И отново, име тук е аргумента, че е преминали в като параметър cs50Info. 

Така че основно, много съм в нечия Име, което е, че набор от опции които видяхме в падащото меню под формата. Аз съм се това име. И аз казвам, че бихте искали да моля получи за мен, че file.html, и след това да изпрати това искане. 

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

Така че нека да видим как това може действително работят. Така че ние ще се над главата на браузъра си прозорец, и ние ще разгледаме тук. Така че нека да разгледаме най- какво се случва тук, в AJAX. Така че ние ще изберем някой от падащото меню. Така че в този случай, нека Просто изберете Хана. И забелязах, че на Хана информация се е променила, но аз не са имали any-- ми страница не е изцяло презареди. Нещата остана. Повечето от нещата останаха. AJAX Test не се промени. Самия бутон, този падащото меню не се променя. Но информацията там е направил промяна. И в зависимост от това как бързо ми компютърни ходове, всъщност може да се види, че съдържанието изчезва и след това се появява отново наистина бързо. Това е съдържанието е изтрит от infodiv, и след това се заменя с Новият асинхронен поискване. 

Така че, ако аз го включете да се каже, Rob-- и отново, да разгледаме, а може би и ние ще го видим в действителност изчезват и се появяват отново бързо. Виждате ли, че? Как тя просто показа далеч, и след това го напълни? Това е искането AJAX нещо се случва. И така, в зависимост от човек аз избирам, аз съм като различен асинхронен искане към друг файл че имам на моя сървър. А съдържанието на моето infodiv Актуализираме, въз основа на кои от тях съм избрал. Така че това е наистина всичко, което има да се AJAX. Тя ни позволява да се правят тези асинхронни молби, известия страница. Без да се налага опресняване на цялата страница, ние ще получите ново съдържание от него, като ново ново искане до сървъра. И така, нашите страници могат да се превърнат доста по-динамичен. 

И тъй като ние получаваме по- и по-напреднали, можете може да получите неща като да речем, електронната си поща, когато не е нужно да правите нищо. Вие не трябва да щракнете върху падащото меню или кликнете нищо, и изведнъж, най-новата си имейл появява в горната част. Това също е просто една молба Аякс. Аякс иска си сървъра, сървъра за електронна поща, да изпратя цялата информация за най-новите си имейли, и промяна на това, което виждате на екрана, за да бъде най-новата си серия от имейли. И ако имате нов в там, след това съдържанието на това Div ще се промени, за да отрази актуализираната съдържанието. Аз съм Дъг Лойд. Това е CS50.