[Muzika] DOUG Lloyd: Pra, njÃ« mÃ« shumÃ« lloj i nocionit se lloj i bie nÃ«n ombrellÃ«n e JavaScript Ã«shtÃ« diÃ§ka qÃ« quhet AJAX. Deri nÃ« kÃ«tÃ« pikÃ«, tonÃ« ndÃ«rveprim me JavaScript ka qenÃ« i kufizuar pÃ«r tÃ« nxitur njÃ« buton dhe diÃ§ka ndodh. Dhe specifike, diÃ§ka qÃ« ndodh Ã«shtÃ« faqet tona duken dhe ndihen ndryshime. E drejtÃ«? Si nÃ« veÃ§anti nÃ« Dokumenti Modeli objekt Video, Kam ndryshuar ngjyrÃ«n e sfondit. Por, kur unÃ« e bÃ«ri atÃ«, unÃ« nuk kam pÃ«r tÃ« bÃ«rÃ« ndonjÃ« kÃ«rkesÃ« tÃ« veÃ§antÃ« shtesÃ«. UnÃ« nuk duhet tÃ« kÃ«rkojÃ« qÃ« server mÃ« dÃ«rgoni njÃ« faqe tÃ« re. UnÃ« vetÃ«m ndryshuar atÃ« qÃ« unÃ« tashmÃ« e kishte. UnÃ« nuk duhet tÃ« rifreskoni faqen time, dhe gjÃ«ra definitivisht ndryshuar, kÃ«shtu qÃ« Ã«shtÃ« e madhe. Por ka patjetÃ«r njÃ« Manuali ndÃ«rveprim pÃ«rdorues i pÃ«rfshirÃ«. AJAX Ã«shtÃ« njÃ« teknikÃ« e ftohtÃ« qÃ« ju lejon na pÃ«r tÃ« rinovuar pÃ«rmbajtjen e njÃ« faqe, dhe jo vetÃ«m tÃ« duken dhe tÃ« ndjehen tÃ«, pa reloading. 

Dhe me konkretisht kur kam thonÃ« pÃ«rditÃ«simin pÃ«rmbajtjen e njÃ« faqe, UnÃ« nuk jam duke thÃ«nÃ« qÃ« ne rishkruaj faqja duke pÃ«rdorur JavaScript. UnÃ« jam duke thÃ«nÃ« se ne fakt kÃ«rkojmÃ« mÃ« shumÃ« informata nga serveri pa faqe ynÃ« pasur nevojÃ« tÃ« ringarkoni. 

Tani qÃ« lloj i njÃ« grimÃ« njÃ« teknikÃ« mÃ« tÃ« avancuar se ne jemi duke shkuar pÃ«r tÃ« folur pÃ«r nÃ« kÃ«tÃ« video. Ne do tÃ« kemi njÃ« ndÃ«rveprim. Por, kur ne bÃ«jmÃ«, unÃ« jam do tÃ« jetÃ« bÃ«rÃ« kÃ«rkesa nÃ« web server. NÃ« kÃ«tÃ« rast, vetÃ«m atÃ« qÃ« Ã«shtÃ« drejtimin e web server Apache tim. UnÃ« jam duke shkuar pÃ«r tÃ« bÃ«rÃ« shtesÃ« kÃ«rkesa, ndÃ«rsa unÃ« jam duke vizituar njÃ« faqe web, por faqja ime nuk do tÃ« rifreskoni. 

ÃshtÃ« vetÃ«m do tÃ« asynchronously rinovuar faqen time. Dhe kjo Ã«shtÃ«, nÃ« fakt, qÃ« AJAX qÃ«ndron pÃ«r, Ã«shtÃ« Asynchronous JavaScript dhe XML. XML Ã«shtÃ« njÃ« tjetÃ«r lloj i Markup gjuhÃ«, dhe ju mund tÃ« lloj nga mendoj pÃ«r atÃ« ashtu si HTML. Kjo nuk Ã«shtÃ« krejt e njÃ«jta gjÃ«, por kjo Ã«shtÃ« nÃ« thelb vetÃ«m njÃ« gjuhÃ« markup. Pra, kjo Ã«shtÃ« njÃ« asinkron JavaScript dhe njÃ« gjuhÃ« markup. 

