[MUSIC nagpe-play] DOUG LLOYD: So isa pa uri ng paniwala na uri ng bumaba sa ilalim ng payong ng JavaScript ay isang bagay na tinatawag na AJAX. Hanggang sa puntong ito, ang aming pakikipag-ugnayan sa JavaScript ay limitado upang itulak ang isang button at may mangyari. At partikular, ang isang bagay na mangyayari ay ang aming mga website hitsura at pakiramdam ng mga pagbabago. Right? Tulad ng sa partikular, sa mga dokumento object modelo ng video, Ako ay nagbago ang kulay ng background. Ngunit kapag ginawa ko iyon, hindi ko na kailangang na gawin ang anumang espesyal na mga dagdag na mga kahilingan. Hindi ko na kailangang humiling na ipadala ang server sa akin ng isang bagong pahina. Binago ko lamang kung ano ako ay nagkaroon na. Hindi ko na kailangang i-reload ang aking page, at mga bagay na tiyak ay nagbago, kaya na malaki. Ngunit mayroong tiyak na ang ilang kasangkot manual ugnayan ng gumagamit. AJAX ay isang cool na pamamaraan na nagbibigay-daan sa amin na i-update ang nilalaman ng isang pahina, at hindi lamang ang hitsura at pakiramdam, walang reload. 

At sa pamamagitan ng partikular na kapag ako sabihin ang pag-update ng nilalaman ng isang pahina, Hindi ko na sinasabi sa pagsulat na muli kami mga pahina gamit ang JavaScript. Ako sinasabi namin ang aktwal na humiling karagdagang impormasyon mula sa server walang aming page na kinakailangang i-reload. 

Ngayon na ang uri ng isang piraso ng isang mas advanced na pamamaraan na kami ay pagpunta sa makipag-usap tungkol sa video na ito. Kami ay pagpunta sa may ilang mga pakikipag-ugnayan. Ngunit kapag ginagawa namin, pupuntahan ko na maging paggawa ng mga kahilingan sa server ng web. Sa kasong ito, lamang kung ano ang tumatakbo ang aking Apache web server. Pupunta ako sa maging ang paggawa ng mga karagdagang kahilingan habang ako ng pagbisita sa isang web page, ngunit ang aking pahina ay hindi i-refresh. 

Lamang Ito ay pagpunta sa asynchronously-update ang aking pahina. At na, sa katunayan, na AJAX ay para sa, ay Asynchronous JavaScript at XML. XML ay isa pang uri ng markup wika, at maaari mong ayusin ng tingin ng mga ito tulad ng HTML. Ito ay hindi lubos ang parehong bagay, ngunit ito ay talaga lamang ng isang markup language. Kaya ito ay isang asynchronous JavaScript at isang markup language. 

Kaya upang gamitin ang AJAX technique-- AJAX ay hindi isang hiwalay na programming language. Ito ay uri lamang ng isang set ng techniques-- namin na kailangan upang lumikha ng isang espesyal na JavaScript bagay, na ay tinatawag na isang XMLHttpRequest. Ngayon, ito ay tunay madali na gawin ito. Kami lamang sabihin var, ano man gusto naming tumawag sa bagay na ito, katumbas ng bagong XMLHttpRequest. At ngayon ngayon namin nakuha isang AJAX uri ng object, o isang XMLHttpRequest bagay, na kung saan ay magbibigay-daan sa amin upang asynchronously update ang aming mga pahina. 

Pagkatapos namin nakuha ang bagong object, ito XMLHttpRequest, kami ay may sa gawin ang isang bagay sa kanyang onreadystatechange uugali. Onreadystatechange pag-uugali ay talagang lamang kapag ikaw ay gumawa ng isang kahilingan sa isang web page, ang pahina napupunta sa pamamagitan ng isang bilang ng mga hakbang. Una, ang isang kahilingan ay hindi pa naipapadala. Pagkatapos, ang mga kahilingan ay ipinadala, ngunit hindi kumilos sa. Pagkatapos ay ang kahilingan ay kumilos sa. Pagkatapos ay ang kahilingan ay ibinabalik sa iyo. 

