[Prehrávanie hudby] DOUG LLOYD: Takže ešte jeden druh predstavou, že druh spadá pod záštitou JavaScript je niečo, čo nazýva AJAX. Až do tohto bodu, otázky interakcie s JavaScriptu bola obmedzená na tlačiť Tlačidlo a niečo stane. A špecificky, niečo, čo sa stane, sú naše webové stránky vyzerať a cítiť sa zmeny. Je to tak? Rovnako ako najmä, v Document Object Model video, Zmenil som farbu pozadia. Ale keď som to urobil, som nemal robiť žiadne zvláštne požiadavky navyše. Nemusel som žiadať, aby server mi poslať novú stránku. Práve som zmenil to, čo už som mal. Nemusel som znovu načítať mojej stránky, a veci definitívne zmenilo, tak to je skvelé. Ale je tu určite nejaké manuálny interakcie s užívateľom zapojiť. AJAX je v pohode technika, ktorá umožňuje nám k aktualizácii obsahu stránky, a nie len vzhľad a pocit, bez prekládky. 

A zvlášť, keď som hovoria, aktualizácie obsahu stránky, Nehovorím, že by sme prepísať stránky pomocou JavaScriptu. Hovorím, že sme vlastne požadovať Viac informácií zo servera bez nášho strana museli znova načítať. 

Teraz, keď druh trochou pokročilejšie techniku že budeme hovoriť o v tomto videu. Budeme mať nejaké interakciu. Ale keď budeme robiť, ja budem takže požiadavky na webový server. V tomto prípade, len to, čo je beží moje webový server Apache. Budem robiť ďalšie sa Žiadosti zatiaľ čo ja som na návšteve webovej stránky, ale moja strana nebude aktualizovať. 

Je to len bude asynchrónne aktualizovať svoje stránky. A to je v skutočnosti, čo je skratka pre AJAX, je Asynchronous JavaScript a XML. XML je ďalší druh značenie jazyk, a môžete triediť podľa myslieť na to, rovnako ako HTML. Nie je to úplne to isté, ale je to v podstate len o značkovací jazyk. Takže je to asynchrónny JavaScript a značkovací jazyk. 

Tak, aby bolo možné použiť túto AJAX technique-- AJAX nie je samostatný programovací jazyk. Je to len niečo ako sada techniques-- my musieť vytvoriť zvláštne JavaScript objekt, ktorý sa nazýva XMLHttpRequest. Teraz, je to veľmi jednoduché, ako to urobiť. Práve sme sa povedať, var, bez ohľadu chceme volať tento objekt, rovná sa nový XMLHttpRequest. A teraz sme teraz získať AJAX druh objektu, alebo XMLHttpRequest objekt, ktorý umožní nám asynchrónne aktualizovať našu stránku. 

Potom, čo sme dostali tento nový objekt, tento XMLHttpRequest, Musíme niečo urobiť, aby jeho onreadystatechange správanie. Onreadystatechange správanie je naozaj len keď si podať žiadosť na webovú stránku, stránka prechádza niekoľkých krokov. Po prvé, žiadosť nebola odoslaná. Potom, žiadosť bola poslal, ale nie konal. Potom žiadosť bola konal. Potom je požiadavka byť poslaný späť k vám. 

Potom, je požiadavka plne naložené na vašej stránke. To sú rôzne stavy. A preto musíme nastaviť otázky Nový objekt XMLHttpRequest k zmene, keď pripravené zmeny stavu. A zvyčajne, my to tým, definovanie anonymný funkciu, ktorá Sme oboznámení s od JavaScript teraz, že je volaná pri stave pripravenosti zmeny. Je to naozaj nič viac než to. Sme jednoducho bude definovanie Funkcie anonymný, tak trochu páči, čo sme robili v JavaScript, kde by sme majú anonymné funkcie reagovať na on kliknutie, alebo keď sme robili mapu v poli rôzne objekty. 

