[Muusika mängib] DOUG LLOYD: Nii et üks rohkem omamoodi arusaam, et omamoodi jääb katuse alla JavaScript on midagi, mida nimetatakse AJAX. Kuni selle hetkeni, meie suhtlemist JavaScript on piiratud suruda nuppu ja midagi juhtub. Ja konkreetsemalt midagi, mis juhtub Meie veebilehed ilme ja muutusi. Õigus? Nagu eelkõige selles dokumendi objekti mudelit video, Muutsin tausta värvi. Aga kui ma tegin, et mul ei olnud teha mingeid erilisi ekstra taotlusi. Ma ei pea taotlema server saata mulle uue lehekülje. Kolisin just see, mida ma juba. Ma ei pea uuesti minu leheküljel ja asjad kindlasti muutunud, nii et on hea. Aga seal on kindlasti mõned Lae kasutaja interaktsiooni seotud. AJAX on lahe meetod, mis võimaldab meil uuendada lehe sisu, ja mitte ainult välimuse ja tunnen, ilma pealelaadimisel. 

Ja just siis, kui ma öelda ajakohastamine lehe sisu, Ma ei ütle me kirjutada lehe JavaScripti. Ma räägin me tegelikult taotlevad Lisateavet serverist ilma meie leheküljel on uuesti laadida. 

Nüüd, justkui natuke rohkem arenenud tehnikat et me ei kavatse rääkida umbes selle video. Me läheme mõned suhtlemist. Aga kui me teeme, ma lähen muutes taotlused veebiserver. Sel juhul just see, mida on töötab minu Apache veebiserver. Ma lähen täiendavate taotlusi kui ma külastate veebilehte, kuid minu leheküljel ei värskendada. 

See lihtsalt läheb asünkroonselt uuendada oma lehele. Ja see on tegelikult mis AJAX tähistab, on Asynchronous JavaScript ja XML. XML on teine ​​selline juurdehindlus keel ja saate sortida kohta ma arvan et nagu HTML. See ei ole päris sama asi, kuid see on põhimõtteliselt ainult märgistuskeel. Nii et see on asünkroonne JavaScript ja märgistuskeel. 

Nii, et kasutada seda AJAX technique-- AJAX ei ole eraldi programmeerimiskeelt. See on lihtsalt omamoodi komplekt techniques-- me on vaja luua spetsiaalne JavaScript objekti, mis nimetatakse XMLHttpRequest. Nüüd, see on väga lihtne teha. Me lihtsalt öelda var, mida iganes tahame nimetame seda objekti, võrdub uue XMLHttpRequest. Ja nüüd me oleme nüüd saanud AJAX omamoodi objekti, või XMLHttpRequest objekt, mis võimaldab meil asünkroonselt uuendada meie lehel. 

Pärast oleme saanud selle uue objekt, seda XMLHttpRequest, Me peame midagi tegema, et oma onreadystatechange käitumist. Onreadystatechange käitumine on tõesti ainult kui teete taotluse web leht, läbib mitmeid samme. Esiteks taotlus ei saadetud. Siis, kui taotlus on saatis, kuid ei tegutseta. Siis taotlusel on tegutsenud. Siis taotlus on saadetakse sulle tagasi. 

Seejärel taotlus on täielikult laetud lehel. Need on eri riikides. Ja nii on meil vaja, et määrata oma Uue XMLHttpRequest objekti muuta, kui valmis seisukord muutusi. Ja tavaliselt, me teeme seda määratlemisel anonüümne funktsioon, mis me oleme tuttavad on JavaScript nüüd, et kutsutakse välja valmis seisukord muutusi. See ei ole tõesti palju rohkem. Me lihtsalt kavatse määratlemisel anonüümne funktsioon, omamoodi nagu mida me teeme ka JavaScript kui oleksime on anonüümne funktsioon Vastata klikkimise, või kui me teeme kaart erinevate objektide massiivi. 

