[Přehrávání hudby] DOUG LLOYD: Takže ještě jeden druh představou, že druh spadá pod záštitou JavaScript je něco, co nazývá AJAX. Až do tohoto bodu, dotazy interakce s JavaScriptu byla omezena na tlačit Tlačítko a něco stane. A specificky, něco, co se stane, jsou naše webové stránky vypadat a cítit se změny. Právo? Stejně jako zejména, v Document Object Model video, Změnil jsem barvu pozadí. Ale když jsem to udělal, jsem neměl dělat žádné zvláštní požadavky navíc. Nemusel jsem požadovat, aby server mi poslat novou stránku. Právě jsem změnil to, co už jsem měl. Nemusel jsem znovu načíst mé stránky, a věci definitivně změnilo, tak to je skvělé. Ale je tu určitě nějaké manuální interakce s uživatelem zapojit. AJAX je v pohodě technika, která umožňuje nám k aktualizaci obsahu stránky, a ne jen vzhled a pocit, bez překládky. 

A zvláště, když jsem říkají, aktualizace obsahu stránky, Neříkám, že bychom přepsat stránky pomocí JavaScriptu. Říkám, že jsme vlastně požadovat Více informací ze serveru bez našeho strana museli znovu načíst. 

Nyní, když druh trochou pokročilejší techniku že budeme mluvit o v tomto videu. Budeme mít nějaké interakci. Ale když budeme dělat, já budu takže požadavky na webový server. V tomto případě, jen to, co je běží moje webový server Apache. Budu dělat další se Žádosti zatímco já jsem na návštěvě webové stránky, ale moje strana nebude aktualizovat. 

Je to jen bude asynchronně aktualizovat své stránky. A to je ve skutečnosti, což je zkratka pro AJAX, je Asynchronous JavaScript a XML. XML je další druh značení jazyk, a můžete třídit podle myslet na to, stejně jako HTML. Není to úplně totéž, ale je to v podstatě jen o značkovací jazyk. Takže je to asynchronní JavaScript a značkovací jazyk. 

Tak, aby bylo možné použít tuto AJAX technique-- AJAX není samostatný programovací jazyk. Je to jen něco jako sada techniques-- my muset vytvořit zvláštní JavaScript objekt, který se nazývá XMLHttpRequest. Teď, je to velmi jednoduché, jak to udělat. Právě jsme se říci, var, bez ohledu chceme volat tento objekt, rovná se nový XMLHttpRequest. A teď jsme nyní získat AJAX druh objektu, nebo XMLHttpRequest objekt, který umožní nám asynchronně aktualizovat naši stránku. 

Poté, co jsme dostali tento nový objekt, tento XMLHttpRequest, Musíme něco udělat, aby jeho onreadystatechange chování. Onreadystatechange chování je opravdu jen když si podat žádost na webovou stránku, stránka prochází několika kroků. Za prvé, žádost nebyla odeslána. Poté, žádost byla poslal, ale ne jednal. Potom žádost byla jednal. Pak je požadavek být poslán zpět k vám. 

Potom, je požadavek plně naložené na vaší stránce. To jsou různé stavy. A proto musíme nastavit dotazy Nový objekt XMLHttpRequest ke změně, když připravené změny stavu. A obvykle, my to tím, definování anonymní funkci, která Jsme obeznámeni s od JavaScript teď, že je volána při stavu připravenosti změny. Je to opravdu nic víc než to. Jsme prostě bude definování Funkce anonymní, tak trochu líbí, co jsme dělali v JavaScript, kde bychom mají anonymní funkce reagovat na on kliknutí, nebo když jsme dělali mapu v poli různé objekty. 

