[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.