[Muzikos grojimo] Doug LLOYD: Taigi dar vienas rūšiuoti mintis, kad rūšiuoti patenka į skėtis JavaScript yra kažkas pavadino "AJAX". Iki šio taško, mūsų Sąveika su JavaScript buvo tik stumti mygtuką ir kažkas atsitinka. Ir konkrečiau, kažkas, kas atsitinka yra mūsų interneto svetainėse atrodyti ir jaustis pakeitimus. Teisė? Pavyzdžiui, visų pirma, į Document Object Model vaizdo, Pakeičiau fono spalvą. Bet kai aš padariau, kad aš neturėjau daryti jokių specialių papildomų prašymus. Aš neturėjau prašyti, kad serveris atsiųsti naują puslapį. Aš tiesiog pakeitė tai, ką aš jau turėjo. Aš neturėjau perkrauti mano puslapį, ir viskas tikrai pasikeitė, taip, kad puiku. Bet ten tikrai kai vadovas sąveikos su vartotoju susiję. AJAX yra kietas technika, kuri leidžia mums atnaujinti puslapio turinį, o ne tik išvaizdą ir jausti, neperkraunant. 

Ir būtent tada, kai aš sako atnaujinti puslapio turinį, Aš nesakau, mes perrašyti puslapis naudojant "JavaScript". Aš sakau mes iš tikrųjų prašyti daugiau informacijos iš serverio be mūsų puslapis turintys perkraukite puslapį. 

Dabar, kad iš tiek Rūšiuoti daugiau pažangių technika kad mes ketiname kalbėti apie šio vaizdo. Mes ketiname turėti tam tikrą sąveiką. Bet kai mes, aš ruošiuosi būti priėmimo prašymus į interneto serverį. Tokiu atveju, tiesiog tai, kas veikia mano Apache web serverį. Aš ruošiuosi būti padaryti papildomas prašymai, o aš apsilankymą tinklalapį, bet mano puslapis nebus atnaujinti. 

Tai tiesiog ketiname asinchroniškai atnaujinti savo puslapį. Ir tai, tiesą sakant, kuri AJAX reiškia, yra Asinchroninis JavaScript ir XML. XML yra kitas žymėjimo natūra kalba, ir jūs galite rūšiuoti galvoti apie tai, kaip HTML. Tai ne visai tas pats, bet tai iš esmės tik žymėjimo kalba. Taigi, tai asinchroninis JavaScript ir žymėjimo kalba. 

Taigi, kad būtų galima panaudoti šį AJAX technique-- AJAX yra ne atskiras programavimo kalba. Tai tiesiog tarsi rinkinys techniques-- mes reikia sukurti specialią JavaScript objektas, kuris vadinama XMLHttpRequest. Dabar, tai labai lengva tai padaryti. Mes tiesiog pasakyti var, nepriklausomai nuo norime paraginti šį objektą, lygus naują XMLHttpRequest. Ir dabar mes jau gauti AJAX tarsi objektą, arba XMLHttpRequest objektas, kuris leis mums asinchroniškai atnaujinti mūsų puslapyje. 

Kai mes Dotarłeś ši nauja objektas, tai XMLHttpRequest, mes turime kažką daryti, kad jos onreadystatechange elgesį. Onreadystatechange elgesys yra tikrai tik kai jums padaryti prašymą į tinklalapį, puslapis eina per žingsnių. Pirma, prašymas nebuvo išsiųstas. Tada, prašymas buvo išsiuntė, bet ne žiūrima. Tada prašymas buvo žiūrima. Tada prašymas yra siunčiamas atgal į jus. 

Tada prašymas yra pilnai pakrautas į savo puslapį. Tai yra skirtingose ​​valstybėse. Ir todėl mes turime nustatome mūsų Naujas XMLHttpRequest objektą pakeisti, kai parengties būseną pakeitimus. Ir paprastai, mes tai darome apibrėžiant anoniminį funkciją, kuri mes susipažinę su iš JavaScript dabar, kad vadinamas kai parengties būsenos pokyčius. Tai tikrai nėra daug daugiau nei tai. Užtenka tik bus apibrėžiant Anoniminis funkcija, tarsi tai, ką mes darome JavaScript kur mes būtume turi anoniminį funkciją reaguoti į paspaudimu, arba kai mes darome iš žemėlapį įvairių objektų masyvą. 

