[Mūzikas atskaņošanai] Doug LLOYD: Tātad vēl viens veida priekšstatu, ka kārtot ietilpst paspārnē JavaScript ir kaut ko sauc AJAX. Līdz šim punktam, mūsu mijiedarbība ar JavaScript ir tikai push pogu un kaut kas notiek. Un konkrētāk, kaut kas notiek ir mūsu mājaslapas izskatu un justies izmaiņas. Tiesības? Piemēram, jo ​​īpaši, In dokumenta objekta modelis video, Es mainīja fona krāsu. Bet, kad es to izdarīju, man nebija darīt kādas īpašas papildu pieprasījumus. Man nebija prasīt, lai serveris sūtīt man jaunu lapu. Es tikko mainīts, kas man jau bija. Man nebija, lai pārlādētu manu lapu, un lietas noteikti mainījies, tāpēc tas ir lieliski. Bet tur ir noteikti daži pamācība lietotāja mijiedarbība iesaistīti. AJAX ir foršs paņēmiens, kas ļauj mums atjaunināt lapas saturu, un ne tikai izskatu un jūtas, bez pārkraušanas. 

Un īpaši, kad es saka atjaunināt lapas saturu, Es nesaku, mēs pārrakstīt lapa izmantojot JavaScript. Es saku, mēs faktiski pieprasītu vairāk informācija no servera bez mūsu lapu, kam, lai pārlādētu. 

Tagad, ka veida mazliet vairāk modernu tehniku ka mēs ejam, lai runātu par šajā video. Mēs ejam, lai ir dažas mijiedarbību. Bet, kad mēs darām, es esmu būs padarot pieprasījumus uz web serveri. Šajā gadījumā, tikai to, kas ir darbojas mana Apache web serveri. Es esmu būs padarīt papildu pieprasījumi, kamēr es esmu apmeklējot mājas lapu, bet mana lapa netiks atsvaidzināt. 

Tas ir tikai gatavojas asinhroni mainīšu lapu. Un tas ir, faktiski, kas AJAX apzīmē, ir Asynchronous JavaScript un XML. XML ir cita veida atzīmes valoda, un jūs varat veida domāju, ka tā, tāpat kā HTML. Tas nav gluži tas pats, bet tas ir būtībā tikai iezīmēšanas valoda. Tātad, tas ir asinhrons JavaScript un iezīmēšanas valoda. 

Tātad, lai izmantotu šo AJAX technique-- AJAX nav atsevišķa programmēšanas valoda. Tas ir tikai sava veida komplekts techniques-- mēs nepieciešams izveidot īpašu JavaScript objekts, kas sauc par XMLHttpRequest. Tagad, tas ir ļoti viegli, lai to paveiktu. Mēs tikai teikt VAR, neatkarīgi mēs vēlamies, lai izsauktu šo objektu, vienāds jaunu XMLHttpRequest. Un tagad mēs esam tagad iegūti AJAX veida objekta, vai XMLHttpRequest objekts, kas ļaus mums asinhroni atjaunināt mūsu lapu. 

Pēc tam, kad mēs esam gotten šo jauno objekts, tas XMLHttpRequest, mums kaut kas ir jādara, lai tās onreadystatechange uzvedība. Onreadystatechange uzvedība ir patiešām vienkārši kad jūs veicat pieprasījumu uz tīmekļa lapu, lapu iet caur vairākiem soļiem. Pirmkārt, lūgums nav nosūtīts. Tad pieprasījums ir bijis nosūtīts, taču netiek ņemts vērā. Tad lūgums ir atbildēts. Tad pieprasījums ir tiek nosūtīts atpakaļ uz jums. 

Tad, pieprasījums ir pilnībā piekrauts savā lapā. Tiem ir dažādas valstis. Un tāpēc mums ir nepieciešams, kas mūsu Jaunais XMLHttpRequest objekts mainīties, kad gatavības stāvoklī izmaiņas. Un parasti, mēs to darām, definējot anonīmu funkciju, kas mēs esam iepazinušies ar no JavaScript tagad, ka ieslēdzas, ja gatavības stāvoklī izmaiņas. Tas tiešām nav daudz vairāk nekā to. Mēs esam tikai gatavojas definēt anonīma funkcija, veida, piemēram, to, kas mēs darām JavaScript, kur mēs varētu ir anonīmu funkciju reaģēt uz on klikšķi, vai tad, kad mēs darām karti dažādi objekti masīva. 

