[MUZIKO Ludante] DOUG LLOYD: Do unu pli ia nocio ke ia falas sub la ombrelo de JavaScript estas iu nomita AJAX. Supren ĝis tiu punkto, nia interago kun JavaScript estis limigita puŝi butono kaj io okazas. Kaj specife, la iu kiu okazas Estas niaj retejoj fasadon ŝanĝoj. Dekstra? Kiel en aparta, en la Document Object Model video, Mi ŝanĝis la fonkoloro. Sed kiam mi faris tion, mi ne havis fari ajnan specialan ekstran petoj. Mi ne devis peti ke la servilo sendas al mi novan paĝon. Mi nur ŝanĝis kion mi jam havis. Mi ne devis reŝarĝi mia paĝo, Kaj aferoj definitive ŝanĝis, do tio estas granda. Sed estas sendube kelkaj manlibro uzanto interago implikita. AJAX estas malvarmeta tekniko kiu permesas nin ĝisdatigi paĝo enhavo, kaj ne nur la aspekto kaj senti, sen reŝargi. 

Kaj per specife kiam mi diru ĝisdatiganta paĝo enhavo, Mi ne diras ni reverkas la paĝon uzante JavaScript. Mi dirante ni fakte petos pliaj informoj de la servilo sen nia paĝo devi reŝargi. 

Nun tian pecon da pli progresinta tekniko ke ni tuj paroli pri en tiu video. Ni tuj havos iuj interago. Sed kiam ni fari, mi tuj esti farante petoj al la retservilo. En tiu kazo, nur kio estas kurado mia Apache retservilo. Mi tuj konvinkos aldonaj petoj dum Mi vizitas retpaĝon, sed mia paĝo ne fortigu. 

Ĝi simple tuj nesamtempe ĝisdatigi mian paĝon. Kaj tio estas, fakte, kiu AJAX signifas, estas Asynchronous JavaScript kaj XML. XML estas alia speco de markado lingvo, kaj vi povas ordigi de pensi pri ĝi nur kiel HTML. Ĝi ne estas sufiĉe la sama afero, sed ĝi estas esence nur markado lingvo. Do ĝi estas nesinkrona JavaScript kaj markado lingvo. 

Do, por uzi ĉi AJAX technique-- AJAX estas ne aparta programlingvo. Estas nur speco de aro de techniques-- ni bezonas krei specialajn JavaScript objekto, kiu nomiĝas XMLHttpRequest. Nun, estas tre facila fari tion. Ni simple diru var ajn ni volas nomi tiun objekton, egalas nova XMLHttpRequest. Kaj nun ni jam ricevis AJAX ia objekto, aŭ XMLHttpRequest objekto, kiu ebligos nin al nesamtempe ĝisdatigi nia paĝo. 

Post ni akiris ĉi nova objekto, ĉi XMLHttpRequest, ni devas fari ion por lia onreadystatechange konduto. Onreadystatechange konduto estas vere nur kiam vi fari peton al retpaĝo, la paĝo iras tra kelkaj paŝoj. Unue, peto ne estis sendita. Tiam, la peto estis sendis, sed ne agis sur. Tiam la peto estis agita sur. Tiam la peto estas esti sendita reen al vi. 

Tiam, la peto estas plene ŝarĝitaj en vian paĝon. Tiuj estas malsamaj ŝtatoj. Kaj tial ni devas agordi nian nova XMLHttpRequest objekto ŝanĝi kiam la preta stato ŝanĝojn. Kaj tipe, ni faru tion difinanta anonima funkcio, kiun ni estas familiara kun el Ĝavoskripto nun, ke nomata kiam la preta stato ŝanĝojn. Estas vere ne multe pli ol tio. Ni nur tuj estos difinanta anonima funkcio, ia kiel kion ni faris en Ĝavoskripto, kie ni volus havi anoniman funkcion respondi al sur klako aŭ kiam ni faris mapon de la ajxojn en tabelo. 

Io okazis kiam io klakis. En tiu kazo, estas nur io estas okazanta kiam la stato de nia paĝo ŝanĝoj. Estas du aliaj propraĵoj kiuj ia of-- ili ne estas la sola propraĵoj kiuj estas propraj al XMLHttpRequest, sed ili estas belaj gravaj. Estas io nomita readyState, kiu kiel vi verŝajne povas diveni, estas rilatigita onreadystatechange. Ĝi efektive diras vin kion la readyState estas. 0, 1, 2, 3, kaj 4 estas la eblecoj tie, kaj ili ia krude respondas al kio Mi nur parolas pri dua antaŭ. 