Midagi juhtus, kui midagi klõpsatud. Sel juhul on see lihtsalt midagi juhtub siis, kui riik meie lehel muutusi. On kaks muid omadusi mis on omamoodi of-- nad ei ole ainus omadused, mis on omane XMLHttpRequest, kuid nad on üsna olulisemad. Seal on midagi, mida nimetatakse readyState, mis nii saab ilmselt arvan, on seotud onreadystatechange. See tegelikult näitab teile mida readyState on. 0, 1, 2, 3 ja 4 on võimalusi seal, ja nad omamoodi umbes vasta sellele, mida Ma lihtsalt räägin teine ​​tagasi. 

Ja siis seisund, mis loodetavasti kui kõik läks OK, on 200, mis on lühike jaoks muidugi OK, mis me oleme tuttavad http. Nii me loodame, et meie valmis seisukord on neli ja seis on 200. Ja kui meie valmis seisukord on neli ja vastused on valmis panna leht ja staatus on 200, suutsime teha kõik edukalt, Nüüd saame asünkroonselt uuendada meie lehel ilma reload kogu sisu seda. 

Pärast oleme määratletud, mis juhtub et onreadystatechange käitumist, ja me oleme kontrollinud, et readyState on 4 ja staatus on 200, siis kõik me peame tegema, on avada asünkroonne taotluse, mis on lihtsalt tegemist HTTP üldiselt GET taotluse. Lihtsalt tee seda programmiliselt, selle asemel, et meie veebilehitsejat. Ja siis me saadame selle taotluse. Mida see võibolla nägema kontekstis? Nii et siin on funktsioon, mis tegeleb AJAX taotlusi. OKEI? Ja ma olen meelevaldselt ütles ta võtab argumendiks. Ja see omamoodi üldiselt skelett siin. Alguses, saame ise uue XMLHttpRequest objekti. Siis ma pean seada onreadystatechange käitumist. Ja nii ma ütlen kui readyState muudatusi, Ma tahan, et sa kutsuda seda funktsiooni. 

Milline saab küsida küsimus, kui readyState on 4, kui readyState on muutunud olema 4 ja status oli 200, nii et meil oli edukas taotluse, ma tahad teha midagi lehel. Ja me vaatame kell näide sellest, mida et midagi võib olla teises. Niisiis, nüüd olen määratletud minu anonüümne funktsioon, minu vastus funktsiooni, kui readyState muutusi. 

Nii ma siis lihtsalt vaja avada nõuda, kasutades avatud. Ja siis, ma saadan selle taotluse. Ja võtame pilk konkreetsem näide mida AJAX saab teha meie veebilehti. Nii et mul on siin väga lihtne leheküljel nimetatakse home.html. Ja mul on info läheb siin ja mingi rippmenüüst. 

Ja me vaadata seda üks teine. Aga ma arvan, et me peaksime nüüd vaadata lähtekoodi. Ja nii ma avada home.html. Ja me näeme, mis toimub. Nii up tipus siin, mul on mõned JavaScript asju, mis toimub. 

Ja siin, ma ilmselt ei div kelle ID on infodiv, ja mõned info läheb sinna minna. Ja siis ma pean seda vormi. Ja sees selle kujul, mul on midagi nimetatakse Select, mis on lihtsalt rippmenüüst hunnik erinevaid võimalusi. Ja ilmselt, kui see muutub, kui variant, mis on valitud on muutunud, ma lähen kutsun mõned funktsiooni cs50Info, ja siis ma lähen pass this.value, kus see viitab mis on valitud võimalus, ja väärtus on üks neist siin, võimalus väärtus = võrdub tühi, "Blumberg," "Bowden," "chan" ja "Humala." 

