[CHWARAE CERDDORIAETH] DOUG LLOYD: Felly un yn fwy fath o syniad bod fath o yn dod o dan ymbarél JavaScript yn rhywbeth o'r enw AJAX. Hyd at y pwynt hwn, mae ein rhyngweithio gyda JavaScript wedi bod yn gyfyngedig i wthio botwm a rhywbeth yn digwydd. Ac yn benodol, y rhywbeth sy'n digwydd yw ein gwefannau yn edrych ac yn teimlo newidiadau. Iawn? Fel yn arbennig, yn y Dogfen enghreifftiol gwrthrych fideo, Yr wyf yn newid y lliw cefndir. Ond pan wnes i hynny, doedd gen i ddim i wneud unrhyw geisiadau ychwanegol arbennig. Nid oedd rhaid i mi ofyn i y gweinydd yn anfon tudalen newydd i mi. Fi jyst yn newid yr hyn yr wyf eisoes. Nid oedd rhaid i mi ail-lwytho fy nhudalen, a phethau yn bendant wedi newid, felly mae hynny'n wych. Ond mae bendant rhai ryngweithio defnyddiwr llaw dan sylw. AJAX yn dechneg oer sy'n caniatáu ni i ddiweddaru cynnwys tudalen ar, ac nid dim ond y golwg a teimlo, heb ail-lwytho. 

Ac erbyn yn benodol pan fyddaf dweud diweddaru cynnwys tudalen yn, Dydw i ddim yn dweud ein bod ailysgrifennu y dudalen gan ddefnyddio JavaScript. I ddim yn dweud ein bod mewn gwirionedd yn gofyn am rhagor o wybodaeth gan y gweinydd heb ein tudalen orfod ail-lwytho. 

Nawr y math yna o ychydig o techneg mwy datblygedig ein bod ni'n mynd i siarad am yn y fideo hwn. Rydym yn mynd i gael rhywfaint o ryngweithio. Ond pan rydym yn ei wneud, dw i'n mynd i fod yn gwneud ceisiadau i'r gweinydd gwe. Yn yr achos hwn, dim ond yr hyn sydd rhedeg fy gweinyddwr gwe Apache. Rydw i'n mynd i fod yn gwneud ychwanegol ceisiadau tra fy mod yn ymweld â dudalen we, ond ni fydd fy dudalen adnewyddu. 

Dim ond ei fod yn mynd i asynchronously diweddaru fy dudalen. A dyna, mewn gwirionedd, sy'n AJAX yn sefyll am, yw Asynchronous JavaScript ac XML. XML yn fath arall o markup iaith, a gallwch ddatrys o feddwl am y peth yn union fel HTML. Dyw hi ddim yn hollol yr un peth, ond 'i' y bôn yn unig yn iaith markup. Felly ei fod yn asynchronous JavaScript ac iaith markup. 

Felly, er mwyn defnyddio hyn AJAX technique-- AJAX Nid yn iaith raglennu ar wahân. 'I' jyst fath o set o techniques-- ydym Mae angen i greu arbennig Gwrthrych JavaScript, a oedd yn gelwir yn XMLHttpRequest. Yn awr, mae'n hawdd iawn i wneud hyn. Rydym yn unig yn dweud var, beth bynnag rydym am i alw gwrthrych hwn, yn hafal i XMLHttpRequest newydd. Ac yn awr rydym yn awr wedi cael yn fath AJAX o gwrthrych, neu XMLHttpRequest gwrthrych, a fydd yn caniatáu ni asynchronously diweddaru ein tudalen. 

Ar ôl i ni wedi gotten hwn newydd gwrthrych, XMLHttpRequest hwn, mae'n rhaid i ni wneud rhywbeth i'w ymddygiad onreadystatechange. Onreadystatechange ymddygiad yn wir yn unig pan fyddwch yn gwneud cais i dudalen ar y we, mae'r dudalen yn mynd trwy nifer o gamau. Yn gyntaf, nid yw cais wedi cael ei anfon. Yna, mae'r cais wedi bod anfon, ond nid y gweithredir arnynt. Yna y cais wedi cael ei gweithredu. Yna y cais yn yn cael eu hanfon yn ôl atoch. 