Kaj tiam statuso, kiuj espereble se ĉio iris bone, estas 200, kiu estas mallonga cxar, kompreneble, okej, kiu ni estas konataj kun de HTTP. Do ni esperas ke nia preta stato estas kvar, kaj nia statuso estas 200. Kaj se nia preta stato estas kvar, kaj la respondo estas lerta por esti metita sur la paĝo, kaj la statuso estas 200, ni povis fari ĉio sukcese, Nun ni povas nesamtempe ĝisdatigi nian paĝon sen devi reŝargi la tutan enhavon de ĝi. 

Post ni difinis kio okazas al la onreadystatechange konduto, kaj ni kontrolis ke readyState estas 4 kaj statuso estas 200, tiam ĉiuj ni devas fari estas malfermu asíncrona peton, kiu estas nur faranta HTTP ĝenerale GET peton. Nur faranta ĝin programmatically, anstataŭ per nia retumilo. Kaj poste ni sendu tiun peton. Do kio faras tiun eble similas en kunteksto? Do jen funkcio kiu traktas AJAX petoj. BONE? Kaj mi arbitre diris akceptas argumenton. Kaj tiu speco de ĝenerala skeleto tie. Je la komenco, ni preni nin nova XMLHttpRequest objekto. Tiam mi devas agordi la onreadystatechange konduto. Kaj tiel mi tuj diru kiam la readyState ŝanĝoj, Mi volas ke vi nomas tiun funkcion. 

Kiu iras demandi la demandon, se la readyState estas 4, se la readyState ŝanĝiĝis esti 4, kaj la statuso estis 200, do ni havis sukcesan peto, mi volas fari ion por la paĝo. Kaj ni rigardu ekzemplon de kio ke io povus esti en dua. Tial, nun mi difinis miaj anonima funkcio, mia respondo funkcio whenever la readyState ŝanĝoj. 

Do tiam mi devas nur malfermi peti, uzante la Malferma metodo. Kaj poste, mi sendas tiun peton. Kaj ni rigardu pli konkretan ekzemplon kio AJAX povas fari sur nia retpaĝoj. Do mi havas ĉi tie tre simpla paĝo nomita home.html. Kaj mi ricevis informon iras tie kaj ia falmenuo. 

Kaj ni reviziti ĉi en unu sekundo. Sed mi kredas ke ni devus nun prenas rigardu la efektiva fontkodo. Kaj tiel, mi tuj malfermos home.html. Kaj ni vidos kio okazas. Do ĉe la plejsupro tie, mi havas iuj Javascript aĵoj kiuj okazas. 

Kaj tie, mi ŝajne havas div kies ID estas infodiv, kaj iu informo tuj iru tien. Kaj tiam mi havas tiun formon. Kaj ene de tiu formon, mi havas ion nomata unuaranga, kiu estas nur falmenuo kun aro da malsamaj ebloj. Kaj ŝajne kiam tiu ŝanĝas, kiam la eblo kiu estis selektita havas ŝanĝiĝis, mi tuj vokos iu funkcio cs50Info, kaj tiam mi tuj Iam en this.value, kie tio rilatas al kiu opcio estis selektitaj, kaj valoro estas unu el tiuj ĉi, eblo valoro = egalas malplenaj, "Blumberg" "Bowden," "chan" kaj "Malan." 

Do kio povus reale okazi tie kiam mi faras tion? Nu, ni prenu rigardas blumberg.html. Aspektas kiel ĝi estas nur fragmento de iuj HTML. Kaj fakte, kion mi esperante okazos tie Estas mi tuj povos plug Ĉi HTML rekte en mian retpaĝo sen devi reŝargi la paĝo, tiel ke kiam Mi elektas Ĥana el la falmenuo menuon, informoj pri Hannah, en aparta, ĉi tiu informo tie en blumberg.html, estas kio aperas sur la paĝo. Kaj mi ne devas refreŝigi. Kaj se mi elektis iu alia, ilia informo montrus supren. Kiel mi faru tion? Denove, tio postulas ni uzi iun AJAX. Kaj tiel, ni devos malfermi ajax.js. Kaj tie estas ke funkcio, cs50Info. Se nomo estas nenio, mi revenos. Mi ne tuj fari ion se la malplena eblo estis elektita. Alie, mi tuj krei novan XMLHttpRequest. Kaj tiam mi tuj diros, kiam la readyState ŝanĝoj, nomas tiun funkcion. 

