[Zenelejátszási] DOUG LLOYD: Tehát még egy fajta elképzelés, hogy fajta esik égisze alatt A JavaScript úgynevezett AJAX. Eddig a pontig, mi kölcsönhatás JavaScript arra korlátozódott, hogy álljon egy gombot, és valami történik. És pontosabban, a valami, ami történik a mi weboldalak megjelenését változások. Jobbra? Mint különösen a Document Object Model videó, Megváltoztattam a háttér színét. De ha ezt tettem, nem volt tennie különleges extra kéréseket. Nem kellett kérni, hogy A szerver küld nekem egy új oldalt. Most megváltozott, amit már. Nem kell újratölteni az oldalam, és a dolgok határozottan megváltozott, így ez nagyszerű. De van határozottan néhány manuális felhasználói beavatkozás részt. AJAX egy klassz technika, amely lehetővé teszi számunkra, hogy frissíteni egy oldal tartalmát, és nem csak a megjelenését és úgy érzi, újratöltés nélkül. 

És pontosan mikor mondjuk frissítése egy oldal tartalmát, Nem azt mondom, átírjuk Az oldal JavaScript segítségével. Azt mondom, hogy valójában kérni További információkat a szerver anélkül oldalunkat, hogy újra. 

Most, hogy a fajta egy kicsit egy fejlettebb technika hogy fogunk beszélni kb ez a videó. Fogunk egy kis interakció. De ha ezt tesszük, megyek is kérjen a web szerver. Ebben az esetben, csak mi fut az Apache webszerver. Megyek is, hogy további kéréseket, míg én meglátogatta a weboldalt, de az oldalamon nem fog frissülni. 

Ez csak fog aszinkron frissítse az oldalamat. És ez, sőt, amely AJAX jelentése, az aszinkron JavaScript és XML. XML egy másik fajta jelölés nyelvet, és tudod rendezni a gondolok rá, mint a HTML. Ez nem egészen ugyanaz, de ez alapvetően csak egy leíró nyelv. Szóval ez egy aszinkron JavaScript és a jelölőnyelv. 

Így annak érdekében, hogy ezt a AJAX technique-- AJAX nem önálló programozási nyelv. Ez csak amolyan sor techniques-- vagyunk létre kell hozni egy külön JavaScript objektum, amely nevezzük XMLHttpRequest. Most, hogy nagyon könnyű ezt. Mi csak annyit, var, bármi akarunk hívni ezt az objektumot, megegyezik az új XMLHttpRequest. És most már megszerzett AJAX fajta tárgy, vagy XMLHttpRequest objektum, amely lehetővé teszi, számunkra, hogy aszinkron módon frissíti oldalunkat. 

Miután mi ütött ez az új objektumot, ez XMLHttpRequest, tennünk kell valamit, hogy a onreadystatechange viselkedését. Onreadystatechange viselkedés tényleg csak ha olyan kérelmet hogy egy internetes oldalon, a lap megy keresztül egy lépések számát. Először is, a kérelmet nem lett elküldve. Ezután a kérelmet elküldött, de nem cselekszenek. Akkor a kérelem alapján cselekedett. Ezután a kérés küldik vissza hozzád. 

Ezután, a kérés teljesen betöltődött az oldal. Ezek különböző államokban. És ezért meg kell állítani a új XMLHttpRequest objektumot változtatni, ha a kész állapotot változásokat. És általában, mi ezt a meghatároz egy névtelen függvényt, amely vagyunk tisztában re JavaScript most, hogy nevezzük, amikor a kész állapotot változásokat. Ez tényleg nem sokkal több annál. Mi csak lesz meghatározó a névtelen függvényt, fajta, mint mi csinálunk itt JavaScript, ahol mi magunk Van egy névtelen függvényt reagálni egy kattintásra, vagy ha csinálunk egy térképet A különböző tárgyak egy tömbben. 