Pra, nÃ« mÃ«nyrÃ« qÃ« tÃ« pÃ«rdorni kÃ«tÃ« AJAX AJAX technique-- nuk Ã«shtÃ« njÃ« gjuhÃ« programimi e veÃ§antÃ«. ÃshtÃ« vetÃ«m lloj i njÃ« grup i techniques-- ne nevojÃ« pÃ«r tÃ« krijuar njÃ« tÃ« veÃ§antÃ« Objekt JavaScript, e cila quhet njÃ« XMLHttpRequest. Tani, kjo Ã«shtÃ« shumÃ« e lehtÃ« pÃ«r tÃ« bÃ«rÃ« kÃ«tÃ«. Ne vetÃ«m themi var, Ã§do gjÃ« ne duam tÃ« quajmÃ« kÃ«tÃ« objekt, Ã«shtÃ« e barabartÃ« me XMLHttpRequest re. Dhe tani ne kemi marrÃ« tani njÃ« lloj AJAX e objektit, ose njÃ« XMLHttpRequest objekt, i cili do tÃ« lejojÃ« ne tÃ« asynchronously tÃ« rinovuar faqen tonÃ«. 

Pasi ne kemi marrÃ« kÃ«tÃ« tÃ« ri objekt, kjo XMLHttpRequest, ne duhet tÃ« bÃ«jmÃ« diÃ§ka pÃ«r tÃ« tÃ« saj Sjellja onreadystatechange. Onreadystatechange Sjellja Ã«shtÃ« me tÃ« vÃ«rtetÃ« vetÃ«m kur ju bÃ«ni njÃ« kÃ«rkesÃ« nÃ« njÃ« web faqe, faqja kalon nÃ«pÃ«r njÃ« numÃ«r hapash. SÃ« pari, njÃ« kÃ«rkesÃ« nuk Ã«shtÃ« dÃ«rguar. Pastaj, kÃ«rkesa ka qenÃ« dÃ«rguar, por nuk veprohet. AtÃ«herÃ« kÃ«rkesa Ã«shtÃ« vepruar mbi tÃ«. AtÃ«herÃ« kÃ«rkesa Ã«shtÃ« duke u dÃ«rguar tek ju. 

Pastaj, kÃ«rkesa Ã«shtÃ« plotÃ«sisht e ngarkuar nÃ« faqen tuaj. KÃ«to janÃ« shtete tÃ« ndryshme. Dhe kÃ«shtu qÃ« ne kemi nevojÃ« pÃ«r tÃ« vendosur tonÃ« Objekti i ri XMLHttpRequest pÃ«r tÃ« ndryshuar kur ndryshimet gatshme shtetÃ«rore. Dhe zakonisht, ne bÃ«jmÃ« kÃ«tÃ« duke pÃ«rcaktimin e njÃ« funksion anonim, i cili ne jemi tÃ« njohur me nga JavaScript tani, qÃ« quhet kur ndryshimet gatshme shtetÃ«rore. ÃshtÃ« me tÃ« vÃ«rtetÃ« nuk Ã«shtÃ« shumÃ« mÃ« tepÃ«r se kaq. Ne jemi vetÃ«m duke shkuar pÃ«r tÃ« definuar njÃ« funksion anonim, lloj i pÃ«lqen ajo ne ishim duke bÃ«rÃ« nÃ« JavaScript, ku ne do kanÃ« njÃ« funksion anonim t'iu pÃ«rgjigjur njÃ« pÃ«r klikim, ose kur ne ishim duke bÃ«rÃ« njÃ« hartÃ« tÃ« objekte tÃ« ndryshme nÃ« njÃ« rrjet. 

DiÃ§ka ka ndodhur kur diÃ§ka Ã«shtÃ« klikuar. NÃ« kÃ«tÃ« rast, kjo Ã«shtÃ« vetÃ«m diÃ§ka Ã«shtÃ« e ndodh kur shteti e faqes tonÃ« ndryshime. Ka dy prona tÃ« tjera qÃ« janÃ« lloj of-- ata nuk janÃ« vetÃ«m pronat qÃ« janÃ« e natyrshme pÃ«r tÃ« XMLHttpRequest, por ata janÃ« ato mjaft tÃ« rÃ«ndÃ«sishme. Ka diÃ§ka tÃ« quajtur readyState, tÃ« cilat si ju ndoshta mund tÃ« mendoj, Ã«shtÃ« e lidhur me onreadystatechange. Ajo nÃ« fakt ju tregon Ã§farÃ« readyState Ã«shtÃ«. 0, 1, 2, 3, dhe 4 janÃ« mundÃ«sitÃ« atje, dhe ata lloj afÃ«rsisht korrespondojnÃ« me Ã§farÃ« UnÃ« kam qenÃ« vetÃ«m duke folur pÃ«r njÃ« tÃ« dytÃ« mÃ« parÃ«. 

