[Glazbom] Doug LLOYD: Pa još jedan vrsta pojam koji vrsta spada pod okriljem JavaScript je nešto što se zove AJAX. Do ove točke, naš interakcija s JavaScriptom je ograničena gurnuti gumb i nešto se dogodi. I posebno, nešto što se događa je naša web stranice izgledaju i osjećaju promjene. Pravo? Kao što je naročito, u Document Object Model video Promijenio sam boju pozadine. Ali kad sam to učinio, nisam imao učiniti sve posebne dodatne zahtjeve. Nisam se zatražiti da poslužitelj poslati mi novu stranicu. Upravo sam promijenio ono što sam već imao. Nisam imala ponovno učitati moje stranice, i stvari definitivno promijenio, pa to je super. No, tu je svakako neke priručnik interakcije s korisnikom koji su uključeni. AJAX je super tehnika koja omogućuje nas ažurirati sadržaj neke stranice, a ne samo izgled i osjećaju, bez pretovara. 

I posebno kada sam kažu ažuriranje sadržajem web-stranice, Ne kažem da prepisati stranica pomoću JavaScript. Govorim zapravo zahtjev više informacija s poslužitelja bez naša stranica ima za ponovno učitavanje. 

Sada kada je svojevrsni malo više naprednih tehnika da ćemo razgovarati o tome u ovom videu. Mi ćemo imati neke interakcije. No, kada nam je činiti, ja ću biti što zahtjeva na web poslužitelju. U ovom slučaju, samo ono što je trčanje moj Apache web poslužitelja. Idem biti stvaranje dodatnih Zahtjevi dok sam posjetite web-stranicu, ali moja stranica neće osvježiti. 

To samo će asinkrono ažurirati svoju stranicu. A to je, u stvari, koja se zalaže za AJAX, je Asinkroni JavaScript i XML. XML je još jedna vrsta markup jezik, a možete sortirati od mislim o tome kao HTML. To nije baš ista stvar, ali to je u osnovi samo označni jezik. Dakle, to je asinkroni JavaScript i označni jezik. 

Dakle, kako bi mogli koristiti ovu AJAX technique-- AJAX nije zasebna programski jezik. To je samo neka vrsta Skup techniques-- mi potrebno je stvoriti poseban JavaScript objekta, koji je se zove XMLHttpRequest. Sada, to je vrlo lako za to. Mi samo reći var, bez obzira na želimo pozvati ovaj objekt, jednako novi XMLHttpRequest. I sada smo sada dobiti AJAX vrsta objekta, ili XMLHttpRequest objekt, koji će omogućiti nas asinkrono ažurirati našu stranicu. 

Nakon što smo stečen ovaj novi objekt, to XMLHttpRequest, moramo učiniti nešto za svoju onreadystatechange ponašanje. Onreadystatechange ponašanje je zapravo samo kada se napravi zahtjev na web stranici, stranica prolazi kroz niz koraka. Prvo, zahtjev nije poslan. Zatim je zahtjev poslao, ali ne djeluje. Zatim je zahtjev postupiti. Zatim je zahtjev poslan natrag na vas. 

Zatim je zahtjev u potpunosti učita na stranici. To su različita stanja. I tako moramo postaviti našim Novi XMLHttpRequest objekt da se mijenjaju stanje pripravnosti promjene. I obično, mi to radimo definiranje anonimni funkciju, koja mi smo upoznati s iz JavaScript je sada, da se zove kad stanju pripravnosti promjene. To stvarno nije mnogo više od toga. Samo ćemo se definira Anonimni funkcija, vrsta sviđa ono smo radili u JavaScript, gdje bi imaju anonimne funkciju odgovoriti na na klik, ili kad su mi radimo kartu razni objekti u nizu. 