Valami történt, amikor valami kattant. Ebben az esetben ez csak valami történik, ha az állam a mi oldal változásokat. Van még két másik ingatlan amelyek egyfajta of-- ők nem az egyetlen olyan tulajdonságok, amelyek rejlő XMLHttpRequest, de ők elég fontos is. Van egy úgynevezett readyState, amely, mint akkor talán hiszem, a kapcsolódó onreadystatechange. Ez valójában azt mondja, mi a readyState van. 0, 1, 2, 3, és 4 A lehetőségek vannak, és ők egyfajta durván megfelelnek annak, amit Én csak beszélek egy másodperccel ezelőtt. 

És akkor a státust, amelyet remélhetőleg, ha minden simán ment OK, 200, ami rövid A természetesen OK, ami vagyunk tisztában a http. Így reméljük, hogy a mi kész állapotban négy, és a mi állapot 200. És ha a kész állapot négy, és a válasz készen kell helyezni a oldal, és az állapota 200, tudtuk tenni mindent sikeresen, Most már tudjuk aszinkron frissíteni oldalunkat anélkül, hogy újra A teljes tartalmát is. 

Miután mi már meghatározott, mi történik A onreadystatechange viselkedés, és mi már ellenőrizte, hogy readyState 4, és az állapot 200, akkor minden meg kell tennie, nyit egy aszinkron kérést, amely csak hogy Egy HTTP általában kap kérést. Csak csinálja programból, ahelyett, hogy a web böngésző. És akkor küldünk a kérést. Mit is jelent ez talán néznek ki, mint a kontextusban? Tehát itt egy függvényt, amely foglalkozik AJAX kérések. OKÉ? És én önkényesen mondta elfogadja az érvet. És ez egyfajta általános csontváz itt. A kezdet kezdetén, megkapjuk magunknak egy új XMLHttpRequest objektumot. Aztán be kell állítani a onreadystatechange viselkedését. És így fogok mondani amikor a readyState változások, Azt akarom, hogy ezt a funkciót. 

Melyik fogja kérni a kérdés, ha a readyState 4, ha a readyState megváltozott hogy a 4. és az állapot 200 volt, így volt egy sikeres kérés, én akar tenni valamit, hogy az oldalon. És akkor vess egy pillantást egy példa arra, mi hogy valami lehet a második. Tehát, most már definiált én névtelen függvényt, a válaszom függvényt, valahányszor readyState változásokat. 

Így aztán csak meg kell nyitni egy kérheti, nyitott módszerét. És akkor én elküldöm ezt a kérést. És vessünk egy pillantást egy konkrét példa A mi AJAX tehet weboldalunkon. Szóval van itt egy nagyon egyszerű Oldal nevű home.html. És van egy olyan információs megy Itt és valamiféle legördülő menüből. 

És akkor újra ezt az egy másodperc alatt. De azt hiszem, most, hogy egy nézd meg a tényleges forráskódot. És így fogok nyitni home.html. És majd meglátjuk, mi történik. Így akár a legtetején van, azt kell Egyes JavaScript cucc, ami folyik. 

És itt, én látszólag div akinek azonosító infodiv, és néhány információ fog menni. És akkor én ezt az űrlapot. És belsejét ezen formában, van valami úgynevezett Select, amely csak egy legördülő menüből egy csomó különböző lehetőségeket. És úgy tűnik, ha ez megváltozik, ha a lehetőséget, hogy már kiválasztott rendelkezik megváltozott, azt fogom hívni Néhány funkció cs50Info, majd megyek át a this.value, ahol ez a kifejezés hogy melyik lehetőséget választotta, és értéke az egyik ilyen van, az opció value = egyenlő üres, "Blumberg," "Bowden", "Chan," és a "Malan." 

Tehát mi is valójában itt történik, ha ezt csinálom? Nos, vessünk egy nézd meg blumberg.html. Úgy néz ki, hogy ez csak egy részlet a HTML kódot. És valóban, mi remélem fog történni itt A fogom tudni, hogy dugja Ez a HTML közvetlenül a weboldalamon anélkül, hogy újra az oldalt, úgy, hogy amikor Úgy döntök, Hannah a legördülő menüben, információkat Hannah, különösen, ez az információ itt blumberg.html, az, ami megjelenik az oldalon. És nem kell frissíteni. És ha én választottam valaki más, az információ fog megjelenni. Hogyan tudom ezt megtenni? Ismét, ez megköveteli számunkra, hogy használja AJAX. És így fogunk nyitni ajax.js. És itt van ez a funkció, cs50Info. Ha név nem más, visszatérek. Nem fogok csinálni semmit, ha az üres opciót választották. Egyébként, én megyek hozzon létre egy új XMLHttpRequest. És akkor fogok mondani, ha a readyState változások, hívja ezt a funkciót. 