Dhe pastaj statusi, i cili shpresojmÃ« se nÃ« qoftÃ« se Ã§do gjÃ« shkoi nÃ« rregull, Ã«shtÃ« 200, e cila Ã«shtÃ« e shkurtÃ«r pÃ«r, natyrisht, OK, tÃ« cilat ne jemi tÃ« njohur me nga Http. Pra, ne jemi duke shpresuar se shteti ynÃ« i gatshÃ«m Ã«shtÃ« katÃ«r, dhe statusi ynÃ« Ã«shtÃ« 200. Dhe nÃ« qoftÃ« se shtetin tonÃ« gati Ã«shtÃ« katÃ«r, dhe reagimi Ã«shtÃ« e gatshme pÃ«r tÃ« vÃ«nÃ« mbi faqe, dhe statusi Ã«shtÃ« 200, ne ishim nÃ« gjendje tÃ« bÃ«jmÃ« Ã§do gjÃ« me sukses, Tani ne mund tÃ« asynchronously tÃ« rinovuar faqen tonÃ« pa pasur nevojÃ« tÃ« rifreskoni tÃ«rÃ« pÃ«rmbajtja e saj. 

Pasi ne kemi pÃ«rcaktuar se Ã§farÃ« ndodh me sjelljen onreadystatechange, dhe ne kemi kontrolluar se readyState Ã«shtÃ« 4 dhe statusi Ã«shtÃ« 200, atÃ«herÃ« tÃ« gjithÃ« ne duhet tÃ« bÃ«jmÃ« Ã«shtÃ« hapur njÃ« asinkron kÃ«rkesÃ«, e cila Ã«shtÃ« vetÃ«m duke e bÃ«rÃ« njÃ« Http nÃ« pÃ«rgjithÃ«si tÃ« marrÃ« kÃ«rkesÃ«n. VetÃ«m duke bÃ«rÃ« atÃ« programuar, nÃ« vend tÃ« nÃ«pÃ«rmjet shfletuesit tonÃ« tÃ« internetit. Dhe pastaj kemi dÃ«rguar kÃ«tÃ« kÃ«rkesÃ«. Pra, Ã§farÃ« e bÃ«n kÃ«tÃ« ndoshta duket si nÃ« kontekst? KÃ«shtu qÃ« kÃ«tu Ã«shtÃ« njÃ« funksion qÃ« merret me kÃ«rkesa AJAX. NE RREGULL? Dhe unÃ« e kam thÃ«nÃ« nÃ« mÃ«nyrÃ« arbitrare ajo pranon njÃ« argument. Dhe kjo njÃ« lloj i njÃ« skelet i pÃ«rgjithshÃ«m kÃ«tu. NÃ« fillim, ne kemi marrÃ« vetÃ« njÃ« objekt tÃ« ri XMLHttpRequest. Pastaj, UnÃ« kam nevojÃ« pÃ«r tÃ« vendosur Sjellja onreadystatechange. Dhe kÃ«shtu qÃ« unÃ« jam duke shkuar pÃ«r tÃ« thÃ«nÃ« kur ndryshimet readyState, UnÃ« dua qÃ« ju tÃ« telefononi kÃ«tÃ« funksion. 

E cila do tÃ« pyesni pyetje, nÃ«se readyState Ã«shtÃ« 4, nÃ«se readyState ka ndryshuar tÃ« jetÃ« 4, dhe status ishte 200, kÃ«shtu qÃ« kemi pasur njÃ« kÃ«rkesÃ« tÃ« suksesshÃ«m, unÃ« duan tÃ« bÃ«jnÃ« diÃ§ka pÃ«r faqe. Dhe ne do tÃ« hedhim njÃ« vÃ«shtrim nÃ« njÃ« shembull tÃ« asaj qÃ« se diÃ§ka mund tÃ« jetÃ« nÃ« njÃ« tÃ« dytÃ«. KÃ«shtu pra, tani unÃ« kam pÃ«rcaktuar Funksioni im anonim, Funksioni im pÃ«rgjigje sa herÃ« ndryshimet readyState. 