Něco se stalo, když něco klepli. V tomto případě, je to prostě něco, co je děje, když stav naší stránce Změny. Existují dva další vlastnosti které jsou nějak of-- že to není pouze vlastnosti, které jsou inherentní XMLHttpRequest, ale jsou to ty dost důležité. Je tu něco, co nazývá readyState, který, jak asi tušíte, je v souvislosti s onreadystatechange. Je to vlastně vám řekne, co readyState je. 0, 1, 2, 3, a 4 jsou možnosti tam, a oni nějak hrubě odpovídají tomu, co Právě jsem mluvil asi před druhým. 

A pak stav, který doufejme, že pokud šlo všechno v pořádku, je 200, což je zkratka pro, samozřejmě, OK, které jste obeznámeni s z HTTP. Takže doufáme, že náš stát připraven jsou čtyři, a naše stav je 200. A pokud se náš stavu připravenosti jsou čtyři, a odezva je připraven k uvedení na strana, a stav je 200, jsme byli schopni udělat vše úspěšně, Nyní můžeme asynchronně aktualizovat naši stránku aniž by bylo nutné znovu načíst celý obsah dohody. 

Poté, co jste definovali, co se stane k chování onreadystatechange, a my jsme ověřil, že readyState je 4 a status je 200, pak vše, co potřebujete udělat, je otevírají asynchronní Žádost, která se jen dělat HTTP obecně GET požadavek. Prostě to dělat programově, namísto prostřednictvím našeho webovém prohlížeči. A pak jsme se, že žádost poslat. Takže to, co dělá to možná vypadat v kontextu? Tak tady je funkce, která se zabývá žádostmi Ajax. DOBŘE? A já jsem řekl svévolně přijímá argument. A to jakýmsi Obecně kostra zde. Na samém počátku, dostaneme Sami nový XMLHttpRequest objekt. Pak musím nastavit onreadystatechange chování. A tak jsem chtěl říct, když readyState změny, Chci, abys volání této funkce. 

Což se chystá požádat otázka, pokud readyState 4 je, v případě, že ke změně readyState , že je 4, a stav byl 200, takže jsme měli úspěšnou žádost, I chcete udělat něco na stránku. A budeme se podívat na příklad toho, co , že něco, co by mohlo být v druhém. Tak, teď jsem definováno můj anonymní funkce, moje funkce reakce kdykoli readyState změny. 

Takže už stačí jen otevřít požádat, pomocí metody Open. A pak jsem tu žádost poslat. A pojďme se podívat na Konkrétnější příklad čeho AJAX můžete dělat na našich webových stránkách. Tak jsem zde velmi jednoduchý stránka s názvem home.html. A já mám informační pokračuje tady a nějaký drop-down menu of. 

A budeme znovu to během jedné sekundy. Ale myslím, že bychom nyní měli vzít podívejte se na skutečné zdrojového kódu. A tak, budu otevírat home.html. A uvidíme, co se děje. Takže vzhůru na samém vrcholu tady, mám někteří JavaScript věci, co se děje. 

A tady, já mají zjevně div, jehož číslo je infodiv, a některé informace se chystá jít tam. A pak mám tento formulář. A uvnitř této forma, mám něco volal Select, který je jen drop-down menu s partou různých možností. A zřejmě když to změní, když možnost, která byla vybrána má změnil, budu volat některé funkce cs50Info, a pak budu předat this.value, pokud se to týká , která volba byla vybrána, a hodnota je jedna z nich zde možnost hodnota = rovná prázdné, "Blumberg," "bowden," "chan," a "Malan." 

Takže to, co by ve skutečnosti mohly se stalo tady, když jsem to udělat? Dobře, pojďme podívejte se na blumberg.html. Vypadá to, že je to jen úryvek nějakého HTML. A ve skutečnosti to, co jsem doufal, se stane zde se budu moci připojit Tento HTML přímo do mé webové stránky aniž by bylo nutné znovu načíst stránku, tak, že když Vybrat Hannah z rozevíracího menu, informace o Hannah, zejména tyto informace tady v blumberg.html, je to, co se objeví na stránce. A já nemám aktualizovat. A když jsem si vybral někoho jiného, jejich informace by se ukázal. Jak to mám udělat? Opět platí, že to vyžaduje nám použít nějakou AJAX. A tak budeme otevřít ajax.js. A tady je to, že funkce, cs50Info. Pokud název není nic, jsem se vrátit. Nebudu dělat nic, pokud prázdný varianta byla vybrána. Jinak budu vytvořte novou XMLHttpRequest. A pak budu říkat, když se readyState změny, tuto funkci volat. 

