[MIZIK jwe]
>> Doug Lloyd: Se konsa, yon sèl plis sòt de nosyon ki
sòt de tonbe anba parapli a nan JavaScript se yon bagay yo rele Ajax.
Jiska pwen sa a, nou an entèraksyon ak JavaScript
ki te limite a sa sèlman pouse yon bouton ak yon bagay k ap pase.
Apre sa, espesyalman, nan yon bagay ki k ap pase
se sit nou an gade epi yo santi chanjman.
Dwa?
Fè tankou an patikilye, nan la dokiman modèl objè videyo,
Mwen chanje koulè a ​​background.
Men, lè m 'te fè sa, mwen pa t' gen fè nenpòt ki demann espesyal siplemantè.
Mwen pa t 'gen yo mande pou sèvè a voye m 'yon nouvo paj.
Mwen jis chanje sa mwen te deja gen.
Mwen pa t 'gen yo rechargement paj m' yo, ak bagay sa yo definitivman chanje,
se konsa sa a, se gwo.
Men, gen nan definitivman kèk entèraksyon itilizatè manyèl enplike nan sa.
Ajax se yon teknik fre ki pèmèt nou mete ajou kontni yon paj la,
epi li pa jis gade nan epi yo santi, san yo pa rupture.
>> Ak nan espesyalman lè m ' di à kontni yon paj la,
Mwen pa di nou reyekri paj la lè l sèvi avèk JavaScript.
M ap di nou aktyèlman mande plis enfòmasyon ki soti nan sèvè a
san yo pa paj nou an gen recharger.
>> Koulye a, ki sòt de yon ti jan nan yon teknik ki pi avanse
ke nou ap ale nan pale sou nan videyo sa a.
Nou pral gen kèk entèraksyon.
Men, lè nou fè sa, mwen pral yo dwe fè demann nan sèvè a entènèt.
Nan ka sa a, jis sa ki nan kouri sèvè wèb Apache mwen.
Mwen pral yo dwe fè plis demann pandan y ap Mwen vizite yon paj entènèt,
men paj m 'lan pa pral rafrechi.
>> Li nan jis ale nan asenkron ajou paj m 'yo.
Epi sa a,, an reyalite, ki Ajax kanpe pou,
se Asynchrone JavaScript ak XML.
XML se yon lòt kalite markeup lang, epi ou ka sòt nan
panse a li jis tankou HTML.
Li pa byen menm bagay la, men li nan fondamantalman jis yon lang markeup.
Se konsa, li nan yon asenkron JavaScript ak yon lang markeup.
>> Se konsa, yo nan lòd yo sèvi ak sa a Ajax technique-- Ajax
se pa yon lang programmation ki apa a.
Se jis sòt de yon seri techniques-- nou
bezwen yo kreye yon espesyal JavaScript objè, ki
yo rele sa yon XMLHttpRequest.
Koulye a, li trè fasil fè sa a.
Nou jis di var, kèlkeswa sa nou vle rele sa a objè,
egal nouvo XMLHttpRequest.
Epi, koulye a nou gen kounye a jwenn yon sòt Ajax nan objè,
oswa yon XMLHttpRequest objè, ki pral pèmèt
nou asenkron ajou paj nou an.
>> Apre nou gen vinn sa a nouvo objè, XMLHttpRequest sa a,
nou dwe fè yon bagay yo li yo onreadystatechange konpòtman.
Onreadystatechange konpòtman se reyèlman jis
lè ou fè yon demann nan yon paj entènèt, paj la
ale nan yon kantite etap.
Premyèman, yon demann pa te voye.
Lè sa a, te demann lan te voye, men se pa aji sou li.
Lè sa a, te demann lan te aji sou li.
Lè sa a, demann lan se ke yo te voye tounen ba ou.
>> Lè sa a, demann lan se konplètman chaje nan paj ou yo.
Moun sa yo se eta diferan.
Se konsa, nou bezwen yo mete nou an nouvo XMLHttpRequest objè
chanje lè chanjman sa yo eta pare.
Ak tipikman, nou fè sa a pa defini yon fonksyon anonim, ki
nou ap abitye ak soti nan JavaScript kounye a, ki
yo rele lè chanjman sa yo eta pare.
Li nan reyèlman pa anpil plis pase sa.
Nou jis ap ale nan dwe defini yon anonim fonksyon, sòt de renmen sa
nou te fè nan JavaScript, kote nou ta
gen yon fonksyon anonim reponn a yon sou klike sou,
oswa lè nou te fè yon kat jeyografik nan objè yo divès kalite nan yon etalaj.
>> Yon bagay te pase lè yon bagay te klike.
Nan ka sa a, li nan jis yon bagay ki vini lè eta a nan paj nou an
chanjman.
Gen de lòt pwopriyete ke yo sòt de- yo ap pa
pwopriyete yo sèlman ki nannan nan XMLHttpRequest,
men yo ap yo menm bèl enpòtan.
Genyen yon bagay yo rele readyState, ki jan ou ka pwobableman devine,
se ki gen rapò ak onreadystatechange.
Li aktyèlman di ou sa readyState a se.
0, 1, 2, 3, ak 4 yo se posiblite yo a,
epi yo sòt de apeprè koresponn ak sa
Mwen te jis ap pale de yon dezyèm de sa.
>> Lè sa a, sitiyasyon, ki èspere ke si tout bagay te ale OK,
se 200, ki se kout pou, nan kou, OK,
nou ap abitye ak soti nan HTTP.
Se konsa, nou ap tann ke eta nou an pare se kat, ak estati nou an, se 200.
Men, si eta pare nou an se kat, ak repons lan
se pare yo dwe mete yo sou nan paj, ak estati a se 200,
nou te kapab fè tout bagay avèk siksè,
kounye a nou kapab asenkron aktyalizasyon paj nou an
san yo pa gen Reload kontni an tout antye de li.
>> Apre nou te defini sa k ap pase ak konpòtman an onreadystatechange,
e nou te tcheke ki readyState se 4 ak estati a se 200,
Lè sa a, tout sa nou bezwen fè se louvri moute yon asenkron
demann, ki se jis fè yon Http jeneralman JWENN demann.
Jis fè li pwogramasyon, olye pou yo nan navigatè wèb nou an.
Lè sa a, nou voye ki mande sa.
Se konsa, sa fè bagay sa a petèt gade tankou nan yon kontèks?
Se konsa, isit la nan yon fonksyon ki kontra avèk Ajax demann.
OK?
Apre sa, mwen te abitrèman di li aksepte yon agiman.
Lè sa a yon sòt de yon kilè eskèlèt jeneral isit la.
Nan kòmansman la anpil, nou jwenn tèt nou yon nouvo XMLHttpRequest objè.
Lè sa a, mwen bezwen yo mete nan onreadystatechange konpòtman.
Se konsa, mwen pral di lè chanjman sa yo readyState,
Mwen vle nou rele fonksyon sa a.
>> Ki se ale nan mande a kesyon, si readyState nan
se 4, si readyState nan te chanje yo dwe 4, ak estati a te 200,
se konsa nou te gen yon demann siksè, mwen vle fè yon bagay nan paj la.
Epitou, n ap pran yon gade nan yon egzanp nan sa ki
ke yon bagay ta ka nan yon dezyèm fwa.
Se sak fè, koulye a, mwen te defini fonksyon anonim mwen,
fonksyon repons mwen chak fwa readyState chanjman yo.
>> Se konsa, lè sa a mwen jis bezwen louvri moute yon mande, w ap itilize metòd la Open.
Apre sa, lè sa a, m'ap voye ki mande sa.
Li kite yo pran yon gade nan yon egzanp plis konkrè
nan sa ki Ajax ka fè sou paj wèb nou an.
Se konsa, mwen gen isit la yon trè senp paj rele home.html.
Apre sa, mwen te gen yon enfòmasyon ale isit la ak kèk sòt de meni drop-desann.
>> Epitou, n ap revize sa a nan yon sèl dezyèm fwa.
Men, mwen panse ke nou ta dwe kounye a pran yon gade nan kòd la sous vrè.
Se konsa, mwen pral louvri moute home.html.
Epitou, n ap wè sa ki k ap pase sou.
Se konsa, moute nan tèt la anpil isit la, mwen gen kèk bagay JavaScript ki k ap pase sou.
>> Ak isit la, mwen aparamman gen yon div ki gen ID se infodiv,
ak kèk enfòmasyon ki pral ale la.
Lè sa a, mwen gen fòm sa a.
Ak andedan nan sa a fòm, mwen gen yon bagay
rele yon Chwazi, ki se jis yon meni drop-desann
ak yon pakèt moun sou opsyon diferan.
Ak aparamman lè ki chanje, lè opsyon a ki te chwazi gen
chanje, mwen pral rele kèk fonksyon cs50Info,
ak Lè sa a, mwen pral pase nan this.value,
kote sa a refere a ki opsyon te chwazi,
ak valè se youn nan sa yo isit la, opsyon valè = egal vid, "Blumberg,"
"Bowden," "chan," ak "Malan."
>> Se konsa, sa ta ka aktyèlman rive isit la lè m 'fè sa a?
Oke, kite a pran yon gade nan blumberg.html.
Sanble li nan jis yon brib nan kèk HTML.
Lè an reyalite, ki sa Mwen espere ki pral rive isit la
se mwen pral pou kapab ploge sa a Html dirèkteman nan paj entènèt mwen an
san yo pa gen Reload paj la, sa yo ki lè
Mwen chwazi Hannah soti nan drop-desann nan meni an, enfòmasyon sou Ana,
an patikilye, enfòmasyon sa a isit la nan blumberg.html,
se sa ki montre moute sou paj la.
Apre sa, mwen pa bezwen rafrechi.
Men, si mwen te chwazi yon lòt moun, enfòmasyon yo ta montre yo.
Kouman pou mwen fè sa?
Yon fwa ankò, sa a egzije pou nou sèvi ak kèk Ajax.
Se konsa, nou pral louvri moute ajax.js.
Ak isit la se ke fonksyon, cs50Info.
Si non se pa gen anyen, mwen retounen.
Mwen pa pwal fè anyen si te opsyon nan vid te chwazi yo.
Sinon, mwen pral kreye yon nouvo XMLHttpRequest.
Lè sa a, mwen pral di, lè a chanjman readyState, rele fonksyon sa a.
>> Men, si readyState a se 4 ak estati a se 200,
isit la nan yon ti kras a jQuery sou liy 13.
Men, tout m ap fè ap di, chanje sa ki nan infodiv
yo dwe tou sa mwen te tounen kòm yon repons nan men HttpRequest mwen.
>> Ki sa ki se HttpRequest mwen an?
Oke, sa a, se dwa isit la sou liy 18 ak 19.
Liy 18, mwen fondamantalman prepare yon JWENN demann pou non + Html.
Epi ankò, non isit la se agiman an ki te
te pase nan kòm yon paramèt cs50Info.
>> Se konsa, fondamantalman, Mwen kap pase nan yon moun nan non, ki te ke seri opsyon
ke nou te wè nan nan gout-desann meni nan fòm nan.
Mwen ap resevwa non sa a.
Apre sa, mwen ap di mwen ta renmen ou tanpri jwenn pou m 'ke file.html,
ak Lè sa a voye ki mande sa.
>> Se konsa, ki onreadystatechange ki pral yo dwe koute ak ap tann ak ap tann
ak ap tann, jouk readyState nan se 4, ak estati a se 200.
Se konsa, li pare yo dwe sèvi, ak demann lan te gen siksè.
Lè sa a, si li se, li k ap pase yo chanje sa ki nan infodiv
yo dwe tèks la repons ke mwen te resevwa tounen.
>> Se konsa, kite a wè ki jan sa a ta ka aktyèlman travay.
Se konsa, nou pral tèt sou nan navigatè m ' fenèt, epi n ap gade isit la.
Se konsa, kite a pran yon gade nan sa k ap pase isit la nan Ajax.
Se konsa, nou pral chwazi yon moun soti nan meni an gout-desann.
Se konsa, nan ka sa a, se pou yo jis chwazi Hannah.
Apre sa, remake ke Hannah nan te enfòmasyon chanje,
men mwen pa t 'gen any-- mwen paj pa t 'antyèman recharger.
Bagay la rete la.
Pifò nan bagay la rete la.
Ajax Tès pa t 'chanje.
Bouton nan tèt li, sa a gout-desann meni pa t 'chanje.
Men, enfòmasyon gen te fè chanjman.
Apre sa, depann sou ki jan byen vit deplase òdinatè mwen an,
ou aktyèlman ta ka wè ke kontni an disparèt ak Lè sa a artrouv reyèlman
byen vit.
Sa a kontni an ke yo te efase soti nan infodiv,
ak Lè sa a ranplase ak yon nouvo demann asenkron.
>> Se konsa, si mwen chanje li yo dwe di, Rob-- e ankò, pran yon gade,
e petèt nou pral wè li aktyèlman disparèt, epi repwodwi byen vit.
Ou wè sa?
Ki jan li jis déja lwen, ak Lè sa a li rampli?
Sa a Ajax demann lan sòt de ap pran plas.
Se konsa, tou depann de la moun mwen chwazi, mwen
fè yon asenkron diferan demann yo voye yon dosye diferan
ke mwen gen sou sèvè m 'yo.
Apre sa, sa ki nan mwen an infodiv ap mete ajou,
ki baze sou ki nan sa yo mwen te chwazi yo.
Se konsa, sa ki nan vrèman tout gen nan Ajax.
Li pèmèt nou fè sa yo asenkron demann, dènye a yon paj.
San yo pa gen rafrechi paj la an antye,
nou ap ale nan jwenn nouvo kontni soti nan li pa fè
yon nouvo demann fre nan sèvè a.
Se konsa, paj nou an ka vin byen yon ti jan pi plis dinamik.
>> E kòm nou jwenn plis ak plis ankò avanse, ou
ta ka jwenn bagay sa yo tankou di, bwat resepsyon imel ou,
kote ou pa bezwen fè anyen.
Ou pa oblije klike sou yon gout-desann meni oswa klike sou yon bagay,
ak tout nan yon toudenkou, ou dernye imel montre moute nan tèt la.
Sa a tou jis yon Ajax demann.
Ajax se mande ou sèvè, sèvè a imel,
voye sou tout enfòmasyon ki sou dènye Imèl ou,
ak chanje sa ou wè sou mòn lan ekran yo dwe dernye seri ou nan Imèl.
Men, si ou gen yon yon sèl nouvo nan a, Lè sa a, sa ki ekri nan ki div
pral chanje a reflete kontni an mete ajou.
Mwen se Doug Lloyd.
Sa a se CS50.