Niečo sa stalo, keď niečo klepli. V tomto prípade, je to proste niečo, čo je deje, keď stav našej stránke zmeny. Existujú dva ďalšie vlastnosti ktoré sú nejako of-- že to nie je len vlastnosti, ktoré sú inherentnú XMLHttpRequest, ale sú to tie dosť dôležité. Je tu niečo, čo nazýva readyState, ktorý, ako asi tušíte, je v súvislosti s onreadystatechange. Je to vlastne vám povie, čo readyState je. 0, 1, 2, 3, a 4 sú možnosti tam, a oni nejako hrubo zodpovedajú tomu, čo Práve som hovoril asi pred druhým. 

A potom stav, ktorý dúfajme, že ak išlo všetko v poriadku, je 200, čo je skratka pre, samozrejme, OK, ktoré ste oboznámení s z HTTP. Takže dúfame, že náš štát pripravený sú štyri, a naše stav je 200. A ak sa náš stave pripravenosti sú štyri, a odozva je pripravený na uvedenie na strana, a stav je 200, sme boli schopní urobiť všetko úspešne, Teraz môžeme asynchrónne aktualizovať našu stránku aby bolo nutné znovu načítať celý obsah dohody. 

Potom, čo ste definovali, čo sa stane k správaniu onreadystatechange, a my sme overil, že readyState je 4 a status je 200, potom všetko, čo potrebujete urobiť, je otvárajú asynchrónne Žiadosť, ktorá sa len robiť HTTP všeobecne GET požiadavku. Proste to robiť programovo, namiesto prostredníctvom nášho webovom prehliadači. A potom sme sa, že žiadosť poslať. Takže to, čo robí to možno vyzerať v kontexte? Tak tu je funkcia, ktorá sa zaoberá žiadosťami Ajax. OK? A ja som povedal svojvoľne prijíma argument. A to akýmsi Všeobecne kostra tu. Na samom počiatku, dostaneme Sami nový XMLHttpRequest objekt. Potom musím nastaviť onreadystatechange správanie. A tak som chcel povedať, keď readyState zmeny, Chcem, aby si volanie tejto funkcie. 

Čo sa chystá požiadať otázka, pokiaľ readyState 4 je, v prípade, že k zmene readyState , Že je 4, a stav bol 200, takže sme mali úspešnú žiadosť, I chcete urobiť niečo na stránku. A budeme sa pozrieť na príklad toho, čo , Že niečo, čo by mohlo byť v druhom. Tak, teraz som definované môj anonymný funkcie, moja funkcia reakcie kedykoľvek readyState zmeny. 

Takže už stačí len otvoriť požiadať, pomocou metódy Open. A potom som tú žiadosť poslať. A poďme sa pozrieť na Konkrétnejší príklad čoho AJAX môžete robiť na našich webových stránkach. Tak som tu veľmi jednoduchý stránka s názvom home.html. A ja mám informačný pokračuje tu a nejaký drop-down menu of. 

A budeme znovu to počas jednej sekundy. Ale myslím, že by sme teraz mali vziať pozrite sa na skutočné zdrojového kódu. A tak, budem otvárať home.html. A uvidíme, čo sa deje. Takže hor sa na samom vrchole tu, mám niektorí JavaScript veci, čo sa deje. 

A tu, ja majú zjavne div, ktorého číslo je infodiv, a niektoré informácie sa chystá ísť tam. A potom mám tento formulár. A vnútri tejto forma, mám niečo volal Select, ktorý je len drop-down menu s partiou rôznych možností. A zrejme keď to zmení, keď možnosť, ktorá bola vybraná má zmenil, budem volať niektoré funkcie cs50Info, a potom budem odovzdať this.value, ak sa to týka , Ktorá voľba bola vybraná, a hodnota je jedna z nich tu možnosť hodnota = rovná prázdne, "Blumberg," "bowden," "chan," a "Malan." 

Takže to, čo by v skutočnosti mohli sa stalo tu, keď som to urobiť? Dobre, poďme pozrite sa na blumberg.html. Vyzerá to, že je to len úryvok nejakého HTML. A v skutočnosti to, čo som dúfal, sa stane tu sa budem môcť pripojiť Tento HTML priamo do mojej webovej stránky aby bolo nutné znovu načítať stránku, tak, že keď Vybrať Hannah z otváracieho menu, informácie o Hannah, najmä tieto informácie tu v blumberg.html, je to, čo sa objaví na stránke. A ja nemám aktualizovať. A keď som si vybral niekoho iného, ich informácie by sa ukázal. Ako to mám urobiť? Opäť platí, že to vyžaduje nám použiť nejakú AJAX. A tak budeme otvoriť ajax.js. A tu je to, že funkcia, cs50Info. Ak názov nie je nič, som sa vrátiť. Nebudem robiť nič, ak prázdny varianta bola vybraná. Inak budem vytvorte novú XMLHttpRequest. A potom budem hovoriť, keď sa readyState zmeny, túto funkciu volať. 