Pagkatapos, ang kahilingan ay ganap na-load sa iyong pahina. Iyon ang mga iba't-ibang mga estado. At kaya kailangan namin upang itakda ang aming bagong XMLHttpRequest object sa pagbabago kapag ang handa pagbabago ng estado. At kadalasan, ginagawa namin ito sa pamamagitan ng pagtukoy sa isang hindi nakikilalang function, kung saan hindi namin pamilyar sa mula sa JavaScript ngayon, na ay tinatawag na kapag ang handa pagbabago ng estado. Ito ay talagang hindi magkano ang higit sa na. Kami lamang ay pupunta na pagtukoy ng isang anonymous na function, uri ng tulad ng kung ano ang aming ginagawa sa JavaScript, kung saan gusto namin magkaroon ng isang hindi kilalang function tumugon sa isang on-click, o kapag kami ay gumagawa ng mapa ng ang iba't-ibang mga bagay sa isang array. 

Isang bagay ang nangyari kapag isang bagay ay nag-click. Sa kasong ito, ito lang ang isang bagay ay nangyayari kapag ang estado ng aming pahina pagbabago. Mayroong dalawang iba pang mga ari-arian na uri of-- mga ito ay hindi ang tanging mga katangian na likas sa XMLHttpRequest, ngunit sila ay medyo mahalaga sa buhay. May isang bagay na tinatawag na readyState, na kung saan maaari mong marahil hulaan, ay may kaugnayan sa onreadystatechange. Ito ang tunay na nagsasabi sa iyo ano ang readyState ay. 0, 1, 2, 3, at 4 ay ang mga posibilidad doon, at uri sila ng humigit-kumulang tumutugma sa kung ano ang Ako ay pakikipag-usap lamang tungkol sa isang segundo ang nakalipas. 

At pagkatapos status, na sana kung ang lahat na nagpunta OK, ay 200, na kung saan ay maikli para, siyempre, OK, na kung saan kami ay pamilyar sa mula sa HTTP. Kaya kami ay umaasa na ang aming handa estado ay apat, at ang aming katayuan ay 200. At kung handa na ang aming estado ay apat, at ang mga tugon ay handa na upang ilagay sa pahina, at ang katayuan ay 200, nagawa naming gawin ang lahat ng bagay ay matagumpay na, ngayon ng aming makakaya asynchronously i-update ang aming pahina nang hindi na kinakailangang i-reload ang buong nilalaman ng mga ito. 

Pagkatapos na tinukoy namin kung ano ang mangyayari sa pag-uugali onreadystatechange, at nasuri namin na readyState ay 4 at status ay 200, at pagkatapos ang lahat ng kailangan naming gawin ay magbukas ng isang asynchronous kahilingan, na kung saan ay lamang ng paggawa ng isang HTTP pangkalahatan GET kahilingan. Paggawa ng lamang ito ng programming, sa halip ng sa pamamagitan ng aming web browser. At pagkatapos ay ipadala namin na kahilingan. Kaya kung ano ang ginagawa ito baka hitsura sa konteksto? Kaya narito ang isang function na deal sa AJAX kahilingan. SIGE? At nagkataon ko na sinabi ito ay tumatanggap ng isang argumento. At ito ang isang uri ng isang pangkalahatang balangkas dito. Sa pinakasimula, makakakuha tayo ang ating mga sarili ng isang bagong XMLHttpRequest object. Pagkatapos, kailangan ko upang i-set ang onreadystatechange uugali. At kaya ako pagpunta sa sabihin kapag ang mga pagbabago readyState, Gusto ko sa iyo na tawagan ang function na ito. 

Na kung saan ay pagpunta sa hilingin sa mga pinag-uusapan, kung ang readyState ay 4, kung ang readyState ay nagbago upang maging 4, at ang katayuan ay 200, kaya nagkaroon kami ng isang matagumpay na kahilingan, ako nais na gawin ang isang bagay sa pahina. At kami ay kumuha ng isang pagtingin ang isang halimbawa ng kung ano ang na ang isang bagay ay maaaring maging sa isang segundo. Kaya nga, ngayon ay may tinukoy na ko aking anonymous na function, aking tugon function na sa tuwing ang readyState pagbabago. 