És ha a readyState van A 4. és az állapot 200, itt egy kicsit jQuery on line 13. De minden, amit csinálok azt mondja, tartalmának megváltoztatására infodiv hogy bármit kaptam vissza, mint egy válasz az én HttpRequest. 

Mi az én HttpRequest? Nos, ez így van itt a sorban a 18. és 19.. 18. sor, én alapvetően készül A GET kérelmet név + .html. És ismét, név itt Az az érv, hogy a volt telt, mint a paraméter cs50Info. 

Tehát alapvetően én elhaladó valaki Íme, amely az volt, hogy az opciókat hogy láttuk a legördülő menüből formájában. Kezdek ezt a nevet. És mondok én szeretném, ha Kérjük szerezzen számomra, hogy file.html, majd küldje a kérést. 

És így onreadystatechange megy hogy hallgat, és vártam és vártam és várja, amíg a readyState 4, és az állapota 200. Tehát készen kell kézbesíteni, és a kérelem sikeres volt. És akkor, ha az, hogy fog tartalmának megváltoztatására infodiv hogy a válasz szövegét, hogy kaptam vissza. 

Nézzük, hogy ez hogyan talán valóban működik. Szóval majd feje fölött a böngészőm ablak, és mi meg itt. Szóval vessünk egy pillantást mi folyik itt, AJAX. Tehát azt fogjuk választani valakit A legördülő menüből. Tehát ebben az esetben, hadd csak válassza ki Hannah. És észre, hogy Hannah információ megváltozott, de nem volt any-- én oldal nem teljesen újratölteni. A cucc maradt. A legtöbb dolog maradt. AJAX Teszt nem változott. A gomb Önmagában ez legördülő menüben nem változott. De ott lévő adatokat is változott. És attól függően, hogy Gyorsan a számítógépet mozog, hogy tényleg lehet látni, hogy a tartalmat eltűnik, majd ismét megjelenik igazán gyorsan. Ez a tartalmakhoz törölni infodiv, majd helyére egy Új aszinkron kérést. 

Tehát, ha bekapcsolom, hogy azt mondják, Rob-- és újra, hogy egy pillantást, és talán majd meglátjuk, hogy ténylegesen eltűnnek, és újra gyorsan. Látod ezt? Hogy csak beugrott el, és akkor újratölteni? Ez az AJAX kérés fajta zajlik. És így attól függően, személy úgy döntök, én vagyok így egy másik aszinkron kérést egy másik fájl hogy én is az én szerver. És a tartalmát én infodiv frissít, amelynek alapján ezek az általam kiválasztott. Szóval ez tényleg minden van AJAX. Ez lehetővé teszi számunkra, hogy ezek az aszinkron kéri, frissítések egy oldalra. Anélkül, hogy frissíteni kell az egész oldalt, megyünk, hogy az új tartalmat is azáltal, hogy egy új, friss kérést a szerver. És igen, az oldalainkon válhat egy kicsit dinamikusabb. 

És ahogy egyre több és a fejlettebb, akkor lehet, hogy a dolgok, mint mondjuk, a postafiókjában, ahol nem kell semmit sem tennie. Nem kell, hogy kattintson egy legördülő menüből, vagy kattintson semmit, és hirtelen, a legújabb e-mail felbukkan a tetején. Ez is csak egy Ajax kérés. Ajax kér a szerver, az e-mail szerver, hogy küldje át az összes információt az Ön legfrissebb e-maileket, és a változó, amit látsz a képernyőn, hogy a legújabb beállított e-mailt. És ha van egy újat ott, majd a tartalmát, hogy div tükrözni fogja az A frissített tartalom. Én Doug Lloyd. Ez CS50.