Kaut kas notika, kad kaut kas tika uzklikšķināt. Šajā gadījumā tas ir tikai kaut kas ir notiek, kad valsts no mūsu lapas izmaiņas. Ir divi citi īpašumi kas ir sava veida of-- viņi nav vienīgās īpašības, kas raksturīga XMLHttpRequest, bet viņi diezgan svarīgus ones. Tur ir kaut kas ko sauc readyState, kas, kā jūs varat droši uzminēt, ir saistīta ar onreadystatechange. Tas faktiski stāsta jums ko readyState ir. 0, 1, 2, 3, 4 un ir iespējas tur, un viņi veida rupji atbilst tam, ko Man bija tikai runā par otro atpakaļ. 

Un tad statuss, kas cerams, ja viss gāja OK, ir 200, kas ir īss lai, protams, OK, kas mēs esam iepazinušies ar no HTTP. Tāpēc mēs ceram, ka mūsu gatavs valsts ir četri, un mūsu statuss ir 200. Un, ja mūsu gatavības stāvoklī ir četri, un reakcija ir gatavs laist lappuse, un statuss ir 200, mēs varējām darīt viss veiksmīgi, Tagad mēs varam asinhroni atjaunināt mūsu lapu bez pārlādēt viss saturs no tā. 

Kad mēs esam definēts, kas notiek uz onreadystatechange uzvedību, un mēs esam pārbaudīts, ka readyState ir 4 un statuss ir 200, tad viss, kas mums jādara, ir atvērt asinhrons pieprasījums, kas ir tikai veicot http parasti GET pieprasījumu. Tikai darot to programmiski, nevis caur mūsu interneta pārlūku. Un tad mēs nosūtīt šo lūgumu. Tātad, ko tas varbūt izskatās kontekstā? Tātad, šeit ir funkcija, kas nodarbojas ar AJAX pieprasījumu. LABI? Un es esmu patvaļīgi teicu tā atzīst kādu argumentu. Un tas ir sava veida Kopumā skelets šeit. Pašā sākumā, mēs iegūstam sevi jaunā XMLHttpRequest objekts. Tad, man ir nepieciešams, lai uzstādītu onreadystatechange uzvedība. Un tāpēc es esmu gatavojas teikt kad readyState izmaiņas, Es gribu, lai jūs, lai izsauktu šo funkciju. 

Kas gatavojas lūgt Jautājums, ja readyState ir 4, ja readyState ir mainījusies būt 4, un statuss bija 200, tāpēc mums bija veiksmīga pieprasījumu, es gribu darīt kaut ko lapā. Un mēs ņemšu apskatīt pie piemērs tam, ko ka kaut kas varētu būt sekundē. Tātad, tagad man ir definēts mans anonīma funkcija, mana atbilde funkcija, kad tad readyState izmaiņas. 

Tad es vienkārši nepieciešams, lai atvērtu pieprasīt, izmantojot atklātu metodi. Un tad, es nosūtīt šo lūgumu. Un pieņemsim to apskatīt vairāk konkrēts piemērs par to, ko AJAX var darīt uz mūsu mājas lapas. Tāpēc man ir šeit ir ļoti vienkāršs lapa sauc home.html. Un man informācijas iet šeit un daži no nolaižamā kārtošanas. 

Un mēs pārskatīt šo vienā sekundē. Bet es domāju, ka mums tagad būtu jāņem apskatīt faktisko pirmkodu. Un tā, es esmu gatavojas atvērt home.html. Un mēs redzēsim, kas notiek. Tātad augšā pašā augšā šeit, man ir daži JavaScript sīkumi, kas notiek. 

Un šeit, man acīmredzot ir Div kura ID ir infodiv, un kādu informāciju gatavojas iet uz turieni. Un tad man ir šo formu. Un iekšpusē tas forma, man ir kaut kas sauc Select, kas ir tikai nolaižamā izvēlne ar ķekars dažādu iespēju. Un, acīmredzot, kad tas mainās, kad iespēja, ka ir izvēlēta, ir mainījies, es esmu dodas uz zvanu dažas funkcijas cs50Info, un tad es esmu gatavojas apliecību this.value, ja tas attiecas uz kurš variants tika izvēlēts, un vērtība ir viens no tiem šeit, variants vērtība = vienāds tukša, "Blumberg" "Bowden," "chan," un "Malan." 

Tātad, ko varētu reāli notikt šeit, kad es to varu darīt? Nu, pieņemsim apskatīt blumberg.html. Izskatās, ka tas ir tikai fragments no kāda HTML. Un patiesībā, ko es esmu cerot notiks šeit ir es esmu gatavojas, lai varētu plug šo HTML tieši manā mājas lapā bez pārlādēt lapa, tā, ka tad, kad Es izvēlos Hannah no nolaižamā ēdienkarte, informācija par Hannah, Konkrēti, šī informācija šeit blumberg.html, ir tas, kas parādās lapā. Un man nav atsvaidzināt. Un, ja es izvēlējos kāds cits, viņu informācija būtu parādās. Kā es varu darīt? Atkal, tas prasa mums izmantot dažas AJAX. Un tā, mēs atvērt ajax.js. Un šeit ir tā, ka funkcija, cs50Info. Ja vārds ir nekas, es atgriezties. Es neesmu gatavojas kaut ko darīt, ja tukša opcija ir izvēlēta. Citādi, es esmu gatavojas izveidot jaunu XMLHttpRequest. Un tad es esmu gatavojas teikt, kad readyState izmaiņas, zvaniet šo funkciju. 