Kaya nga kailangan ko lang upang buksan ang isang humiling, gamit ang paraan Open. At pagkatapos, ipadala ko na hiling. At tumagal ng isang pagtingin sa ipaalam ng isang mas tiyak na halimbawa ng kung ano ang maaaring gawin ng AJAX sa aming web pahina. Kaya mayroon ako para sa isang napaka-simple pahina na tinatawag home.html. At Mayroon akong napupunta ang isang impormasyon here at ilang uri drop-down menu ng. 

At kami ay muling bisitahin ito sa isang segundo. Ngunit sa tingin ko dapat namin ngayon kumuha ng isang tingnan ang aktwal na source code. At ito, pupuntahan ko na magbukas ng home.html. At kami na makita kung ano ang nangyayari sa. Kaya up sa dito pinakatuktok, mayroon akong ilang mga bagay-bagay JavaScript na ang nangyayari. 

At dito, ako tila may isang div na ang ID ay infodiv, at ilang impormasyon ay pagpunta upang pumunta doon. At pagkatapos ay ako ay may form na ito. At sa loob ng mga ito form, mayroon akong isang bagay tinatawag na isang Piliin, na ay lamang ng isang drop-down na menu may isang bungkos ng iba't ibang mga pagpipilian. At tila kapag na ang mga pagbabago, kapag ang pagpipilian na ay napili ay may nagbago, ako pagpunta sa tumawag ilang mga function cs50Info, at pagkatapos ay ako pagpunta sa pumasa sa this.value, kung saan ito ay tumutukoy sa kung aling mga opsyon ay napili, at halaga ay isa sa mga ito dito, option value = katumbas walang laman, "Blumberg," "bowden," "chan," at "malan." 

Kaya kung ano ang maaaring aktwal na mangyayari dito kapag gagawin ko ito? Well, sabihin kumuha ng isang tingnan blumberg.html. Mukhang ito ay lamang ng isang snippet ng ilang Html. At sa katunayan, kung ano ang ako umaasa ang mangyayari dito ay ako pagpunta sa ma-plug ito Html direkta sa aking web page nang hindi na kinakailangang i-reload pahina, tulad na kapag Pinili ko ang Hannah mula sa drop-down menu, impormasyon tungkol sa Hannah, sa partikular, ang impormasyon na ito dito sa blumberg.html, ay kung ano ang nagpapakita up sa pahina. At hindi ko kailangang mag-refresh. At kung pinili ko ang ibang tao, ang kanilang impormasyon ay magpapakita. Paano ko gawin ito? Muli, ito ay nangangailangan ng sa amin upang gamitin ang ilang mga AJAX. At ito, makikita magbukas ajax.js. namin At dito ay na function, cs50Info. Kung ang pangalan ay wala, bumalik ako. Hindi ako pagpunta sa gawin kung ang walang laman na opsyon ay pinili. Kung hindi, ako pagpunta sa lumikha ng isang bagong XMLHttpRequest. At pagkatapos ay ako pagpunta sa sabihin, kapag ang readyState pagbabago, tawagan ang function na ito. 

At kung ang readyState ay 4 at ang katayuan ay 200, narito ang isang maliit na piraso ng jQuery sa 13 linya. Ngunit ang lahat ng ako ng paggawa ay nagsasabi, baguhin ang mga nilalaman ng infodiv na maging kahit anong Nakatanggap ako pabalik bilang tugon mula sa aking HttpRequest. 

Ano ang aking HttpRequest? Well, na karapatan dito sa line 18 at 19. Line 18, talaga Ako naghahanda isang GET kahilingan para sa pangalan + .html. At muli, pangalan dito ay ang argument na dumaan sa bilang isang parameter sa cs50Info. 