Yna, mae'r cais yn llwytho yn llawn yn eich tudalen. Mae'r rheini'n wahanol wladwriaethau. Ac felly mae angen i ni osod ein gwrthrych XMLHttpRequest newydd i newid pan fydd y newidiadau yn barod wladwriaeth. Ac fel arfer, rydym yn gwneud hyn drwy ddiffinio swyddogaeth dienw, a oedd yn rydym yn gyfarwydd â oddi JavaScript yn awr, sy'n gelwir pan fydd y newidiadau yn barod wladwriaeth. Mae'n wir nad yw llawer mwy na hynny. Rydym yn jyst yn mynd i fod yn diffinio swyddogaeth dienw, rhyw fath o hoffi beth rydym yn ei wneud yn JavaScript, lle byddem rhaid swyddogaeth dienw ymateb i ar clic, neu pan oeddem yn gwneud map o y gwahanol wrthrychau yn arae. 

Digwyddodd rhywbeth pan rhywbeth yn cael ei glicio. Yn yr achos hwn, dim ond rhywbeth yn yn digwydd pan fydd y cyflwr ein dudalen newidiadau. Mae dau eiddo arall sy'n cael eu didoli o- nid ydynt yn yr unig eiddo sydd gynhenid ​​i XMLHttpRequest, ond maent yn rhai 'n bert bwysig. Mae rhywbeth o'r enw readyState, sydd, fel mae'n debyg y gallwch ddyfalu, yn gysylltiedig â onreadystatechange. Mae'n mewn gwirionedd yn dweud wrthych yr hyn y mae'r readyState yw. 0, 1, 2, 3, a 4 yn y posibiliadau yno, ac maent yn fath o fras yn cyfateb i'r hyn Roeddwn i'n jyst siarad am eiliad yn ôl. 

Ac yna statws, a oedd yn gobeithio, os bydd popeth yn mynd yn iawn, yw 200, sydd yn fyr er, wrth gwrs, OK, yr ydym yn gyfarwydd â oddi Http. Felly rydym yn gobeithio y bydd ein cyflwr parod yn bedwar, ac mae ein statws yn 200. Ac os yw ein cyflwr parod yw pedwar, a'r ymateb yn barod i gael ei roi ar y dudalen, ac mae'r statws yn 200, roeddem yn gallu ei wneud popeth yn llwyddiannus, yn awr y gallwn asynchronously diweddaru ein tudalen heb orfod ail-lwytho holl gynnwys ohono. 

Ar ôl i ni wedi diffinio'r hyn sy'n digwydd at yr ymddygiad onreadystatechange, ac yr ydym wedi gwirio bod readyState yw 4 a statws yn 200, yna i gyd mae angen i ni ei wneud yw agor yn asynchronous cais, sy'n cael ei dim ond gwneud mae Http yn gyffredinol yn GET cais. Dim ond yn ei wneud yn programmatically, yn hytrach na thrwy ein porwr gwe. Ac yna byddwn yn anfon y cais hwnnw. Felly beth mae hyn efallai edrych yn y cyd-destun? Felly dyma swyddogaeth sy'n yn ymdrin â cheisiadau AJAX. IAWN? Ac yr wyf wedi dweud yn fympwyol mae'n derbyn dadl. Ac mae hyn yn fath o sgerbwd cyffredinol yma. Ar y cychwyn cyntaf, rydym yn cael ein hunain gwrthrych XMLHttpRequest newydd. Yna, mae angen imi osod y ymddygiad onreadystatechange. Ac felly yr wyf i'n mynd i ddweud pan fydd y newidiadau readyState, Rwyf am i chi i alw swyddogaeth hon. 

Sydd yn mynd i ofyn i'r cwestiwn, os yw'r readyState yw 4, os yw'r readyState wedi newid i fod yn 4, ac mae'r statws yn 200, felly cawsom gais llwyddiannus, yr wyf yn eisiau gwneud rhywbeth i'r dudalen. A byddwn yn cymryd golwg yn enghraifft o'r hyn Efallai bod rhywbeth fod mewn eiliad. Felly, yna, yn awr yr wyf wedi diffinio fy swyddogaeth dienw, fy swyddogaeth ymateb pryd bynnag newidiadau readyState. 