A v případě, že je readyState 4 a je stav 200, tady je trochu jQuery na řádku 13. Ale všechno, co dělám se říká, změnit obsah infodiv jako něco, co jsem se vrátil jako odpověď z mého HttpRequest. 

Jaký je můj HttpRequest? No, to je pravda tady na řádku 18 a 19. Řádek 18, já jsem v podstatě přípravou GET požadavek na jméno + .html. A opět, název zde argument, že byla předaný jako parametr cs50Info. 

Takže v podstatě, já jsem kolem v něčí jméno, což bylo to, že sada voleb že jsme viděli v drop-down menu ve formě. Začínám to jméno. A já říkám, rád bych, abyste vyžádejte si pro mě ten file.html, a pak poslat takové žádosti. 

A tak, že onreadystatechange se děje za poslech a čeká a čeká a čekat, až readyState je 4, a stav je 200. Takže je připraven být doručena, a žádost byla úspěšná. A pak, pokud je to, že to bude změnit obsah infodiv aby text, odpověď, že jsem se vrátil. 

Takže pojďme se podívat, jak to by ve skutečnosti mohly fungovat. Takže budeme přes hlavu na svého prohlížeče okna, a my se podíváme tady. Takže pojďme se podívat na co se děje tady v AJAX. Tak jsme si vybrat někoho z drop-down menu. Takže v tomto případě, pojďme stačí si vybrat Hannah. A všimněte si, že Hannah se změnily, ale neměl jsem any-- my Stránka nebyla úplně znovu. Věci zůstal. Většina věcí zůstal. AJAX Testovací nezměnil. Tlačítko sám, to drop-down menu se nezměnila. Ale informace tam udělal změnu. A v závislosti na tom, jak Rychle můj počítač se pohybuje, skutečně mohla vidět, že obsah zmizí a pak se objeví opravdu rychle. To je obsah je odstraněny z infodiv, a pak se nahradil s Nový Asynchronní požadavek. 

Takže když jsem přepnout se říci, Rob-- a znovu, podívat se, a možná budeme ho vidět ve skutečnosti zmizí a znovu se objeví rychle. Vidíte to? Jak to jen odebere pryč, a pak to znovu naplnit? To je požadavek AJAX druh probíhá. A tak v závislosti na člověk vybrat, jsem dělat jiné asynchronní Požadavek na jiný soubor že mám na svém serveru. A obsah mého infodiv jsou aktualizace, na základě které z nich jsem zvolil. Tak to je opravdu všechno, co je na AJAX. To nám umožňuje, aby se tyto asynchronní Žádosti, aktualizace na stránku. Aniž by bylo nutné aktualizovat celou stránku, budeme mít nový obsah od ní tím, že nový čerstvý požadavek na server. A tak, naše stránky se mohou stát trochu dynamičtější. 

A jak jsme si více a více pokročilé, vás mohl dostat věci jako řekněme, e-mailovou schránku, kde nemusíte nic dělat. Nemusíte klepnout na drop-down menu nebo klikněte na cokoliv, a najednou, váš nejnovější email se objeví v horní části. To je také jen žádost Ajax. Ajax žádá o vaše serveru, e-mailový server, odeslat přes veškeré informace o své nejnovější e-maily, a měnící se to, co vidíte na Obrazovka bude vaše nejnovější soubor e-mailů. A máte-li nějaký nový v tam, pak obsah tohoto div se změní tak, aby odrážely aktualizovaný obsah. Jsem Doug Lloyd. To je CS50.