Mis võiks tegelikult juhtub siin, kui ma seda teen? Noh, võtame vaata blumberg.html. Paistab, et see on lihtsalt väljavõtte mõned HTML. Ja tegelikult, mida ma lootsin juhtub siin on ma lähen, et oleks võimalik ühendada Selle HTML otse minu veebileht ilma reload Lehe selline, et kui Ma valin Hannah alates rippmenüüst Menüüs infot Hannah, eelkõige seda teavet siin blumberg.html, on see, mis ilmub lehel. Ja ma ei pea värskenda. Ja kui ma valisin keegi teine, nende andmed ei näita üles. Kuidas seda teha? Jällegi, see nõuab meil kasutada mõned AJAX. Ja nii me avada ajax.js. Ja siin on see funktsioon, cs50Info. Kui nimi on midagi, ma tagasi. Ma ei kavatse midagi teha, kui tühja valik on valitud. Muidu ma lähen luua uus XMLHttpRequest. Ja siis ma lähen ütlen, kui readyState muutused, nimetame seda funktsiooni. 

Ja kui readyState on 4 ja staatus on 200, siin on natuke jQuery on line 13. Aga ma teen ütleb, muuta sisu infodiv olla mis iganes ma sain tagasi kui Vastuseks minu HttpRequest. 

Mis on minu HttpRequest? Noh, see on õige siin on line 18 ja 19. Line 18, ma põhimõtteliselt valmistada GET taotluse nimi + .html. Ja jälle, nimi siin on argument, et oli möödunud aastal, kui parameeter cs50Info. 

Ühesõnaga, ma olen läbinud kellegi Nime, mis oli kogum võimalusi et me nägime Rippmenüüst kujul. Ma saan seda nime. Ja ma väidan ma tahaksin teile Palun saada mulle, et file.html, ja siis saadab selle taotluse. 

Ja nii, et onreadystatechange läheb kuuleb ja ootab ja ootab ja ootab, kuni readyState on 4 ja staatus on 200. Nii et see on valmis kätte, ja taotluse oli edukas. Ja siis, kui ta on, siis läheb muuta sisu infodiv olla vastuseks teksti, et ma sain tagasi. 

Vaatame, kuidas see võib tegelikult töötavad. Nii me pea üle oma brauseri akna ja me vaatame siin. Võtame pilk mis toimub siin AJAX. Nii me valida keegi alates rippmenüüst. Nii et sel juhul, olgem lihtsalt valida Hannah. Ja teate, et Hannah andmed ei ole muutunud, aga ma ei ole any-- minu leheküljel ei ole täielikult laadida. Kraami jäi. Enamus asju jäi. AJAX Test ei muutunud. Nupp ise, seda rippmenüüd ei muutunud. Aga info on siiski muutus. Ja sõltuvalt sellest, kuidas kiiresti minu arvutis liigub, sa tegelikult võib näha, et sisu kaob ja siis ilmub tõesti kiiresti. See sisu on kustutada infodiv, ja seejärel asendati Uue asünkroonne taotluse. 

Nii et kui ma saan seda tuleb öelda, Rob-- ja jälle, kui heita, ja äkki näeme, et tegelikult kaovad ja taas kiiresti. Sa näed seda? Kuidas see lihtsalt hüppasid ära, ja siis uuesti täita? See on AJAX taotlus omamoodi toimub. Ja nii sõltuvalt inimene valida, ma olen tegemise teist asünkroonse taotluse teise faili et mul on minu server. Ja sisu minu infodiv uuendamas, mille alusel need olen valinud. Nii et tõesti kõik on AJAX. See võimaldab meil teha need asünkroonne taotlused, uudiseid lehel. Ilma et värskenda terve lehekülje, me ei kavatse saada uusi sisu see tehes uus värske taotluse serverile. Ja nii meie lehekülge ei saanud päris palju dünaamilisem. 

Ja kui saame rohkem ja rohkem arenenud, siis võib saada asjad ütleme, postkastist, kus sa ei pea midagi tegema. Sa ei pea klikkima rippmenüüd või vajuta midagi, ja äkki teie uusim Kirjuta ilmub ülaosas. See on ka lihtsalt Ajax taotluse. Ajax on taotlenud oma server, e-posti server, saata üle kogu teave oma viimaseid kirju, ja muutuvate mida näed ekraan on sinu Uusimate kirju. Ja kui teil on uuega seal, siis sisu, mis div muutub vastavalt ajakohastatud sisu. Ma olen Doug Lloyd. See on CS50.