Felly, yna dim ond angen i mi agor wneud cais, gan ddefnyddio'r dull Agored. Ac yna, yr wyf yn anfon y cais hwnnw. A gadewch i ni edrych ar enghraifft mwy pendant o'r hyn y gall ei wneud AJAX ar ein tudalennau gwe. Felly, yr wyf wedi yma yn syml iawn dudalen o'r enw home.html. Ac mae gen i wybodaeth yn mynd yma a rhyw fath o gwymplen. 

A byddwn yn ailedrych ar hyn mewn un eiliad. Ond rwy'n credu y dylem yn awr gymryd edrych ar y cod ffynhonnell gwirioneddol. Ac felly, yr wyf i'n mynd i agor home.html. A gawn ni weld beth sy'n mynd ymlaen. Felly, i fyny ar yr union top yma, mae gen i rhai pethau JavaScript sy'n digwydd. 

Ac yma, yr wyf yn ôl pob golwg yn cael mae div y mae ei adnabod yn infodiv, a rhywfaint o wybodaeth yn mynd i fynd yno. Ac yna mae gen i ffurflen hon. Ac y tu mewn o hyn ffurf, gen i rywbeth a elwir yn Dethol, a oedd yn yn unig yw cwymplen gyda chriw o opsiynau gwahanol. Ac i bob golwg phan hynny yn newid, pan fydd yr opsiwn sydd wedi cael ei ddewis gan newid, dw i'n mynd i alw rhyw swyddogaeth cs50Info, ac yna dwi'n mynd i pasio yn this.value, lle mae hyn yn cyfeirio at pa opsiwn ei ddewis, a gwerth yn un o'r rhain fan hyn, y dewis Gwerth = hafal wag, "Blumberg," "Bowden," "chan," a "Malan." 

Felly beth allai mewn gwirionedd digwydd yma pan fyddaf yn gwneud hyn? Wel, gadewch i ni edrych ar blumberg.html. Edrych fel mai dim ond snippet o rai Html. Ac yn wir, yr hyn yr wyf i'n gobeithio yn mynd i ddigwydd yma yw fy mod i'n mynd i fod yn gallu plwg Html hwn yn uniongyrchol i mewn i fy tudalen ar y we heb orfod ail-lwytho y dudalen, fel bod pan fydd Rwy'n dewis Hannah o'r galw-i-lawr bwydlen, gwybodaeth am Hannah, yn benodol, mae'r wybodaeth hon yma yn blumberg.html, yw'r hyn yn dangos i fyny ar y dudalen. A does dim rhaid i mi adnewyddu. Ac os Dewisais rhywun arall, byddai eu gwybodaeth arddangos i fyny. Sut ydw i'n gwneud hyn? Unwaith eto, mae hyn yn gofyn ni ddefnyddio rhai AJAX. Ac felly, byddwn yn agor ajax.js. A dyma yw swyddogaeth honno, cs50Info. Os enw i yw unrhyw beth, yr wyf yn dychwelyd. Dydw i ddim yn mynd i wneud unrhyw beth os yr opsiwn gwag wedi cael ei ddewis. Fel arall, yr wyf i'n mynd i creu XMLHttpRequest newydd. Ac yna dwi'n mynd i ddweud, pan fydd y newidiadau readyState, ffoniwch swyddogaeth hon. 

Ac os y readyState yn 4 a statws yn 200, dyma ychydig bach o jQuery ar linell 13. Ond yr holl rwy'n ei wneud yn ei ddweud, newid cynnwys infodiv i fod beth bynnag yr wyf got yn ôl fel ymateb gan fy HttpRequest. 

Beth yw fy HttpRequest? Wel, sy'n iawn yma ar y llinell 18 ac 19. Llinell 18, Im 'yn paratoi y bôn a GET cais am enw + html. Ac eto, enw yma yw y ddadl a oedd yn basiwyd yn fel baramedr i cs50Info. 