Deri atÃ«herÃ« unÃ« vetÃ«m duhet pÃ«r tÃ« hapur njÃ« tÃ« kÃ«rkojÃ«, duke pÃ«rdorur metodÃ«n e hapur. Dhe pastaj, unÃ« po dÃ«rgoj kÃ«tÃ« kÃ«rkesÃ«. Dhe le tÃ« marrin njÃ« vÃ«shtrim nÃ« njÃ« shembull mÃ« konkret e Ã§farÃ« AJAX mund tÃ« bÃ«jÃ« nÃ« faqet tona tÃ« internetit. KÃ«shtu qÃ« unÃ« kam kÃ«tu njÃ« shumÃ« e thjeshtÃ« faqe quajtur home.html. Dhe unÃ« kam marrÃ« njÃ« informacion i shkon kÃ«tu dhe disa lloj drop-down menu. 

Dhe ne do tÃ« rishqyrtojnÃ« kÃ«tÃ« nÃ« njÃ« tÃ« dytÃ«. Por, unÃ« mendoj se ne tani duhet tÃ« marrÃ« njÃ« shikoni nÃ« kodin burimor aktuale. Dhe kÃ«shtu, unÃ« jam duke shkuar pÃ«r tÃ« hapur home.html. Dhe ne do tÃ« shohim se Ã§farÃ« po ndodh. Pra, deri nÃ« shumÃ« tÃ« lartÃ« kÃ«tu, unÃ« kam disa sende JavaScript qÃ« po ndodh. 

Dhe kÃ«tu, me sa duket unÃ« kam njÃ« div ID cilit Ã«shtÃ« infodiv, dhe disa informacione do tÃ« shkojÃ« atje. Dhe atÃ«herÃ« unÃ« kam kÃ«tÃ« formular. Dhe brenda kÃ«saj formÃ«, unÃ« kam diÃ§ka quajtur njÃ« Zgjidh, e cila Ã«shtÃ« vetÃ«m njÃ« drop-down menu me njÃ« bandÃ« tÃ« opcioneve tÃ« ndryshme. Dhe me sa duket kur kjo ndryshon, kur opsion qÃ« Ã«shtÃ« pÃ«rzgjedhur ka ndryshuar, unÃ« jam duke shkuar pÃ«r tÃ« thirrur disa funksion cs50Info, dhe atÃ«herÃ« unÃ« jam duke shkuar pÃ«r kalojÃ« nÃ« this.value, ku kjo i referohet cili opsion Ã«shtÃ« zgjedhur, dhe vlera Ã«shtÃ« njÃ« nga kÃ«to kÃ«tu, opsion Vlera = barabartÃ« bosh, "Blumberg" "Bowden," "chan," dhe "Malan." 

Pra, Ã§farÃ« mund tÃ« vÃ«rtetÃ« ndodh kÃ«tu kur unÃ« bÃ«j kÃ«tÃ«? E pra, le tÃ« marrin njÃ« shikoni nÃ« blumberg.html. Duket sikur kjo Ã«shtÃ« vetÃ«m njÃ« copÃ« e disa HTML. Dhe nÃ« fakt, Ã§farÃ« unÃ« jam duke shpresuar do tÃ« ndodhÃ« kÃ«tu po unÃ« jam do tÃ« jetÃ« nÃ« gjendje pÃ«r tÃ« plug kjo Html direkt nÃ« web faqen time pa pasur nevojÃ« tÃ« rifreskoni faqe, e tillÃ« qÃ«, kur UnÃ« zgjedh AnÃ«n nga drop-down menu, informacion nÃ« lidhje me Hannah, nÃ« veÃ§anti, ky informacion kÃ«tu nÃ« blumberg.html, Ã«shtÃ« ajo qÃ« tregon deri nÃ« faqen e. Dhe unÃ« nuk kam pÃ«r tÃ« rifreskuar. Dhe nÃ« qoftÃ« se unÃ« zgjodha dikÃ« tjetÃ«r, informatat e tyre do tÃ« shfaqen. Si mund ta bÃ«j kÃ«tÃ«? PÃ«rsÃ«ri, kjo kÃ«rkon qÃ« ne tÃ« pÃ«rdorim disa AJAX. Dhe kÃ«shtu, ne do tÃ« hapur deri ajax.js. Dhe kÃ«tu Ã«shtÃ« se funksioni, cs50Info. NÃ«se emri Ã«shtÃ« asgjÃ«, unÃ« tÃ« kthehet. UnÃ« nuk jam duke shkuar pÃ«r tÃ« bÃ«rÃ« asgjÃ« nÃ«se opsioni bosh Ã«shtÃ« zgjedhur. PÃ«rndryshe, unÃ« jam duke shkuar pÃ«r tÃ« krijojÃ« njÃ« XMLHttpRequest re. Dhe atÃ«herÃ« unÃ« jam duke shkuar pÃ«r tÃ« thÃ«nÃ«, kur Ndryshimet readyState, e quajmÃ« kÃ«tÃ« funksion. 

