1 00:00:00,000 --> 00:00:00,500 2 00:00:00,500 --> 00:00:04,810 [Glazbom] 3 00:00:04,810 --> 00:00:06,940 >> Doug LLOYD: Pa još jedan vrsta pojam koji 4 00:00:06,940 --> 00:00:12,120 vrsta spada pod okriljem JavaScript je nešto što se zove AJAX. 5 00:00:12,120 --> 00:00:15,310 Do ove točke, naš interakcija s JavaScriptom 6 00:00:15,310 --> 00:00:17,727 je ograničena gurnuti gumb i nešto se dogodi. 7 00:00:17,727 --> 00:00:19,560 I posebno, nešto što se događa 8 00:00:19,560 --> 00:00:22,950 je naša web stranice izgledaju i osjećaju promjene. 9 00:00:22,950 --> 00:00:23,450 Pravo? 10 00:00:23,450 --> 00:00:26,540 Kao što je naročito, u Document Object Model video 11 00:00:26,540 --> 00:00:29,060 Promijenio sam boju pozadine. 12 00:00:29,060 --> 00:00:33,240 Ali kad sam to učinio, nisam imao učiniti sve posebne dodatne zahtjeve. 13 00:00:33,240 --> 00:00:36,800 Nisam se zatražiti da poslužitelj poslati mi novu stranicu. 14 00:00:36,800 --> 00:00:39,620 Upravo sam promijenio ono što sam već imao. 15 00:00:39,620 --> 00:00:42,245 Nisam imala ponovno učitati moje stranice, i stvari definitivno promijenio, 16 00:00:42,245 --> 00:00:43,760 pa to je super. 17 00:00:43,760 --> 00:00:48,400 No, tu je svakako neke priručnik interakcije s korisnikom koji su uključeni. 18 00:00:48,400 --> 00:00:53,140 AJAX je super tehnika koja omogućuje nas ažurirati sadržaj neke stranice, 19 00:00:53,140 --> 00:00:55,750 a ne samo izgled i osjećaju, bez pretovara. 20 00:00:55,750 --> 00:00:58,610 >> I posebno kada sam kažu ažuriranje sadržajem web-stranice, 21 00:00:58,610 --> 00:01:01,990 Ne kažem da prepisati stranica pomoću JavaScript. 22 00:01:01,990 --> 00:01:06,560 Govorim zapravo zahtjev više informacija s poslužitelja 23 00:01:06,560 --> 00:01:08,640 bez naša stranica ima za ponovno učitavanje. 24 00:01:08,640 --> 00:01:10,850 >> Sada kada je svojevrsni malo više naprednih tehnika 25 00:01:10,850 --> 00:01:11,950 da ćemo razgovarati o tome u ovom videu. 26 00:01:11,950 --> 00:01:13,720 Mi ćemo imati neke interakcije. 27 00:01:13,720 --> 00:01:17,750 No, kada nam je činiti, ja ću biti što zahtjeva na web poslužitelju. 28 00:01:17,750 --> 00:01:21,140 U ovom slučaju, samo ono što je trčanje moj Apache web poslužitelja. 29 00:01:21,140 --> 00:01:25,010 Idem biti stvaranje dodatnih Zahtjevi dok sam posjetite web-stranicu, 30 00:01:25,010 --> 00:01:26,890 ali moja stranica neće osvježiti. 31 00:01:26,890 --> 00:01:30,000 >> To samo će asinkrono ažurirati svoju stranicu. 32 00:01:30,000 --> 00:01:31,840 A to je, u stvari, koja se zalaže za AJAX, 33 00:01:31,840 --> 00:01:35,400 je Asinkroni JavaScript i XML. 34 00:01:35,400 --> 00:01:37,910 XML je još jedna vrsta markup jezik, a možete sortirati od 35 00:01:37,910 --> 00:01:39,680 mislim o tome kao HTML. 36 00:01:39,680 --> 00:01:42,990 To nije baš ista stvar, ali to je u osnovi samo označni jezik. 37 00:01:42,990 --> 00:01:47,770 Dakle, to je asinkroni JavaScript i označni jezik. 38 00:01:47,770 --> 00:01:50,590 >> Dakle, kako bi mogli koristiti ovu AJAX technique-- AJAX 39 00:01:50,590 --> 00:01:52,230 nije zasebna programski jezik. 40 00:01:52,230 --> 00:01:55,300 To je samo neka vrsta Skup techniques-- mi 41 00:01:55,300 --> 00:01:57,870 potrebno je stvoriti poseban JavaScript objekta, koji je 42 00:01:57,870 --> 00:02:00,689 se zove XMLHttpRequest. 43 00:02:00,689 --> 00:02:01,980 Sada, to je vrlo lako za to. 44 00:02:01,980 --> 00:02:04,550 Mi samo reći var, bez obzira na želimo pozvati ovaj objekt, 45 00:02:04,550 --> 00:02:07,030 jednako novi XMLHttpRequest. 46 00:02:07,030 --> 00:02:11,050 I sada smo sada dobiti AJAX vrsta objekta, 47 00:02:11,050 --> 00:02:14,370 ili XMLHttpRequest objekt, koji će omogućiti 48 00:02:14,370 --> 00:02:18,360 nas asinkrono ažurirati našu stranicu. 49 00:02:18,360 --> 00:02:23,100 >> Nakon što smo stečen ovaj novi objekt, to XMLHttpRequest, 50 00:02:23,100 --> 00:02:27,760 moramo učiniti nešto za svoju onreadystatechange ponašanje. 51 00:02:27,760 --> 00:02:30,360 Onreadystatechange ponašanje je zapravo samo 52 00:02:30,360 --> 00:02:34,080 kada se napravi zahtjev na web stranici, stranica 53 00:02:34,080 --> 00:02:35,880 prolazi kroz niz koraka. 54 00:02:35,880 --> 00:02:37,370 Prvo, zahtjev nije poslan. 55 00:02:37,370 --> 00:02:39,860 Zatim je zahtjev poslao, ali ne djeluje. 56 00:02:39,860 --> 00:02:41,580 Zatim je zahtjev postupiti. 57 00:02:41,580 --> 00:02:43,680 Zatim je zahtjev poslan natrag na vas. 58 00:02:43,680 --> 00:02:46,930 >> Zatim je zahtjev u potpunosti učita na stranici. 59 00:02:46,930 --> 00:02:48,640 To su različita stanja. 60 00:02:48,640 --> 00:02:53,890 I tako moramo postaviti našim Novi XMLHttpRequest objekt 61 00:02:53,890 --> 00:02:58,740 da se mijenjaju stanje pripravnosti promjene. 62 00:02:58,740 --> 00:03:01,925 I obično, mi to radimo definiranje anonimni funkciju, koja 63 00:03:01,925 --> 00:03:04,490 mi smo upoznati s iz JavaScript je sada, da 64 00:03:04,490 --> 00:03:09,840 se zove kad stanju pripravnosti promjene. 65 00:03:09,840 --> 00:03:11,340 To stvarno nije mnogo više od toga. 66 00:03:11,340 --> 00:03:14,340 Samo ćemo se definira Anonimni funkcija, vrsta sviđa ono 67 00:03:14,340 --> 00:03:16,440 smo radili u JavaScript, gdje bi 68 00:03:16,440 --> 00:03:18,750 imaju anonimne funkciju odgovoriti na na klik, 69 00:03:18,750 --> 00:03:23,230 ili kad su mi radimo kartu razni objekti u nizu. 70 00:03:23,230 --> 00:03:25,220 >> Nešto se dogodilo kada nešto klikne. 71 00:03:25,220 --> 00:03:28,810 U ovom slučaju, to je samo nešto što je događa kada se stanje naše stranice 72 00:03:28,810 --> 00:03:30,160 promjene. 73 00:03:30,160 --> 00:03:32,730 Postoje dva druga svojstva koje su svojevrsni of-- oni nisu 74 00:03:32,730 --> 00:03:35,524 samo svojstva koja su svojstveni sučelja XMLHttpRequest, 75 00:03:35,524 --> 00:03:36,940 ali oni su prilično važne one. 76 00:03:36,940 --> 00:03:39,815 Postoji nešto što se zove readyState, koji je kao što vjerojatno možete pogoditi, 77 00:03:39,815 --> 00:03:41,750 je povezana s onreadystatechange. 78 00:03:41,750 --> 00:03:44,250 To zapravo govori, što readyState je. 79 00:03:44,250 --> 00:03:46,289 0, 1, 2, 3, i 4 su mogućnosti tamo, 80 00:03:46,289 --> 00:03:48,080 a vrsta grubo odgovara onome što 81 00:03:48,080 --> 00:03:50,030 Upravo sam govorio o prije sekundu. 82 00:03:50,030 --> 00:03:53,100 >> A onda status, koji nadam se, ako sve prođe u redu, 83 00:03:53,100 --> 00:03:56,710 je 200, što je kratka za, naravno, u redu, 84 00:03:56,710 --> 00:03:58,330 što smo upoznati s iz http. 85 00:03:58,330 --> 00:04:03,735 Dakle, mi smo u nadi da je naša država spremna je četiri, a naš status 200. 86 00:04:03,735 --> 00:04:07,940 A ako naše stanje pripravnosti je četiri, a odgovor 87 00:04:07,940 --> 00:04:11,490 je spremna da se stavi na stranica, a status je 200, 88 00:04:11,490 --> 00:04:13,580 bili smo u mogućnosti to učiniti sve je uspješno, 89 00:04:13,580 --> 00:04:17,209 Sada možemo asinkrono ažurirati našu stranicu 90 00:04:17,209 --> 00:04:21,730 bez reload cijeli sadržaj njega. 91 00:04:21,730 --> 00:04:27,710 >> Nakon što smo definirali što se događa na ponašanje onreadystatechange, 92 00:04:27,710 --> 00:04:31,020 a mi smo provjerili da readyState je 4 i status 200, 93 00:04:31,020 --> 00:04:33,900 onda sve što trebate učiniti je otvorili asinkrone 94 00:04:33,900 --> 00:04:38,530 Zahtjev, koji je samo stvaranje HTTP GET zahtjev općenito. 95 00:04:38,530 --> 00:04:41,950 Samo radi programatski, umjesto kroz naše web pregledniku. 96 00:04:41,950 --> 00:04:43,786 I onda mi poslati taj zahtjev. 97 00:04:43,786 --> 00:04:45,660 Pa što to možda izgledaju u kontekstu? 98 00:04:45,660 --> 00:04:49,790 Dakle, ovdje je funkcija koja bavi AJAX zahtjeva. 99 00:04:49,790 --> 00:04:50,290 U REDU? 100 00:04:50,290 --> 00:04:52,430 I ja sam samovoljno rekao prihvaća argument. 101 00:04:52,430 --> 00:04:55,550 I ovo neka vrsta Općenito kostur ovdje. 102 00:04:55,550 --> 00:05:00,890 Na samom početku, dobili smo sami nova XMLHttpRequest objekt. 103 00:05:00,890 --> 00:05:03,830 Zatim, moram postaviti onreadystatechange ponašanje. 104 00:05:03,830 --> 00:05:06,970 I tako ću reći kada readyState promjene, 105 00:05:06,970 --> 00:05:10,110 Želim da nazoveš tu funkciju. 106 00:05:10,110 --> 00:05:12,570 >> Koji će se pitati Pitanje, ako je readyState 107 00:05:12,570 --> 00:05:17,240 4, ako je readyState promijenio biti 4, a status je 200, 108 00:05:17,240 --> 00:05:20,799 tako da smo imali uspješnu zahtjev, sam želite učiniti nešto na stranici. 109 00:05:20,799 --> 00:05:22,590 A mi ćemo se pogled na primjer što se 110 00:05:22,590 --> 00:05:25,010 da je nešto moglo biti u sekundi. 111 00:05:25,010 --> 00:05:27,830 Dakle, sada sam definirao moj anonimni funkcija, 112 00:05:27,830 --> 00:05:31,340 moja funkcija odgovor kad god su readyState promjene. 113 00:05:31,340 --> 00:05:37,120 >> Pa onda sam samo trebate otvoriti zahtjev, koristite Otvori način. 114 00:05:37,120 --> 00:05:39,160 A onda, šaljem taj zahtjev. 115 00:05:39,160 --> 00:05:41,980 I neka je pogledati više konkretan primjer 116 00:05:41,980 --> 00:05:46,290 od čega AJAX može učiniti na našim web stranicama. 117 00:05:46,290 --> 00:05:49,740 Dakle, imam ovdje vrlo jednostavna Stranica se zove home.html. 118 00:05:49,740 --> 00:05:53,620 I ja imam informacija ide ovdje i neka vrsta padajućeg izbornika. 119 00:05:53,620 --> 00:05:55,390 >> A mi ćemo ponovno ovu u jednoj sekundi. 120 00:05:55,390 --> 00:05:59,150 Ali mislim da mi sada treba uzeti pogledajte stvarni izvorni kod. 121 00:05:59,150 --> 00:06:01,080 I tako, idem otvoriti home.html. 122 00:06:01,080 --> 00:06:03,490 123 00:06:03,490 --> 00:06:04,740 Pa ćemo vidjeti što se događa. 124 00:06:04,740 --> 00:06:08,240 Tako se na samom vrhu ovdje, imam Neki JavaScript stvari koje se događa. 125 00:06:08,240 --> 00:06:12,470 >> I ovdje, ja očito ima div čiji ID je infodiv, 126 00:06:12,470 --> 00:06:15,290 i neke informacije će ići tamo. 127 00:06:15,290 --> 00:06:16,374 A onda sam se ovaj obrazac. 128 00:06:16,374 --> 00:06:18,081 I unutar toga oblik, imam nešto 129 00:06:18,081 --> 00:06:20,200 naziva Odaberite koji samo je padajući izbornik 130 00:06:20,200 --> 00:06:22,150 s hrpom različitih opcija. 131 00:06:22,150 --> 00:06:26,150 A očito kad se to promijeni, kad opcija koja je odabrana ima 132 00:06:26,150 --> 00:06:30,600 promijenilo, ja ću nazvati neke funkcije cs50Info, 133 00:06:30,600 --> 00:06:33,190 a onda ću proći this.value, 134 00:06:33,190 --> 00:06:35,740 gdje se to odnosi na koja opcija odabrana, 135 00:06:35,740 --> 00:06:39,820 i vrijednost je jedna od njih ovdje, opcija vrijednost = jednaka prazna "Blumberg" 136 00:06:39,820 --> 00:06:42,610 "Bowden", "Chan" i "Malan." 137 00:06:42,610 --> 00:06:45,090 >> Dakle, ono što bi zapravo dogoditi ovdje kad sam to učiniti? 138 00:06:45,090 --> 00:06:48,800 Pa, neka je pogledajte blumberg.html. 139 00:06:48,800 --> 00:06:51,330 140 00:06:51,330 --> 00:06:53,924 Izgleda da je samo isječak neke HTML. 141 00:06:53,924 --> 00:06:56,090 A u stvari, što se nadam će se dogoditi ovdje 142 00:06:56,090 --> 00:07:00,020 se da ću biti u mogućnosti priključiti ovaj HTML izravno u moje web stranice 143 00:07:00,020 --> 00:07:02,970 bez reload stranicu, tako da kad 144 00:07:02,970 --> 00:07:07,510 Biram Hannah iz padajućeg Izbornik, informacije o Hannah, 145 00:07:07,510 --> 00:07:11,100 Konkretno, ovaj informacije ovdje u blumberg.html, 146 00:07:11,100 --> 00:07:12,574 je ono što se prikazuje na stranici. 147 00:07:12,574 --> 00:07:13,740 A ja ne moram osvježiti. 148 00:07:13,740 --> 00:07:16,842 I ako sam izabrao netko drugi, njihovi podaci će se pojaviti. 149 00:07:16,842 --> 00:07:17,550 Kako to učiniti? 150 00:07:17,550 --> 00:07:20,290 Opet, to zahtijeva nam da koristite neki AJAX. 151 00:07:20,290 --> 00:07:22,540 I tako, mi ćemo otvoriti ajax.js. 152 00:07:22,540 --> 00:07:25,550 I ovdje je to funkcija, cs50Info. 153 00:07:25,550 --> 00:07:27,410 Ako ime nije ništa, sam se vratiti. 154 00:07:27,410 --> 00:07:31,450 Neću učiniti ništa, ako prazna opcija je izabrao. 155 00:07:31,450 --> 00:07:35,420 Inače, ja ću stvoriti novi XMLHttpRequest. 156 00:07:35,420 --> 00:07:39,020 A onda ću reći, kad je readyState promjene, nazovite ovu funkciju. 157 00:07:39,020 --> 00:07:43,630 >> A ako je readyState 4. a status je 200, 158 00:07:43,630 --> 00:07:45,740 evo malo jQuery na liniji 13. 159 00:07:45,740 --> 00:07:50,450 Ali sve radim je rekao, promijeniti sadržaj infodiv 160 00:07:50,450 --> 00:07:57,820 biti ono što sam se vratio kao odgovor od mog HttpRequest. 161 00:07:57,820 --> 00:07:59,590 >> Što je moja HttpRequest? 162 00:07:59,590 --> 00:08:02,020 Pa, to je pravo ovdje na liniji 18 i 19 godina. 163 00:08:02,020 --> 00:08:08,550 Linija 18, ja zapravo Pripremam GET zahtjev za ime + .html. 164 00:08:08,550 --> 00:08:11,170 I opet, naziv je ovdje argument da je 165 00:08:11,170 --> 00:08:14,280 donesen kao parametar cs50Info. 166 00:08:14,280 --> 00:08:18,460 >> Tako je u osnovi, ja sam prolazeći u nečijem ime, što je to skup opcija 167 00:08:18,460 --> 00:08:22,980 kako smo vidjeli u padajući izbornik u obliku. 168 00:08:22,980 --> 00:08:24,450 Ja sam dobivanje to ime. 169 00:08:24,450 --> 00:08:29,530 A ja govorim bih vas želio molimo isprosi mi da file.html, 170 00:08:29,530 --> 00:08:31,020 a zatim poslati taj zahtjev. 171 00:08:31,020 --> 00:08:34,820 >> I tako to ide onreadystatechange da se sluša i čeka i čeka 172 00:08:34,820 --> 00:08:39,460 i čeka, dok readyState je 4, a status je 200. 173 00:08:39,460 --> 00:08:44,970 Tako da je spremna da bude služen, a zahtjev je bio uspješan. 174 00:08:44,970 --> 00:08:49,500 A onda, ako je to, to će promijeniti sadržaj infodiv 175 00:08:49,500 --> 00:08:53,030 da se tekst odgovor koji sam dobio natrag. 176 00:08:53,030 --> 00:08:54,930 >> Tako ćemo vidjeti kako se to Možda se zapravo radi. 177 00:08:54,930 --> 00:08:58,860 Tako ćemo preko glave na moj e prozor, a mi ćemo pogledati ovdje. 178 00:08:58,860 --> 00:09:01,359 Tako ćemo pogledati što se događa ovdje u AJAX. 179 00:09:01,359 --> 00:09:03,400 Tako ćemo izabrati nekoga iz padajućeg izbornika. 180 00:09:03,400 --> 00:09:06,079 Dakle, u ovom slučaju, neka je samo odaberite Hannah. 181 00:09:06,079 --> 00:09:08,120 I obavijest da je Hannah je Informacije promijenio, 182 00:09:08,120 --> 00:09:11,030 ali nisam imao any-- mom Stranica nije u potpunosti ponovno učitati. 183 00:09:11,030 --> 00:09:12,190 Ono ostao. 184 00:09:12,190 --> 00:09:13,320 Većina stvari je ostao. 185 00:09:13,320 --> 00:09:14,320 AJAX test nije promijenio. 186 00:09:14,320 --> 00:09:16,700 Sama gumb, ovaj padajući izbornik nije promijenio. 187 00:09:16,700 --> 00:09:18,260 Ali informacije tamo učinio promjenu. 188 00:09:18,260 --> 00:09:20,218 I ovisno o tome Brzo moje računalo ne pomakne, 189 00:09:20,218 --> 00:09:24,430 možda zapravo vidjeti da sadržaj nestaje, a zatim ponovno pojavi stvarno 190 00:09:24,430 --> 00:09:24,930 brzo. 191 00:09:24,930 --> 00:09:27,320 To je sadržaj koji se izbrisana iz infodiv, 192 00:09:27,320 --> 00:09:29,940 i zatim zamijeni s Novi asinkroni zahtjev. 193 00:09:29,940 --> 00:09:34,410 >> Dakle, ako sam ga prebaciti se reći, Rob-- i opet, pogledati, 194 00:09:34,410 --> 00:09:38,379 i možda ćemo ga vidjeti zapravo nestati i pojaviti se brzo. 195 00:09:38,379 --> 00:09:38,920 Vidiš to? 196 00:09:38,920 --> 00:09:41,400 Kako to samo popped daleko, a zatim ga puniti? 197 00:09:41,400 --> 00:09:43,640 To je AJAX zahtjev vrsta odvija. 198 00:09:43,640 --> 00:09:46,060 I tako, ovisno o Osoba sam birati, ja sam 199 00:09:46,060 --> 00:09:50,690 čineći različite asinkrone Zahtjev za neku drugu datoteku 200 00:09:50,690 --> 00:09:52,730 da imam na mom serveru. 201 00:09:52,730 --> 00:09:55,550 A sadržaj mog infodiv ažuriranje, 202 00:09:55,550 --> 00:09:58,457 na temelju koje od tih sam izabrao. 203 00:09:58,457 --> 00:10:00,040 Tako da je stvarno sve što se AJAX. 204 00:10:00,040 --> 00:10:04,090 To nam omogućuje da napravite ove asinkrone zahtjeva, ažuriranja stranici. 205 00:10:04,090 --> 00:10:06,450 Bez osvježite cijelu stranicu, 206 00:10:06,450 --> 00:10:08,520 ćemo dobiti novi Sadržaj od njega čineći 207 00:10:08,520 --> 00:10:11,170 novi svježi zahtjev poslužitelju. 208 00:10:11,170 --> 00:10:13,420 I tako, naši stranice mogu postati vrlo malo dinamičniji. 209 00:10:13,420 --> 00:10:15,128 >> I kao što smo dobili više i više naprednih, te 210 00:10:15,128 --> 00:10:17,700 Možda se stvari kao što su recimo, svoju pristiglu poštu, 211 00:10:17,700 --> 00:10:19,850 gdje se ne morate ništa učiniti. 212 00:10:19,850 --> 00:10:22,560 Ne morate kliknuti padajući izbornik ili pritisnite ništa, 213 00:10:22,560 --> 00:10:25,920 i odjednom, vaš najnoviji e pojavi na vrhu. 214 00:10:25,920 --> 00:10:27,840 To je također samo Ajax zahtjev. 215 00:10:27,840 --> 00:10:30,460 Ajax traži svoje poslužitelja, poslužitelja e-pošte, 216 00:10:30,460 --> 00:10:33,360 poslati nad svim informacijama o svojim najnovijim e-pošte, 217 00:10:33,360 --> 00:10:38,110 i mijenja ono što vidite na Zaslon biti tvoj najnoviji set e-pošte. 218 00:10:38,110 --> 00:10:41,080 A ako imate novi u postoji, onda je sadržaj tog div 219 00:10:41,080 --> 00:10:44,580 mijenjat će se ovisno ažurirani sadržaj. 220 00:10:44,580 --> 00:10:45,480 Ja sam Doug Lloyd. 221 00:10:45,480 --> 00:10:47,500 Ovo je CS50. 222 00:10:47,500 --> 00:10:49,229