Nešto se dogodilo kada nešto klikne. U ovom slučaju, to je samo nešto što je događa kada se stanje naše stranice promjene. Postoje dva druga svojstva koje su svojevrsni of-- oni nisu samo svojstva koja su svojstveni sučelja XMLHttpRequest, ali oni su prilično važne one. Postoji nešto što se zove readyState, koji je kao što vjerojatno možete pogoditi, je povezana s onreadystatechange. To zapravo govori, što readyState je. 0, 1, 2, 3, i 4 su mogućnosti tamo, a vrsta grubo odgovara onome što Upravo sam govorio o prije sekundu. 

A onda status, koji nadam se, ako sve prođe u redu, je 200, što je kratka za, naravno, u redu, što smo upoznati s iz http. Dakle, mi smo u nadi da je naša država spremna je četiri, a naš status 200. A ako naše stanje pripravnosti je četiri, a odgovor je spremna da se stavi na stranica, a status je 200, bili smo u mogućnosti to učiniti sve je uspješno, Sada možemo asinkrono ažurirati našu stranicu bez reload cijeli sadržaj njega. 

Nakon što smo definirali što se događa na ponašanje onreadystatechange, a mi smo provjerili da readyState je 4 i status 200, onda sve što trebate učiniti je otvorili asinkrone Zahtjev, koji je samo stvaranje HTTP GET zahtjev općenito. Samo radi programatski, umjesto kroz naše web pregledniku. I onda mi poslati taj zahtjev. Pa što to možda izgledaju u kontekstu? Dakle, ovdje je funkcija koja bavi AJAX zahtjeva. U REDU? I ja sam samovoljno rekao prihvaća argument. I ovo neka vrsta Općenito kostur ovdje. Na samom početku, dobili smo sami nova XMLHttpRequest objekt. Zatim, moram postaviti onreadystatechange ponašanje. I tako ću reći kada readyState promjene, Želim da nazoveš tu funkciju. 

Koji će se pitati Pitanje, ako je readyState 4, ako je readyState promijenio biti 4, a status je 200, tako da smo imali uspješnu zahtjev, sam želite učiniti nešto na stranici. A mi ćemo se pogled na primjer što se da je nešto moglo biti u sekundi. Dakle, sada sam definirao moj anonimni funkcija, moja funkcija odgovor kad god su readyState promjene. 

Pa onda sam samo trebate otvoriti zahtjev, koristite Otvori način. A onda, šaljem taj zahtjev. I neka je pogledati više konkretan primjer od čega AJAX može učiniti na našim web stranicama. Dakle, imam ovdje vrlo jednostavna Stranica se zove home.html. I ja imam informacija ide ovdje i neka vrsta padajućeg izbornika. 

A mi ćemo ponovno ovu u jednoj sekundi. Ali mislim da mi sada treba uzeti pogledajte stvarni izvorni kod. I tako, idem otvoriti home.html. Pa ćemo vidjeti što se događa. Tako se na samom vrhu ovdje, imam Neki JavaScript stvari koje se događa. 

I ovdje, ja očito ima div čiji ID je infodiv, i neke informacije će ići tamo. A onda sam se ovaj obrazac. I unutar toga oblik, imam nešto naziva Odaberite koji samo je padajući izbornik s hrpom različitih opcija. A očito kad se to promijeni, kad opcija koja je odabrana ima promijenilo, ja ću nazvati neke funkcije cs50Info, a onda ću proći this.value, gdje se to odnosi na koja opcija odabrana, i vrijednost je jedna od njih ovdje, opcija vrijednost = jednaka prazna "Blumberg" "Bowden", "Chan" i "Malan." 

Dakle, ono što bi zapravo dogoditi ovdje kad sam to učiniti? Pa, neka je pogledajte blumberg.html. Izgleda da je samo isječak neke HTML. A u stvari, što se nadam će se dogoditi ovdje se da ću biti u mogućnosti priključiti ovaj HTML izravno u moje web stranice bez reload stranicu, tako da kad Biram Hannah iz padajućeg Izbornik, informacije o Hannah, Konkretno, ovaj informacije ovdje u blumberg.html, je ono što se prikazuje na stranici. A ja ne moram osvježiti. I ako sam izabrao netko drugi, njihovi podaci će se pojaviti. Kako to učiniti? Opet, to zahtijeva nam da koristite neki AJAX. I tako, mi ćemo otvoriti ajax.js. I ovdje je to funkcija, cs50Info. Ako ime nije ništa, sam se vratiti. Neću učiniti ništa, ako prazna opcija je izabrao. Inače, ja ću stvoriti novi XMLHttpRequest. A onda ću reći, kad je readyState promjene, nazovite ovu funkciju. 