Dhe nÃ« qoftÃ« se Ã«shtÃ« readyState 4 dhe statusi Ã«shtÃ« 200, kÃ«tu Ã«shtÃ« pak i jQuery on line 13. Por tÃ« gjitha unÃ« jam duke bÃ«rÃ« Ã«shtÃ« duke thÃ«nÃ«: tÃ« ndryshojÃ« pÃ«rmbajtjen e infodiv tÃ« jetÃ« Ã§do gjÃ« qÃ« kam marrÃ« pÃ«rsÃ«ri si njÃ« PÃ«rgjigja nga HttpRequest tim. 

ÃfarÃ« Ã«shtÃ« HttpRequest ime? E pra, kjo Ã«shtÃ« e drejtÃ« kÃ«tu on line 18 dhe 19. Line 18, unÃ« jam nÃ« thelb duke u pÃ«rgatitur njÃ« MERRNI kÃ«rkesÃ«s pÃ«r emrin + .html. Dhe pÃ«rsÃ«ri, emri kÃ«tu Ã«shtÃ« argumenti se ishte kaloi nÃ« si njÃ« parametÃ«r pÃ«r cs50Info. 

Pra, nÃ« thelb, unÃ« jam duke kaluar nÃ« dikush e emrin, e cila ishte ajo grup opcionesh qÃ« pamÃ« nÃ« drop-down menu nÃ« formÃ«. UnÃ« jam marrÃ« kÃ«tÃ« emÃ«r. Dhe unÃ« jam duke thÃ«nÃ« se unÃ« do tÃ« doja qÃ« ju tÃ« ju lutem tÃ« marrÃ« pÃ«r mua qÃ« file.html, dhe pastaj dÃ«rgojnÃ« atÃ« kÃ«rkesÃ«. 

Dhe kÃ«shtu qÃ« onreadystatechange po shkon tÃ« jetÃ« i dÃ«gjuar dhe duke pritur dhe duke pritur dhe duke pritur, derisa readyState Ã«shtÃ« 4, dhe gjendja eshte 200. Pra, kjo Ã«shtÃ« gati pÃ«r t'u shÃ«rbyer, dhe kÃ«rkesa ishte i suksesshÃ«m. Dhe pastaj nÃ« qoftÃ« se ajo Ã«shtÃ«, ajo do tÃ« tÃ« ndryshojÃ« pÃ«rmbajtjen e infodiv tÃ« jetÃ« teksti pÃ«rgjigja qÃ« kam marrÃ« prapa. 