A v prípade, že je readyState 4 a je stav 200, tu je trochu jQuery na riadku 13. Ale všetko, čo robím sa hovorí, zmeniť obsah infodiv ako niečo, čo som sa vrátil ako odpoveď z môjho HttpRequest. 

Aký je môj HttpRequest? No, to je pravda tu na riadku 18 a 19. Riadok 18, ja som v podstate prípravou GET požiadavka na meno + .html. A opäť, názov tu argument, že bola odovzdaný ako parameter cs50Info. 

Takže v podstate, ja som okolo v niečí meno, čo bolo to, že sada volieb že sme videli v drop-down menu vo forme. Začínam to meno. A ja hovorím, rád by som, aby ste vyžiadajte si pre mňa ten file.html, a potom poslať takejto žiadosti. 

A tak, že onreadystatechange sa deje za počúvanie a čaká a čaká a čakať, až readyState je 4, a stav je 200. Takže je pripravený byť doručená, a žiadosť bola úspešná. A potom, ak je to, že to bude zmeniť obsah infodiv aby text, odpoveď, že som sa vrátil. 

Takže poďme sa pozrieť, ako to by v skutočnosti mohli fungovať. Takže budeme cez hlavu na svojho prehliadača okná, a my sa pozrieme tu. Takže poďme sa pozrieť na čo sa deje tu v AJAX. Tak sme si vybrať niekoho z drop-down menu. Takže v tomto prípade, poďme stačí si vybrať Hannah. A všimnite si, že Hannah sa zmenili, ale nemal som any-- my Stránka nebola úplne znovu. Veci zostal. Väčšina vecí zostal. AJAX Testovacie nezmenil. Tlačidlo sám, to drop-down menu sa nezmenila. Ale informácie tam urobil zmenu. A v závislosti na tom, ako Rýchlo môj počítač sa pohybuje, skutočne mohla vidieť, že obsah zmizne a potom sa objaví naozaj rýchlo. To je obsah je odstránené z infodiv, a potom sa nahradil s Nový Asynchrónne požiadavku. 

Takže keď som prepnúť sa povedať, Rob-- a znovu, pozrieť sa, a možno budeme ho vidieť v skutočnosti zmizne a znova sa objaví rýchlo. Vidíte to? Ako to len odoberie preč, a potom to znova naplniť? To je požiadavka AJAX druh prebieha. A tak v závislosti na človek vybrať, som robiť iné asynchrónne Požiadavka na iný súbor že mám na svojom serveri. A obsah môjho infodiv sú aktualizácie, na základe ktorej z nich som zvolil. Tak to je naozaj všetko, čo je na AJAX. To nám umožňuje, aby sa tieto asynchrónne Žiadosti, aktualizácie na stránku. Aby bolo nutné aktualizovať celú stránku, budeme mať nový obsah od nej tým, že nový čerstvý požiadavka na server. A tak, naše stránky sa môžu stať trochu dynamickejšie. 

A ako sme si viac a viac pokročilých, vás mohol dostať veci ako povedzme, e-mailovú schránku, kde nemusíte nič robiť. Nemusíte kliknúť na drop-down menu alebo kliknite na čokoľvek, a zrazu, váš najnovší email sa objaví v hornej časti. To je tiež len žiadosť Ajax. Ajax žiada o vaše servera, e-mailový server, odoslať cez všetky informácie o svoje najnovšie e-maily, a meniace sa to, čo vidíte na Obrazovka bude vaša najnovší súbor e-mailov. A ak máte nejaký nový v tam, potom obsah tohto div sa zmení tak, aby odrážali aktualizovaný obsah. Som Doug Lloyd. To je CS50.