Kaya talaga, ako ay pagpasa sa isang tao pangalan, na kung saan ay na hanay ng mga pagpipilian na nakita natin sa drop-down na menu sa form. Nakakakuha ako ng pangalang iyon. At ako sinasabi Gusto ko sa iyo upang mangyaring kumuha para sa akin na file.html, at pagkatapos ay ipadala na kahilingan. 

At upang ang onreadystatechange ay pagpunta na nakikinig at naghihintay at naghihintay at naghihintay, hanggang sa readyState ay 4, at ang katayuan ay 200. Kaya ito ay handa na upang paglingkuran, at ang kahilingan ay matagumpay. At pagkatapos ay kung ito ay, ito ay pagpunta sa baguhin ang mga nilalaman ng infodiv na ang text response na nakuha ko sa likod. 

Kaya sabihin makita kung paano ito maaaring talagang gumagana. Kaya makikita namin ulo sa ibabaw sa aking browser window, at kami ay tumingin dito. Kaya sabihin kumuha ng isang pagtingin sa kung ano ang nangyayari sa dito sa AJAX. Kaya makikita namin pumili ng isang tao mula sa drop-down menu. Kaya sa kasong ito, sabihin pumili lamang ng Hannah. At pansinin na Hannah impormasyon ay nagbago, ngunit hindi ko alam kung any-- aking page ay hindi ganap na i-reload. Nanatili stuff Ang. Karamihan sa mga bagay-bagay nagtutulog. AJAX Test ay hindi baguhin. Ang pindutan ng sarili nito, ito drop-down menu ay hindi baguhin. Ngunit impormasyon doon ginawa ang pagbabago. At depende sa kung paano mabilis na gumagalaw ang aking computer, ikaw ay tunay na maaaring makita na ang mga nilalaman mawala at pagkatapos ay muling lumitaw talaga mabilis. Iyan ang nilalaman sa pagiging tinanggal mula infodiv, at pagkatapos ay pinalitan ng isang bagong asynchronous kahilingan. 

Kaya kung ililipat ang mga ito upang maging sabihin, Rob-- at muli, tingnan, at marahil kami makita sa aktwal na ito mawala at lumitaw na muli mabilis. Ang makikita mo na? Paano lang pop ito sa malayo, at pagkatapos ay refilled ito? Iyan ang AJAX kahilingan uri ng nagaganap. At kaya depende sa taong pinili ko, hindi ako paggawa ng isang iba't ibang mga asynchronous kahilingan sa isang iba't ibang mga file na mayroon akong sa aking server. At ang mga nilalaman ng aking infodiv ay pag-update, batay sa kung alin sa mga pinili ko. Kaya na talagang lahat ng may sa AJAX. Ito ay nagpapahintulot sa amin upang gumawa ng mga asynchronous kahilingan, ang mga update sa isang pahina. Nang hindi na i-refresh ang buong pahina, kami ay pagpunta upang makakuha ng bagong nilalaman mula sa mga ito sa pamamagitan ng paggawa isang bagong sariwang kahilingan sa server. At ito, ang aming mga pahina ay maaaring maging tila mas dynamic. 

At bilang namin makakuha ng mas maraming at mas advance na, ikaw Maaaring makakuha ng mga bagay tulad ng halimbawa, ang iyong email inbox, na kung saan hindi mo na kailangang gumawa ng kahit ano. Hindi mo na kailangang i-click ng isang drop-down menu o i-click ang anumang bagay, at ang lahat ng isang biglaang, ang iyong pinakabagong nagpapakita up email sa tuktok. Iyon din lamang ng isang kahilingan Ajax. Ajax ay humihiling ng iyong server, ang mga email server, upang magpadala ng higit sa lahat ng mga impormasyon tungkol sa iyong pinakabagong mga email, at pagbabago sa kung ano ang nakikita mo sa screen na ang iyong pinakabagong hanay ng mga emails. At kung mayroon kang isang bagong isa sa doon, at pagkatapos ay ang mga nilalaman ng na div ay magbabago upang sumalamin ang na-update na nilalaman. Ako Doug Lloyd. Ito ay CS50.