Felly y bôn, yr wyf yn pasio yn rhywun enw, sef bod set o ddewisiadau ein bod yn gweld yn y cwymplen yn y ffurflen. Im 'yn cael y enw. Ac yr wyf ddim yn dweud Hoffwn i chi i os gwelwch yn dda cael i mi y file.html, ac wedyn anfon y cais hwnnw. 

Ac fel y onreadystatechange yn mynd o fod yn gwrando ac yn aros ac yn aros ac yn aros, hyd nes y readyState yw 4, ac mae'r statws yn 200. Felly mae'n barod i gael ei weini, a'r cais yn llwyddiannus. Ac yna os yw, mae'n mynd i newid cynnwys infodiv i fod yn destun ymateb yr wyf yn mynd yn ôl. 

Felly, gadewch i ni weld sut mae hyn yn Gallai gweithio mewn gwirionedd. Felly, byddwn yn ben ar at fy porwr ffenestr, a byddwn yn edrych yma. Felly, gadewch i ni edrych ar beth sy'n digwydd yma yn AJAX. Felly byddwn yn dewis rhywun o'r gwymplen. Felly, yn yr achos hwn, gadewch i ni jyst dewis Hannah. A rhybudd bod Hannah gwybodaeth wedi newid, ond nid oedd gan any-- i mi fy Nid dudalen yn ail-lwytho yn gyfan gwbl. Arhosodd y stwff. Mae'r rhan fwyaf o'r stwff yn aros. Nid oedd Prawf AJAX yn newid. Mae'r botwm ei hun, mae hyn yn cwymplen nid oedd yn newid. Ond mae gwybodaeth yno y gwnaeth newid. Ac yn dibynnu ar sut y yn gyflym yn symud fy chyfrifiadur, chi mewn gwirionedd efallai y gwelwch bod y cynnwys yn diflannu ac wedyn yn ailymddangos mewn gwirionedd yn gyflym. Dyna y cynnwys yn cael dileu o infodiv, ac yna disodli gan cais asynchronous newydd. 

Felly os wyf yn newid iddo gael ei ddweud, Rob-- ac unwaith eto, edrychwch, ac efallai y byddwn yn gweld ei fod mewn gwirionedd diflannu ac ailymddangos yn gyflym. Byddwch yn gweld hynny? Sut i jyst popped i ffwrdd, ac yna mae'n ail-lenwi? Dyna y cais AJAX math o gymryd lle. Ac felly yn dibynnu ar y person i'n dewis, rwy'n gwneud asynchronous gwahanol cais i ffeil wahanol sydd gennyf ar fy gweinyddwr. A chynnwys fy infodiv yn diweddaru, yn seiliedig ar pa un o'r rhain dwi wedi dewis. Felly dyna mewn gwirionedd popeth sydd i'w AJAX. Mae'n caniatáu i ni wneud asynchronous hyn ceisiadau, diweddariadau i'r dudalen. Heb orfod adnewyddu'r dudalen gyfan, rydym yn mynd i gael newydd cynnwys ohono drwy wneud cais ffres newydd i'r gweinydd. Ac felly, gall ein tudalennau ddod gryn dipyn yn fwy deinamig. 

Ac wrth i ni fynd yn fwy ac yn fwy datblygedig, byddwch yn Gallai cael pethau fel dyweder, eich mewnflwch e-bost, lle nad oes rhaid i chi wneud unrhyw beth. Nid oes rhaid i chi glicio ar cwymplen neu cliciwch unrhyw beth, ac yn sydyn, eich mwyaf newydd e-bost yn dangos i fyny ar y brig. Dyna dim ond cais Ajax hefyd. Ajax yn gofyn am eich gweinydd, mae'r gweinydd e-bost, i anfon dros yr holl wybodaeth am eich negeseuon e-bost diweddaraf, a newid yr hyn a welwch ar y sgrîn i fod yn eich set diweddaraf o negeseuon e-bost. Ac os oes gennych un newydd yn yno, yna cynnwys y div Bydd newid i adlewyrchu y cynnwys diweddaru. Rwy'n Doug Lloyd. Mae hyn yn CS50.