Kaj se la readyState estas 4 kaj la statuso estas 200, jen ankaŭ iomete de jQuery sur linio 13. Sed ĉiuj mi faras estas jene: ŝanĝi la enhavon de infodiv esti kion mi reunuiĝis kiel respondon de mia HttpRequest. 

Kio estas mia HttpRequest? Nu, tio estas vera tie sur linio 18 kaj 19. Linio 18, mi esence preparante a GET peton por nomo + .html. Kaj denove, nomo ĉi tie estas la argumento kiu estis pasis en kiel parametron al cs50Info. 

Do resume, mi pasante en ies nomon, ke aro de ebloj ke ni vidis en la falmenuo en la formo. Mi ricevas tiun nomon. Kaj mi diras mi ŝatus ke vi bonvolu akiri por mi ke file.html, kaj tiam sendu tiun peton. 

Kaj por ke onreadystatechange tuj esti aŭskultante kaj atendante kaj atendante kaj atendis, ĝis la readyState estas 4, kaj la statuso estas 200. Do estas preta esti servita, kaj la peto estis sukcesa. Kaj tiam se ĝi estas, ĝi tuj ŝanĝi la enhavon de infodiv esti la respondo teksto kiun mi atingis. 

Do ni vidu kiel ĉi efektive povus labori. Do ni estrus super al mia retumilo fenestro, kaj ni povos rigardi tie. Do ni rigardu kio okazas ĉi tie en AJAX. Do ni elektas iu el la falmenuo. Do tiukaze ni simple elekti Hannah. Kaj rimarki ke Hannah informo ŝanĝis, sed mi ne havis any-- mia paĝo ne tute reŝarĝi. La aĵoj restis. Plejparto de la aĵoj restis. AJAX Test ne ŝanĝis. La butono mem, ĉi falmenuo ne ŝanĝis. Sed informo ekzistas faris ŝanĝon. Kaj dependanta sur kiel rapide mia komputilo movas, vi efektive povus vidi ke la enhavo malaperas kaj tiam reaperas vere rapide. Jen la enhavo estanta forviŝita el infodiv, kaj tiam anstataŭigita per nova nesinkrona peto. 

Do se mi ŝanĝos ĝin por esti diri, Rob-- kaj denove, rigardu, Kaj eble ni vidos ŝin reale malaperi kaj reaperi rapide. Vi vidos ke? Kiel ĝi ĵus krevita for, kaj tiam ĝi replenigis? Jen la AJAX peton ia malhelpo. Do dependanta sur la persono mi elekti, mi farante malsamaj nesinkrona peto al malsama dosiero ke mi havas sur mia servilo. Kaj la enhavon de miaj infodiv ĝisdatigas, bazita sur kiu el tiuj mi elektis. Do jen vere ĉiuj estas al AJAX. Ĝi permesas nin fari tiujn nesinkrona petoj, ĝisdatigoj al paĝo. Sen devi refreŝigi la tutan paĝon, ni tuj akiri novajn enhavo de ĝi farante nova freŝa peto al la servilo. Kaj do, niaj paĝoj povas fariĝi tre iom pli dinamika. 

Kaj kiel ni preni pli kaj pli antaŭita, vi povus akiri aferojn kiel diru, via retpoŝta inbox, kie vi ne devas fari ion. Vi ne devas klaki falmenuo aŭ klaki ion, kaj subite, via plejnove retpoŝto aperas ĉe la supro. Jen ankaŭ nur Ajax peto. Ajax petas vian servilo, la retpoŝta servilo, por sendi la tutan informon pri via lasta retpoŝtojn, kaj ŝanĝanta kion vi vidas sur la ekrano esti via plejnove aro de retpoŝtoj. Kaj se vi havas novan en tie, tiam la enhavo de tiu div ŝanĝos reflekti la ĝisdatigita enhavo. Mi Doug Lloyd. Jen CS50.