[Music kucheza] DOUG LLOYD: Kwa hiyo moja zaidi aina ya dhana kwamba aina ya maporomoko chini ya mwavuli wa JavaScript ni kitu kinachoitwa AJAX. Hadi hatua hii, yetu mwingiliano na JavaScript imekuwa ndogo kushinikiza kifungo na kitu kinachotokea. Na hasa, jambo ambalo hufanyika ni tovuti yetu kuangalia na kujisikia mabadiliko. Sawa? Kama hasa, katika hati kitu mfano wa kuigwa video, Mimi iliyopita rangi ya asili. Lakini wakati mimi alifanya hivyo, sikuwa na kufanya maombi yoyote maalum ya ziada. Sikuwa na kuomba kwamba server kutuma mimi ukurasa mpya. Mimi tu iliyopita kile tayari alikuwa. Sikuwa na kwa upya ukurasa wangu, na mambo dhahiri iliyopita, hivyo hiyo ni kubwa. Lakini kuna baadhi dhahiri mwingiliano mwongozo user wanaohusika. AJAX ni mbinu baridi ambayo inaruhusu sisi update maudhui ukurasa wa, na si tu kuangalia na kuhisi, bila reloading. 

Na kwa mahsusi wakati mimi kusema kuhuisha maudhui ya ukurasa wa, Sisemi sisi kuandika upya ukurasa wa kutumia JavaScript. Mimi kusema sisi kweli kuomba habari zaidi kutoka server bila ukurasa wetu kuwa na upya. 

Sasa kwa kuwa aina ya kidogo ya mbinu ya juu zaidi kwamba sisi ni kwenda kuzungumza kuhusu katika video hii. Tunakwenda kuwa na baadhi ya mwingiliano. Lakini wakati sisi kufanya, mimi nina kwenda kuwa kufanya maombi kwa mtandao wa kompyuta. Katika kesi hiyo, tu nini mbio Apache yangu mtandao wa kompyuta. Mimi nina kwenda kuwa maamuzi ziada maombi wakati mimi nina kutembelea ukurasa wa mtandao, lakini ukurasa wangu si kupata mahitaji. 

Ni kwenda tu kwa asynchronously update ukurasa wangu. Na hiyo ndiyo, kwa kweli, ambayo AJAX anasimama kwa, ni Asynchronous JavaScript na XML. XML ni aina nyingine ya ghafi lugha, na unaweza aina ya kufikiria ni kama HTML. Ni kabisa kitu kimoja, lakini ni kimsingi tu lugha ghafi. Hivyo ni Asynchronous JavaScript na lugha ghafi. 

Hivyo ili kutumia hii AJAX AJAX technique-- si tofauti lugha ya programu. Ni tu aina ya seti ya techniques-- sisi haja ya kuunda maalum JavaScript kitu, ambayo inaitwa XMLHttpRequest. Sasa, ni rahisi sana kufanya hivyo. Sisi tu kusema var, chochote tunataka kuwaita kitu hicho, sawa XMLHttpRequest mpya. Na sasa sisi sasa mmepata AJAX aina ya kitu, au XMLHttpRequest kitu, ambayo itawawezesha sisi asynchronously update ukurasa wetu. 

Baada ya sisi kuwa na kujipatia hii mpya kitu, XMLHttpRequest hii, tuna kufanya kitu cha wake onreadystatechange tabia. Onreadystatechange tabia ni kweli tu wakati kufanya ombi kwenye ukurasa wa mtandao, ukurasa huenda kwa njia ya idadi ya hatua. Kwanza, ombi haijawahi kutumwa. Kisha, ombi imekuwa akatuma watu, lakini si alifanya juu. Kisha ombi imekuwa alifanya juu. Kisha ombi ni kupelekwa nyuma yenu. 

Kisha, ombi ni kubeba kikamilifu katika ukurasa wako. Hayo ni mataifa tofauti. Na hivyo tunahitaji kuweka yetu mpya XMLHttpRequest kitu kubadili wakati mabadiliko tayari serikali. Na kwa kawaida, sisi kufanya hivyo kwa kufafanua kazi bila majina, ambayo sisi ni ukoo na kutoka JavaScript sasa, kwamba inaitwa wakati mabadiliko tayari serikali. Ni kweli si zaidi ya hapo. Tunakwenda tu kuwa kufafanua kazi bila majina, aina ya kama nini tunafanya katika JavaScript, ambapo tunataka na kazi bila majina kujibu juu ya click, au wakati tunafanya ramani ya vitu mbalimbali katika safu. 

Kitu kilichotokea wakati kitu alikuwa clicked. Katika kesi hiyo, ni tu kitu ni kinachotokea wakati hali ya ukurasa wetu mabadiliko. Kuna mali nyingine mbili ambazo aina of-- wao siyo mali tu kwamba ni asili ya XMLHttpRequest, lakini wao ni wale pretty muhimu. Kuna kitu kinachoitwa readyState, ambayo kama pengine unaweza nadhani, ni kuhusiana na onreadystatechange. Ni kweli atakwambia nini readyState ni. 0, 1, 2, 3 na 4 ni Uwezekano huko, na wao aina ya takribani yanahusiana na nini Nilikuwa tu kuzungumza juu ya pili iliyopita. 