A ako je readyState 4. a status je 200, evo malo jQuery na liniji 13. Ali sve radim je rekao, promijeniti sadržaj infodiv biti ono što sam se vratio kao odgovor od mog HttpRequest. 

Što je moja HttpRequest? Pa, to je pravo ovdje na liniji 18 i 19 godina. Linija 18, ja zapravo Pripremam GET zahtjev za ime + .html. I opet, naziv je ovdje argument da je donesen kao parametar cs50Info. 

Tako je u osnovi, ja sam prolazeći u nečijem ime, što je to skup opcija kako smo vidjeli u padajući izbornik u obliku. Ja sam dobivanje to ime. A ja govorim bih vas želio molimo isprosi mi da file.html, a zatim poslati taj zahtjev. 

I tako to ide onreadystatechange da se sluša i čeka i čeka i čeka, dok readyState je 4, a status je 200. Tako da je spremna da bude služen, a zahtjev je bio uspješan. A onda, ako je to, to će promijeniti sadržaj infodiv da se tekst odgovor koji sam dobio natrag. 

Tako ćemo vidjeti kako se to Možda se zapravo radi. Tako ćemo preko glave na moj e prozor, a mi ćemo pogledati ovdje. Tako ćemo pogledati što se događa ovdje u AJAX. Tako ćemo izabrati nekoga iz padajućeg izbornika. Dakle, u ovom slučaju, neka je samo odaberite Hannah. I obavijest da je Hannah je Informacije promijenio, ali nisam imao any-- mom Stranica nije u potpunosti ponovno učitati. Ono ostao. Većina stvari je ostao. AJAX test nije promijenio. Sama gumb, ovaj padajući izbornik nije promijenio. Ali informacije tamo učinio promjenu. I ovisno o tome Brzo moje računalo ne pomakne, možda zapravo vidjeti da sadržaj nestaje, a zatim ponovno pojavi stvarno brzo. To je sadržaj koji se izbrisana iz infodiv, i zatim zamijeni s Novi asinkroni zahtjev. 

Dakle, ako sam ga prebaciti se reći, Rob-- i opet, pogledati, i možda ćemo ga vidjeti zapravo nestati i pojaviti se brzo. Vidiš to? Kako to samo popped daleko, a zatim ga puniti? To je AJAX zahtjev vrsta odvija. I tako, ovisno o Osoba sam birati, ja sam čineći različite asinkrone Zahtjev za neku drugu datoteku da imam na mom serveru. A sadržaj mog infodiv ažuriranje, na temelju koje od tih sam izabrao. Tako da je stvarno sve što se AJAX. To nam omogućuje da napravite ove asinkrone zahtjeva, ažuriranja stranici. Bez osvježite cijelu stranicu, ćemo dobiti novi Sadržaj od njega čineći novi svježi zahtjev poslužitelju. I tako, naši stranice mogu postati vrlo malo dinamičniji. 

I kao što smo dobili više i više naprednih, te Možda se stvari kao što su recimo, svoju pristiglu poštu, gdje se ne morate ništa učiniti. Ne morate kliknuti padajući izbornik ili pritisnite ništa, i odjednom, vaš najnoviji e pojavi na vrhu. To je također samo Ajax zahtjev. Ajax traži svoje poslužitelja, poslužitelja e-pošte, poslati nad svim informacijama o svojim najnovijim e-pošte, i mijenja ono što vidite na Zaslon biti tvoj najnoviji set e-pošte. A ako imate novi u postoji, onda je sadržaj tog div mijenjat će se ovisno ažurirani sadržaj. Ja sam Doug Lloyd. Ovo je CS50.