Pra, le tÃ« shohim se si kjo nÃ« fakt mund tÃ« punojnÃ«. Pra, ne do tÃ« shkojnÃ« mbi tÃ« shfletuesin tim dritare, dhe ne do tÃ« shohim kÃ«tu. Pra, le tÃ« marrin njÃ« vÃ«shtrim nÃ« Ã§farÃ« po ndodh kÃ«tu nÃ« AJAX. Pra, ne do tÃ« zgjedhin dikÃ« nga drop-down menu. Pra, nÃ« kÃ«tÃ« rast, le tÃ« vetÃ«m tÃ« zgjidhni AnÃ«n. Dhe vini re se Ana e informacioni ka ndryshuar, por unÃ« nuk kam any-- tim faqe nuk ringarkoni tÃ«rÃ«sisht. Sende qÃ«ndroi. Shumica e gjÃ«ra qÃ«ndruan. AJAX Test nuk ka ndryshuar. Button vetÃ«, kjo drop-down menu nuk ka ndryshuar. Por, informacioni nuk ka ndryshuar. Dhe nÃ« varÃ«si se si shpejt lÃ«viz My Computer, ju nÃ« fakt mund tÃ« shihni se pÃ«rmbajtjen zhduket dhe pastaj rishfaqet me tÃ« vÃ«rtetÃ« shpejt. Kjo Ã«shtÃ« pÃ«rmbajtja e tÃ« qenit fshihet nga infodiv, dhe pastaj zÃ«vendÃ«sohet me njÃ« kÃ«rkesÃ« e re pÃ«r asinkron. 

Pra, nÃ«se unÃ« kaloni atÃ« pÃ«r t'u thÃ«nÃ«, Rob-- dhe pÃ«rsÃ«ri, tÃ« marrÃ« njÃ« sy, dhe ndoshta ne do tÃ« shohim atÃ« nÃ« fakt zhduken dhe rishfaqen shpejt. Ju shihni se? Si ajo vetÃ«m popped larg, dhe pastaj ajo rimbushet? Kjo Ã«shtÃ« kÃ«rkesa AJAX lloj duke u zhvilluar. Dhe kÃ«shtu nÃ« varÃ«si tÃ« Personi unÃ« zgjedh, unÃ« jam duke bÃ«rÃ« njÃ« Asynchronous ndryshme KÃ«rkesa pÃ«r njÃ« skedar tÃ« ndryshÃ«m qÃ« unÃ« kam nÃ« serverin tim. Dhe pÃ«rmbajtjen e mia infodiv janÃ« pÃ«rditÃ«simin, bazuar nÃ« tÃ« cilÃ«n nga kÃ«to unÃ« kam zgjedhur. Pra, kjo Ã«shtÃ« me tÃ« vÃ«rtetÃ« e gjitha nuk Ã«shtÃ« pÃ«r AJAX. Kjo na lejon pÃ«r tÃ« bÃ«rÃ« kÃ«to Asynchronous kÃ«rkesa, pÃ«rditÃ«simet nÃ« njÃ« faqe. Pa pasur nevojÃ« tÃ« rifreskoni faqe tÃ« tÃ«rÃ«, ne jemi duke shkuar pÃ«r tÃ« marrÃ« tÃ« reja PÃ«rmbajtja nga ajo duke e bÃ«rÃ« njÃ« kÃ«rkesÃ« e re tÃ« freskÃ«t nÃ« server. Dhe kÃ«shtu, faqet tona mund tÃ« bÃ«hen mjaft pak mÃ« dinamike. 

Dhe si ne tÃ« merrni mÃ« shumÃ« dhe mÃ« tÃ« avancuar, ju mund tÃ« merrni gjÃ«ra tÃ« tilla si tÃ« themi, e-mail kutinÃ« tuaj, ku ju nuk keni tÃ« bÃ«ni asgjÃ«. Ju nuk duhet tÃ« klikoni njÃ« drop-down menu apo klikoni ndonjÃ« gjÃ«, dhe tÃ« gjithÃ« njÃ« e papritur, mÃ« i ri tuaj Albumi i tregon deri nÃ« krye. Kjo Ã«shtÃ« gjithashtu vetÃ«m njÃ« kÃ«rkesÃ« Ajax. Ajax po kÃ«rkon tuaj server, server-mail, tÃ« dÃ«rgojÃ« mbi tÃ« gjithÃ« informacionin e pÃ«r emailet tuaj tÃ« fundit, dhe ndryshimin e asaj qÃ« ju shihni nÃ« Ekran tÃ« jetÃ« vendosur tuaj e-mail mÃ« i ri. Dhe nÃ« qoftÃ« se ju keni njÃ« tÃ« ri nÃ« atje, atÃ«herÃ« pÃ«rmbajtja e kÃ«saj div do tÃ« ndryshojÃ« pÃ«r tÃ« pasqyruar pÃ«rmbajtja updated. UnÃ« jam Doug Lloyd. Kjo Ã«shtÃ« CS50.