Na kisha kwa sasa, ambayo hopefully ikiwa kila kitu akaenda OK, ni 200, ambayo ni short kwa, bila shaka, sawa, ambayo sisi ni ukoo na kutoka http. Hivyo sisi ni matumaini kwamba hali yetu tayari ni nne, na hali yetu ni 200. Na kama hali yetu tayari ni nne, na majibu yuko tayari kuwekwa kwenye ukurasa, na hali ni 200, tulikuwa na uwezo wa kufanya kila kitu kwa mafanikio, sasa tunaweza asynchronously update ukurasa wetu bila ya kuwa na upya maudhui yote ya hilo. 

Baada tumekuwa inavyoelezwa nini kinatokea kwa tabia onreadystatechange, na tumekuwa kuchunguzwa kwamba readyState ni 4 na hali ni 200, basi wote tunahitaji kufanya ni kufungua Asynchronous ombi, ambayo ni maamuzi tu http ujumla kupata ombi. Tu kufanya hivyo programmatically, badala ya kupitia mtandao wetu browser. Na kisha sisi kutuma ombi hilo. Kwa hiyo kile gani hii labda kuangalia kama katika mazingira? Hivyo hapa ni kazi ambayo mikataba na maombi AJAX. SAWA? Na nimekuwa kiholela alisema anapokea hoja. Na hii aina ya mkuu mifupa hapa. Mwanzoni kabisa, sisi kupata sisi wenyewe mpya XMLHttpRequest kitu. Kisha, mimi haja ya kuweka onreadystatechange tabia. Na hivyo mimi nina kwenda kusema wakati mabadiliko readyState, Mimi nataka wewe piga kazi hii. 

Ambayo ni kwenda kuuliza swali, kama readyState ni 4, ikiwa readyState imebadilika kuwa 4, na hali ilikuwa 200, hivyo alikuwa ombi mafanikio, mimi wanataka kufanya kitu kwa ukurasa. Na tutaweza kuangalia mfano wa kile kitu ambacho inaweza kuwa katika pili. Hivyo basi, sasa mimi kuwa defined kazi yangu bila majina, majibu yangu kazi wakati wowote readyState mabadiliko. 

Hivyo basi mimi tu haja ya kufungua kuomba, kwa kutumia njia Open. Na kisha, mimi kutuma ombi hilo. Na hebu tuangalie mfano thabiti zaidi nini AJAX anaweza kufanya juu ya kurasa za mtandao wetu. Hivyo nina hapa ni rahisi sana ukurasa aitwaye home.html. Na mimi nimepata habari unaendelea hapa na aina fulani ya orodha kunjuzi. 

Na tutaweza kupitia upya hii katika moja ya pili. Lakini nadhani tunapaswa sasa kuchukua kuangalia halisi kanuni chanzo. Na hivyo, mimi nina kwenda kufungua home.html. Na tutaweza kuona nini kinaendelea. Hivyo hadi saa juu sana hapa, nina baadhi ya mambo JavaScript kwamba kinaendelea. 

Na hapa, mimi inaonekana kuwa div ambao ID ni infodiv, na baadhi ya taarifa ni kwenda huko. Na kisha mimi kuwa aina hii. Na ndani ya hii fomu, nina kitu aitwaye Teule, ambayo ni tu orodha kuacha chini pamoja na kundi la chaguzi mbalimbali. Na inaonekana wakati kwamba mabadiliko, wakati chaguo kwamba imekuwa kuchaguliwa ina iliyopita, mimi nina kwenda kuwaita baadhi ya kazi cs50Info, na kisha mimi nina kwenda kwa kupita katika this.value, ambapo hii inahusu ambayo chaguo alichaguliwa, na thamani ya mmoja wa haya hapa, chaguo thamani = sawa na tupu, "Blumberg," "Bowden," "chan," na "Malan." 

Kwa hiyo kile ni wazi kunaweza kutokea hapa wakati mimi kufanya hivyo? Naam, hebu kuchukua kuangalia blumberg.html. Inaonekana kama ni tu snippet ya baadhi Html. Na kwa kweli, ni nini nina matumaini kinaenda kutokea hapa ni mimi nina kwenda kuwa na uwezo wa kuziba Html hii moja kwa moja kwenye mtandao ukurasa wangu bila ya kuwa na upya ukurasa, kiasi kwamba wakati Mimi kuchagua Hana kutoka kushuka chini orodha, taarifa kuhusu Hana, hasa, habari hii hapa katika blumberg.html, ni nini inaonyesha juu ya ukurasa. Na sina kupata mahitaji. Na kama mimi waliamua mtu mwingine, taarifa zao bila kuonyesha up. Je, mimi kufanya hivyo? Tena, hii inahitaji yetu kwa kutumia baadhi AJAX. Na hivyo, tutaweza kufungua ajax.js. Na hapa ni kwamba kazi, cs50Info. Kama jina ni kitu, mimi kurudi. Sitakuja kufanya kitu chochote kama chaguo tupu amechaguliwa. Vinginevyo, mimi nina kwenda kwa kujenga XMLHttpRequest mpya. Na kisha mimi nina kwenda kusema, wakati mabadiliko readyState, piga kazi hii. 