Kažkas atsitiko, kai kažkas buvo paspaudėte. Šiuo atveju, tai tik kažkas yra vyksta, kai mūsų puslapyje būsena pokyčiai. Yra du kiti savybės kurie yra rikiuoti of-- jie nėra tik savybes, kurios būdinga XMLHttpRequest, bet jie gana svarbiausi. Yra kažkas vadinamas readyState, kuri, kaip jūs tikriausiai galite atspėti, yra susiję su onreadystatechange. Jis tikrai pasakys kas readyState yra. 0, 1, 2, 3, 4, ir yra galimybės ten ir jie tarsi maždaug atitinka tą, Aš tiesiog kalbu apie antrą prieš. 

Ir tada statusas, kuris tikiuosi jei viskas vyko gerai, 200, kuris yra trumpas už, žinoma, gerai, kurį mes esate susipažinę su iš HTTP. Taigi, mes tikimės, kad mūsų valstybė pasirengusi yra keturi, o mūsų padėtis yra 200. Ir jei mūsų parengties būseną yra keturi, ir atsakymas yra pasirengusi būti skiriamas puslapis ir status, yra 200 mes galėjome padaryti viskas sėkmingai, Dabar mes galime asinchroniškai atnaujinti mūsų puslapyje nereikia perkrauti visas turinys jį. 

Po mes apibrėžti, kas atsitinka, į onreadystatechange elgesį, ir mes patikrinti, kad readyState yra 4 ir būsena 200, tada visi mes turime padaryti, tai atverti asinchroniniu prašymas, kuris yra tik priėmimo http paprastai gauti prašymą. Tiesiog daro tai programiškai, vietoj per mūsų interneto naršyklę. Ir tada mes išsiųsti šį prašymą. Taigi, ką tai gal atrodys kontekste? Taigi čia yra funkcija, kad susijęs su AJAX prašymus. GERAI? Ir aš savavališkai sakė ji pripažįsta argumentus. Ir tai iš rūšiavimo Apskritai skeletas čia. Pačioje pradžioje mes gauname patys nauja XMLHttpRequest objektą. Tada man reikia nustatyti onreadystatechange elgesį. Ir todėl aš ruošiuosi pasakyti kai readyState pokyčiai, Noriu jums skambinti šią funkciją. 

Kuris ketina paprašyti klausimas, jei readyState yra 4, jei readyState pakeitė būti 4 ir status buvo 200, todėl mes turėjome sėkmingą prašymą, aš nori kažką padaryti, kad puslapyje. Ir mes pažvelgsime bent iš pavyzdžiui, kas kad kažkas gali būti per sekundę. Taigi, dabar aš jau apibrėžta mano anoniminė funkcija, mano atsakymas funkcija, kai readyState pokyčiai. 

Taigi tada aš tiesiog reikia atverti prašyti, naudojant atviro koordinavimo metodą. Ir tada aš siunčiu šį prašymą. Ir tegul pažvelgti daugiau konkretus pavyzdys apie ką AJAX gali daryti mūsų interneto puslapiuose. Taigi aš čia labai paprastas puslapis vadinama home.html. Ir aš gavau informacija eina čia ir kai išskleidžiamajame meniu rūšiuoti. 

Ir mes iš naujo peržiūrėti šį vieną sekundę. Bet aš manau, kad mes dabar turėtų imtis pažvelgti į faktinį kodą. Ir taip, aš ruošiuosi atverti home.html. Ir mes pamatyti, kas vyksta. Taigi iki pačiame viršuje čia turiu kai Javaskriptą stuff, kad vyksta. 

Ir čia, aš, matyt, turi , div, kurio ID yra infodiv ir tam tikra informacija ketina eiti ten. Ir tada aš turiu šią formą. Ir viduje šis forma, turiu kažką vadinamas Pasirinkite, kurį yra tik išskleidžiamasis meniu su įvairių variantų krūva. Ir, matyt, kai kurie keičiasi, kai galimybė, kad buvo pasirinkta turi pasikeitė, aš ruošiuosi skambinti kai funkcija cs50Info, ir tada aš ruošiuosi praeiti this.value, jei tai reiškia, kad kuris variantas buvo pasirinktas, ir vertė yra vienas iš šių čia variantas vertė = lygu tuščias, "Blumberg" "Bowden", "chan" ir "Malan". 

Taigi, kas iš tiesų gali atsitikti čia kai aš tai padaryti? Na, tegul pažvelgti blumberg.html. Atrodo, kad tai tik fragmentą kai kurių HTML. Ir iš tiesų, ką aš tikiuosi nutiks čia yra aš ruošiuosi būti suteikta galimybė prijungti HTML tiesiai į savo tinklalapį nereikia perkrauti puslapis, toks, kad, kai Aš renkuosi Oną iš išplečiamojo sąrašo meniu, informaciją apie Hannah, Visų pirma tai informacija čia blumberg.html, yra tai, ką rodo ant puslapio. Ir aš neturiu atnaujinti. Ir jei aš pasirinkau ką nors kita, jų informacija būtų rodomas. Kaip man tai padaryti? Vėl, tai reikalauja mums naudotis kai AJAX. Ir taip, mes atverti ajax.js. Ir čia yra, kad funkcija, cs50Info. Jei vardas yra nieko, grįšiu. Nesiruošiu nieko daryti, jei tuščias variantas buvo pasirinktas. Priešingu atveju, aš ruošiuosi sukurti naują XMLHttpRequest. Ir tada aš ruošiuosi pasakyti, kai readyState pokyčiai, skambinkite šią funkciją. 