Un, ja ir readyState 4 un statuss ir 200, šeit ir mazliet jQuery tiešsaistē 13. Bet viss, ko es daru, ir saprotams, mainīt saturu infodiv lai būtu ko es saņēmu atpakaļ kā atbilde no manas HttpRequest. 

Kas ir mana HttpRequest? Nu, tas ir labi šeit 18 līnijas un 19. Līnija 18, es esmu būtībā sagatavošanu GET pieprasījumu nosaukumu + .html. Un atkal, vārds šeit ir arguments, ka bija pieņemts kā parametru cs50Info. 

Vārdu sakot, es esmu iet in kāds s nosaukt, kas bija, ka kopums iespējām ka mēs redzējām nolaižamo izvēlni formā. Es saņemu šo nosaukumu. Un es saku es vēlētos, lai jūs lūdzu iegūt man šo file.html, un pēc tam nosūtīt šo lūgumu. 

Un tā, ka onreadystatechange notiek būt klausīšanās un gaida, un gaida un gaida, kamēr readyState ir 4, un statuss ir 200. Tātad, tas ir gatavs pasniegšanai, un pieprasījums bija veiksmīga. Un tad, ja tā ir, tas notiek, lai mainīt saturu infodiv būt atbilde tekstu ka es saņēmu atpakaļ. 

Tātad, pieņemsim redzēt, kā tas tiešām varētu strādāt. Tātad mēs dodies uz manu pārlūku logu, un mēs apskatīt šeit. Tātad, pieņemsim to apskatīt kas notiek šeit, AJAX. Tātad mēs izvēlēties kādu no nolaižamās izvēlnes. Tātad šajā gadījumā, pieņemsim tikai izvēlēties Hannah. Un paziņojums, ka Hannah informācija ir mainījusies, bet man nebija any-- mana lapa nav pilnībā pārlādētu. Sīkumi palika. Lielākā daļa no stuff palika. AJAX Test nemainījās. Poga pati, šis nolaižamo izvēlni nemainījās. Bet informācija tur darīja pārmaiņas. Un atkarībā no tā, cik ātri mans dators kustas, jūs tiešām var redzēt, ka satura pazūd un tad atkal parādās patiešām ātri. Tas ir saturs ir svītrots no infodiv, un pēc tam aizstāta ar Jaunais asinhrono pieprasījums. 

Tātad, ja es ieslēdziet to būtu teikt, Rob-- un atkal, ieskatieties, un varbūt mēs redzēsim to faktiski pazūd un atkal parādās ātri. Jūs redzēsiet, ka? Kā tas tikko popped prom, un tad tas uzpildīt? Tas ir AJAX pieprasījums kārtot notiek. Un tā atkarībā no cilvēks es izvēlos, es esmu padarot citu asinhrono pieprasījums uz citu failu ka man ir uz mana servera. Un saturs manas infodiv atjaunināšanu, balstoties uz kuru no šiem es esmu izvēlējies. Tā ka tiešām viss ir uz AJAX. Tas ļauj mums veikt šos asinhrono pieprasījumus, atjauninājumus lapā. Bez atsvaidzināt visu lapu, mēs ejam, lai iegūtu jaunas saturs no tā padarot jaunu svaigu pieprasījums uz serveri. Un tā, mūsu lapas var kļūt pavisam nedaudz dinamiskāku. 

Un kā mēs vairāk un spēcīgākās, jums varētu saņemt lietas, piemēram, teiksim, jūsu e-pasta iesūtni, ja jums nav darīt jebko. Jums nav, lai noklikšķināt uz nolaižamo izvēlni vai noklikšķiniet neko, un visi pēkšņi, jūsu jaunākais email parādās augšpusē. Tas ir arī tikai Ajax pieprasījums. Ajax pieprasa savu serveris, e-pasta serveris, nosūtīt pa visu informāciju par saviem jaunākajiem e-pastus, un mainot to, ko jūs redzat uz ekrāns būt jūsu jaunākais kopums e-pastiem. Un, ja jums ir jauns jēdziens tur, tad saturs šī div mainīsies, lai atspoguļotu atjauninātais saturs. Es esmu Doug Lloyd. Tas ir CS50.