Na kama readyState ni 4 na hali ni 200, hapa ni kidogo ya jQuery kwenye mstari 13. Lakini wote mimi nina kufanya ni kusema, kubadilisha yaliyomo ya infodiv kuwa chochote I got nyuma kama majibu kutoka kwa HttpRequest yangu. 

HttpRequest yangu ni nini? Naam, hiyo ni haki hapa kwenye mstari 18 na 19. Mstari 18, mimi kimsingi kuandaa a kupata ombi kwa jina + .html. Na tena, jina hapa ni Hoja hiyo ilikuwa kupita katika kama parameter cs50Info. 

Hivyo kimsingi, Mimi kupita katika mtu wa jina, ambayo ilikuwa kwamba seti ya chaguzi kuwa tuliona katika kushuka chini katika orodha ya fomu. Mimi nina kupata jina hilo. Na mimi kusema napenda wewe tafadhali kupata kwa ajili yangu kwamba file.html, na kisha kutuma ombi hilo. 

Na hivyo kuwa onreadystatechange ni kwenda kuwa kusikiliza na kusubiri na kusubiri na kusubiri mpaka readyState ni 4, na hali ni 200. Hivyo ni tayari kutumikiwa, na ombi ilikuwa na mafanikio. Na kisha kama ni, ni kwenda kubadilisha yaliyomo ya infodiv kuwa majibu Nakala kwamba mimi got nyuma. 

Basi hebu angalia jinsi hii ili kweli kazi. Hivyo tutaweza kichwa juu ya browser yangu dirisha, na tutaangalia hapa. Basi hebu tuangalie nini kinaendelea hapa katika AJAX. Hivyo tutaweza kuchagua mtu kutoka orodha kuacha chini. Hivyo katika kesi hii, hebu kuchagua tu Hana. Na taarifa kwamba Hana Maelezo imebadilika, lakini sikuwa na any-- yangu ukurasa hakuwa kabisa upya. Mambo walikaa. Wengi wa mambo walikaa. AJAX Mtihani hakuna mabadiliko. Kifungo yenyewe, hii kushuka chini orodha hakuna mabadiliko. Lakini habari huko alifanya mabadiliko. Na kulingana na jinsi haraka kompyuta hatua yangu, wewe kweli wanaweza kuona kwamba maudhui kutoweka na kisha reappears kweli haraka. Hiyo ni bidhaa kuwa kufutwa kutoka infodiv, na kisha kubadilishwa na mpya Asynchronous ombi. 

Hivyo kama mimi kubadili kuwa ni kusema, Rob-- na tena, kuangalia, na labda tutaweza kuona ni kweli kutoweka na reappear haraka. Unaweza kuona kwamba? Jinsi tu popped mbali, na kisha refilled? Hiyo ni ombi AJAX aina ya unafanyika. Na hivyo kutegemea mtu mimi kuchagua, mimi nina kufanya Asynchronous tofauti ombi faili mbalimbali kwamba nina kwenye kompyuta yangu. Na yaliyomo ya yangu infodiv ni uppdatering, kulingana na yupi kati ya hawa nimekuwa waliochaguliwa. Hivyo hiyo ni kweli yote kuna AJAX. Ni inaruhusu sisi kufanya Asynchronous hizi maombi, updates kwa ukurasa. Bila ya kuwa na mahitaji ukurasa mzima, tunakwenda kupata mpya yaliyomo humo kwa kufanya mpya ombi safi kwa kompyuta. Na hivyo, kurasa zetu wanaweza kuwa kidogo kabisa nguvu zaidi. 

Na kama sisi kupata zaidi na zaidi ya juu, wewe ili kupata mambo kama kusema, email Inbox yako, ambapo huna kufanya kitu chochote. Huna click kushuka chini orodha au bonyeza kitu chochote, na kwa ghafla, newest yako email inaonyesha juu kwa juu. Hiyo ni pia tu ombi Ajax. Ajax inaomba yako server, email server, kutuma juu ya taarifa zote kuhusu barua pepe yako karibuni, na kubadilisha nini kuona kwenye screen kuwa kuweka yako newest ya barua pepe. Na kama una mwezi mmoja katika huko, basi maudhui ya kwamba div kutakuwa na mabadiliko kutafakari updated maudhui. Mimi nina Doug Lloyd. Hii ni CS50.