Ir jei readyState yra 4 ir statusas yra 200 čia šiek tiek JQuery on-line 13. Bet viskas, ką aš darau sako, pakeisti infodiv turinį būtų kokia aš gavau atgal kaip atsakas iš mano HttpRequest. 

Kas yra mano HttpRequest? Na, tai tiesa čia 18 ir 19 eilutėje. 18 eilutė, aš iš esmės rengia GET prašymą Pavadinimas + .html. Ir vėl, vardas čia argumentas, kad buvo priimtas kaip parametras cs50Info. 

Taigi, iš esmės, aš einančios į kažkieno pavadinimu, kuris buvo, kad parinkčių rinkinys kad matėme išplečiamasis meniu esančią formą. Gaunu šį pavadinimą. Ir aš sakau norėčiau jus Prašome gauti man, kad file.html, ir tada siųsti šį prašymą. 

Ir taip, kad onreadystatechange vyksta būti klausymo ir laukia ir laukia ir laukia, kol readyState yra 4, ir būsena 200. Taigi jis yra pasirengęs būti įteiktas, ir prašymas buvo sėkmingas. Ir tada, jei jis yra, jis ketina pakeisti infodiv turinį būti atsakymas tekstas, kad aš gavau atgal. 

Taigi pažiūrėkime, kaip tai iš tiesų gali dirbti. Taigi mes per galvą savo naršyklėje langą ir mes pažvelgti čia. Taigi leiskite pažvelgti kas vyksta čia, AJAX. Taigi mes pasirinkti ką nors iš išskleidžiamojo meniu. Taigi šiuo atveju, tegul tiesiog pasirinkti Oną. Ir pranešimas, kad Hannah s informacija pasikeitė, bet aš neturėjau any-- Mano puslapis nevisiškai perkraukite puslapį. Daiktai pasiliko. Dauguma daiktų pasiliko. AJAX testas nepakito. Pati mygtuką, šis išplečiamasis meniu nepasikeitė. Tačiau informacija yra padarė kaita. Ir, priklausomai nuo to, kaip greitai mano kompiuteris juda, jūs iš tikrųjų galite pamatyti, kad turinio dingsta ir tada vėl atsiranda tikrai greitai. Štai kiekis yra išbrauktas iš infodiv, ir tada pakeistas su Naujas asinchroninis prašymas. 

Taigi, jei aš jį įjungti reikia pasakyti, Rob-- ir vėl, pažvelgti, o gal mes jį pamatyti iš tikrųjų išnyksta ir vėl atsiranda greitai. Jūs matote, kad? Kaip jis tiesiog popped toli, ir tada ji pripildyti? Štai AJAX prašymas rūšiuoti vyksta. Ir taip priklausomai nuo žmogus pasirenka, aš priėmimo kitą asinchroninį prašymas į kitą failą kad aš turiu ant mano serveryje. Ir turinys mano infodiv yra atnaujinti, kuriais remiantis šie Aš pasirinko. Taigi tai tikrai viskas yra AJAX. Jis leidžia mums atlikti šiuos asinchroninis prašymai, atnaujinimai puslapyje. Be to, kad atnaujinti visą puslapį, mes ketiname gauti naują turinys iš jo priėmimo nauja švieži prašymas prie serverio. Ir taip, mūsų puslapiuose gali tapti gana šiek tiek labiau dinamiškas. 

Ir kaip mes gauname daugiau ir labiau pažengusios, jums gali gauti tokius dalykus kaip tarkim, jūsų elektroninio pašto dėžutę, kur jums nereikia nieko daryti. Jūs neturite spustelėkite išplečiamasis meniu arba paspauskite nieko, ir visi staiga jūsų naujausias siųsti rodo viršuje. Štai taip pat tik Ajax prašymas. "Ajax" prašo jūsų serverio, elektroninio pašto serverį, siųsti per visą informaciją apie savo naujausius laiškus, ir keisti tai, ką matote ant ekranas bus jūsų Naujausias rinkinys el. O jei turite nauju ten, tada tą div turinys pasikeis ir atspindės atnaujinta turinį. Aš Doug Lloyd. Tai CS50.