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