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