1
00:00:00,000 --> 00:00:00,500

2
00:00:00,500 --> 00:00:04,810
[Přehrávání hudby]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Takže ještě jeden
druh představou, že

4
00:00:06,940 --> 00:00:12,120
druh spadá pod záštitou
JavaScript je něco, co nazývá AJAX.

5
00:00:12,120 --> 00:00:15,310
Až do tohoto bodu, dotazy
interakce s JavaScriptu

6
00:00:15,310 --> 00:00:17,727
byla omezena na tlačit
Tlačítko a něco stane.

7
00:00:17,727 --> 00:00:19,560
A specificky,
něco, co se stane,

8
00:00:19,560 --> 00:00:22,950
jsou naše webové stránky vypadat a cítit se změny.

9
00:00:22,950 --> 00:00:23,450
Právo?

10
00:00:23,450 --> 00:00:26,540
Stejně jako zejména, v
Document Object Model video,

11
00:00:26,540 --> 00:00:29,060
Změnil jsem barvu pozadí.

12
00:00:29,060 --> 00:00:33,240
Ale když jsem to udělal, jsem neměl
dělat žádné zvláštní požadavky navíc.

13
00:00:33,240 --> 00:00:36,800
Nemusel jsem požadovat, aby
server mi poslat novou stránku.

14
00:00:36,800 --> 00:00:39,620
Právě jsem změnil to, co už jsem měl.

15
00:00:39,620 --> 00:00:42,245
Nemusel jsem znovu načíst mé stránky,
a věci definitivně změnilo,

16
00:00:42,245 --> 00:00:43,760
tak to je skvělé.

17
00:00:43,760 --> 00:00:48,400
Ale je tu určitě nějaké
manuální interakce s uživatelem zapojit.

18
00:00:48,400 --> 00:00:53,140
AJAX je v pohodě technika, která umožňuje
nám k aktualizaci obsahu stránky,

19
00:00:53,140 --> 00:00:55,750
a ne jen vzhled a
pocit, bez překládky.

20
00:00:55,750 --> 00:00:58,610
>> A zvláště, když jsem
říkají, aktualizace obsahu stránky,

21
00:00:58,610 --> 00:01:01,990
Neříkám, že bychom přepsat
stránky pomocí JavaScriptu.

22
00:01:01,990 --> 00:01:06,560
Říkám, že jsme vlastně požadovat
Více informací ze serveru

23
00:01:06,560 --> 00:01:08,640
bez našeho strana museli znovu načíst.

24
00:01:08,640 --> 00:01:10,850
>> Nyní, když druh trochou
pokročilejší techniku

25
00:01:10,850 --> 00:01:11,950
že budeme mluvit
o v tomto videu.

26
00:01:11,950 --> 00:01:13,720
Budeme mít nějaké interakci.

27
00:01:13,720 --> 00:01:17,750
Ale když budeme dělat, já budu
takže požadavky na webový server.

28
00:01:17,750 --> 00:01:21,140
V tomto případě, jen to, co je
běží moje webový server Apache.

29
00:01:21,140 --> 00:01:25,010
Budu dělat další se
Žádosti zatímco já jsem na návštěvě webové stránky,

30
00:01:25,010 --> 00:01:26,890
ale moje strana nebude aktualizovat.

31
00:01:26,890 --> 00:01:30,000
>> Je to jen bude
asynchronně aktualizovat své stránky.

32
00:01:30,000 --> 00:01:31,840
A to je ve skutečnosti,
což je zkratka pro AJAX,

33
00:01:31,840 --> 00:01:35,400
je Asynchronous JavaScript a XML.

34
00:01:35,400 --> 00:01:37,910
XML je další druh značení
jazyk, a můžete třídit podle

35
00:01:37,910 --> 00:01:39,680
myslet na to, stejně jako HTML.

36
00:01:39,680 --> 00:01:42,990
Není to úplně totéž, ale
je to v podstatě jen o značkovací jazyk.

37
00:01:42,990 --> 00:01:47,770
Takže je to asynchronní
JavaScript a značkovací jazyk.

38
00:01:47,770 --> 00:01:50,590
>> Tak, aby bylo možné použít tuto
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
není samostatný programovací jazyk.

40
00:01:52,230 --> 00:01:55,300
Je to jen něco jako
sada techniques-- my

41
00:01:55,300 --> 00:01:57,870
muset vytvořit zvláštní
JavaScript objekt, který

42
00:01:57,870 --> 00:02:00,689
se nazývá XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Teď, je to velmi jednoduché, jak to udělat.

44
00:02:01,980 --> 00:02:04,550
Právě jsme se říci, var, bez ohledu
chceme volat tento objekt,

45
00:02:04,550 --> 00:02:07,030
rovná se nový XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
A teď jsme nyní získat
AJAX druh objektu,

47
00:02:11,050 --> 00:02:14,370
nebo XMLHttpRequest
objekt, který umožní

48
00:02:14,370 --> 00:02:18,360
nám asynchronně aktualizovat naši stránku.

49
00:02:18,360 --> 00:02:23,100
>> Poté, co jsme dostali tento nový
objekt, tento XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
Musíme něco udělat, aby jeho
onreadystatechange chování.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
chování je opravdu jen

52
00:02:30,360 --> 00:02:34,080
když si podat žádost
na webovou stránku, stránka

53
00:02:34,080 --> 00:02:35,880
prochází několika kroků.

54
00:02:35,880 --> 00:02:37,370
Za prvé, žádost nebyla odeslána.

55
00:02:37,370 --> 00:02:39,860
Poté, žádost byla
poslal, ale ne jednal.

56
00:02:39,860 --> 00:02:41,580
Potom žádost byla jednal.

57
00:02:41,580 --> 00:02:43,680
Pak je požadavek
být poslán zpět k vám.

58
00:02:43,680 --> 00:02:46,930
>> Potom, je požadavek
plně naložené na vaší stránce.

59
00:02:46,930 --> 00:02:48,640
To jsou různé stavy.

60
00:02:48,640 --> 00:02:53,890
A proto musíme nastavit dotazy
Nový objekt XMLHttpRequest

61
00:02:53,890 --> 00:02:58,740
ke změně, když připravené změny stavu.

62
00:02:58,740 --> 00:03:01,925
A obvykle, my to tím,
definování anonymní funkci, která

63
00:03:01,925 --> 00:03:04,490
Jsme obeznámeni s od
JavaScript teď, že

64
00:03:04,490 --> 00:03:09,840
je volána při stavu připravenosti změny.

65
00:03:09,840 --> 00:03:11,340
Je to opravdu nic víc než to.

66
00:03:11,340 --> 00:03:14,340
Jsme prostě bude definování
Funkce anonymní, tak trochu líbí, co

67
00:03:14,340 --> 00:03:16,440
jsme dělali v
JavaScript, kde bychom

68
00:03:16,440 --> 00:03:18,750
mají anonymní funkce
reagovat na on kliknutí,

69
00:03:18,750 --> 00:03:23,230
nebo když jsme dělali mapu
v poli různé objekty.

70
00:03:23,230 --> 00:03:25,220
>> Něco se stalo, když
něco klepli.

71
00:03:25,220 --> 00:03:28,810
V tomto případě, je to prostě něco, co je
děje, když stav naší stránce

72
00:03:28,810 --> 00:03:30,160
Změny.

73
00:03:30,160 --> 00:03:32,730
Existují dva další vlastnosti
které jsou nějak of-- že to není

74
00:03:32,730 --> 00:03:35,524
pouze vlastnosti, které jsou
inherentní XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
ale jsou to ty dost důležité.

76
00:03:36,940 --> 00:03:39,815
Je tu něco, co nazývá readyState,
který, jak asi tušíte,

77
00:03:39,815 --> 00:03:41,750
je v souvislosti s onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
Je to vlastně vám řekne,
co readyState je.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, a 4 jsou
možnosti tam,

80
00:03:46,289 --> 00:03:48,080
a oni nějak hrubě
odpovídají tomu, co

81
00:03:48,080 --> 00:03:50,030
Právě jsem mluvil asi před druhým.

82
00:03:50,030 --> 00:03:53,100
>> A pak stav, který
doufejme, že pokud šlo všechno v pořádku,

83
00:03:53,100 --> 00:03:56,710
je 200, což je zkratka
pro, samozřejmě, OK,

84
00:03:56,710 --> 00:03:58,330
které jste obeznámeni s z HTTP.

85
00:03:58,330 --> 00:04:03,735
Takže doufáme, že náš stát připraven
jsou čtyři, a naše stav je 200.

86
00:04:03,735 --> 00:04:07,940
A pokud se náš stavu připravenosti
jsou čtyři, a odezva

87
00:04:07,940 --> 00:04:11,490
je připraven k uvedení na
strana, a stav je 200,

88
00:04:11,490 --> 00:04:13,580
jsme byli schopni udělat
vše úspěšně,

89
00:04:13,580 --> 00:04:17,209
Nyní můžeme asynchronně
aktualizovat naši stránku

90
00:04:17,209 --> 00:04:21,730
aniž by bylo nutné znovu načíst
celý obsah dohody.

91
00:04:21,730 --> 00:04:27,710
>> Poté, co jste definovali, co se stane
k chování onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
a my jsme ověřil, že readyState
je 4 a status je 200,

93
00:04:31,020 --> 00:04:33,900
pak vše, co potřebujete udělat, je
otevírají asynchronní

94
00:04:33,900 --> 00:04:38,530
Žádost, která se jen dělat
HTTP obecně GET požadavek.

95
00:04:38,530 --> 00:04:41,950
Prostě to dělat programově,
namísto prostřednictvím našeho webovém prohlížeči.

96
00:04:41,950 --> 00:04:43,786
A pak jsme se, že žádost poslat.

97
00:04:43,786 --> 00:04:45,660
Takže to, co dělá to možná
vypadat v kontextu?

98
00:04:45,660 --> 00:04:49,790
Tak tady je funkce, která
se zabývá žádostmi Ajax.

99
00:04:49,790 --> 00:04:50,290
DOBŘE?

100
00:04:50,290 --> 00:04:52,430
A já jsem řekl svévolně
přijímá argument.

101
00:04:52,430 --> 00:04:55,550
A to jakýmsi
Obecně kostra zde.

102
00:04:55,550 --> 00:05:00,890
Na samém počátku, dostaneme
Sami nový XMLHttpRequest objekt.

103
00:05:00,890 --> 00:05:03,830
Pak musím nastavit
onreadystatechange chování.

104
00:05:03,830 --> 00:05:06,970
A tak jsem chtěl říct,
když readyState změny,

105
00:05:06,970 --> 00:05:10,110
Chci, abys volání této funkce.

106
00:05:10,110 --> 00:05:12,570
>> Což se chystá požádat
otázka, pokud readyState

107
00:05:12,570 --> 00:05:17,240
4 je, v případě, že ke změně readyState
, že je 4, a stav byl 200,

108
00:05:17,240 --> 00:05:20,799
takže jsme měli úspěšnou žádost, I
chcete udělat něco na stránku.

109
00:05:20,799 --> 00:05:22,590
A budeme se podívat
na příklad toho, co

110
00:05:22,590 --> 00:05:25,010
, že něco, co by mohlo být v druhém.

111
00:05:25,010 --> 00:05:27,830
Tak, teď jsem definováno
můj anonymní funkce,

112
00:05:27,830 --> 00:05:31,340
moje funkce reakce kdykoli
readyState změny.

113
00:05:31,340 --> 00:05:37,120
>> Takže už stačí jen otevřít
požádat, pomocí metody Open.

114
00:05:37,120 --> 00:05:39,160
A pak jsem tu žádost poslat.

115
00:05:39,160 --> 00:05:41,980
A pojďme se podívat na
Konkrétnější příklad

116
00:05:41,980 --> 00:05:46,290
čeho AJAX můžete dělat na našich webových stránkách.

117
00:05:46,290 --> 00:05:49,740
Tak jsem zde velmi jednoduchý
stránka s názvem home.html.

118
00:05:49,740 --> 00:05:53,620
A já mám informační pokračuje
tady a nějaký drop-down menu of.

119
00:05:53,620 --> 00:05:55,390
>> A budeme znovu to během jedné sekundy.

120
00:05:55,390 --> 00:05:59,150
Ale myslím, že bychom nyní měli vzít
podívejte se na skutečné zdrojového kódu.

121
00:05:59,150 --> 00:06:01,080
A tak, budu otevírat home.html.

122
00:06:01,080 --> 00:06:03,490

123
00:06:03,490 --> 00:06:04,740
A uvidíme, co se děje.

124
00:06:04,740 --> 00:06:08,240
Takže vzhůru na samém vrcholu tady, mám
někteří JavaScript věci, co se děje.

125
00:06:08,240 --> 00:06:12,470
>> A tady, já mají zjevně
div, jehož číslo je infodiv,

126
00:06:12,470 --> 00:06:15,290
a některé informace
se chystá jít tam.

127
00:06:15,290 --> 00:06:16,374
A pak mám tento formulář.

128
00:06:16,374 --> 00:06:18,081
A uvnitř této
forma, mám něco

129
00:06:18,081 --> 00:06:20,200
volal Select, který
je jen drop-down menu

130
00:06:20,200 --> 00:06:22,150
s partou různých možností.

131
00:06:22,150 --> 00:06:26,150
A zřejmě když to změní, když
možnost, která byla vybrána má

132
00:06:26,150 --> 00:06:30,600
změnil, budu volat
některé funkce cs50Info,

133
00:06:30,600 --> 00:06:33,190
a pak budu
předat this.value,

134
00:06:33,190 --> 00:06:35,740
pokud se to týká
, která volba byla vybrána,

135
00:06:35,740 --> 00:06:39,820
a hodnota je jedna z nich zde možnost
hodnota = rovná prázdné, "Blumberg,"

136
00:06:39,820 --> 00:06:42,610
"bowden," "chan," a "Malan."

137
00:06:42,610 --> 00:06:45,090
>> Takže to, co by ve skutečnosti mohly
se stalo tady, když jsem to udělat?

138
00:06:45,090 --> 00:06:48,800
Dobře, pojďme
podívejte se na blumberg.html.

139
00:06:48,800 --> 00:06:51,330

140
00:06:51,330 --> 00:06:53,924
Vypadá to, že je to jen
úryvek nějakého HTML.

141
00:06:53,924 --> 00:06:56,090
A ve skutečnosti to, co jsem doufal,
se stane zde

142
00:06:56,090 --> 00:07:00,020
se budu moci připojit
Tento HTML přímo do mé webové stránky

143
00:07:00,020 --> 00:07:02,970
aniž by bylo nutné znovu načíst
stránku, tak, že když

144
00:07:02,970 --> 00:07:07,510
Vybrat Hannah z rozevíracího
menu, informace o Hannah,

145
00:07:07,510 --> 00:07:11,100
zejména tyto informace
tady v blumberg.html,

146
00:07:11,100 --> 00:07:12,574
je to, co se objeví na stránce.

147
00:07:12,574 --> 00:07:13,740
A já nemám aktualizovat.

148
00:07:13,740 --> 00:07:16,842
A když jsem si vybral někoho jiného,
jejich informace by se ukázal.

149
00:07:16,842 --> 00:07:17,550
Jak to mám udělat?

150
00:07:17,550 --> 00:07:20,290
Opět platí, že to vyžaduje
nám použít nějakou AJAX.

151
00:07:20,290 --> 00:07:22,540
A tak budeme otevřít ajax.js.

152
00:07:22,540 --> 00:07:25,550
A tady je to, že funkce, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Pokud název není nic, jsem se vrátit.

154
00:07:27,410 --> 00:07:31,450
Nebudu dělat nic, pokud
prázdný varianta byla vybrána.

155
00:07:31,450 --> 00:07:35,420
Jinak budu
vytvořte novou XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
A pak budu říkat, když se
readyState změny, tuto funkci volat.

157
00:07:39,020 --> 00:07:43,630
>> A v případě, že je readyState
4 a je stav 200,

158
00:07:43,630 --> 00:07:45,740
tady je trochu
jQuery na řádku 13.

159
00:07:45,740 --> 00:07:50,450
Ale všechno, co dělám se říká,
změnit obsah infodiv

160
00:07:50,450 --> 00:07:57,820
jako něco, co jsem se vrátil jako
odpověď z mého HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Jaký je můj HttpRequest?

162
00:07:59,590 --> 00:08:02,020
No, to je pravda
tady na řádku 18 a 19.

163
00:08:02,020 --> 00:08:08,550
Řádek 18, já jsem v podstatě přípravou
GET požadavek na jméno + .html.

164
00:08:08,550 --> 00:08:11,170
A opět, název zde
argument, že byla

165
00:08:11,170 --> 00:08:14,280
předaný jako parametr cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Takže v podstatě, já jsem kolem v něčí
jméno, což bylo to, že sada voleb

167
00:08:18,460 --> 00:08:22,980
že jsme viděli v
drop-down menu ve formě.

168
00:08:22,980 --> 00:08:24,450
Začínám to jméno.

169
00:08:24,450 --> 00:08:29,530
A já říkám, rád bych, abyste
vyžádejte si pro mě ten file.html,

170
00:08:29,530 --> 00:08:31,020
a pak poslat takové žádosti.

171
00:08:31,020 --> 00:08:34,820
>> A tak, že onreadystatechange se děje
za poslech a čeká a čeká

172
00:08:34,820 --> 00:08:39,460
a čekat, až readyState
je 4, a stav je 200.

173
00:08:39,460 --> 00:08:44,970
Takže je připraven být doručena,
a žádost byla úspěšná.

174
00:08:44,970 --> 00:08:49,500
A pak, pokud je to, že to bude
změnit obsah infodiv

175
00:08:49,500 --> 00:08:53,030
aby text, odpověď, že jsem se vrátil.

176
00:08:53,030 --> 00:08:54,930
>> Takže pojďme se podívat, jak to
by ve skutečnosti mohly fungovat.

177
00:08:54,930 --> 00:08:58,860
Takže budeme přes hlavu na svého prohlížeče
okna, a my se podíváme tady.

178
00:08:58,860 --> 00:09:01,359
Takže pojďme se podívat na
co se děje tady v AJAX.

179
00:09:01,359 --> 00:09:03,400
Tak jsme si vybrat někoho
z drop-down menu.

180
00:09:03,400 --> 00:09:06,079
Takže v tomto případě, pojďme
stačí si vybrat Hannah.

181
00:09:06,079 --> 00:09:08,120
A všimněte si, že Hannah
se změnily,

182
00:09:08,120 --> 00:09:11,030
ale neměl jsem any-- my
Stránka nebyla úplně znovu.

183
00:09:11,030 --> 00:09:12,190
Věci zůstal.

184
00:09:12,190 --> 00:09:13,320
Většina věcí zůstal.

185
00:09:13,320 --> 00:09:14,320
AJAX Testovací nezměnil.

186
00:09:14,320 --> 00:09:16,700
Tlačítko sám, to
drop-down menu se nezměnila.

187
00:09:16,700 --> 00:09:18,260
Ale informace tam udělal změnu.

188
00:09:18,260 --> 00:09:20,218
A v závislosti na tom, jak
Rychle můj počítač se pohybuje,

189
00:09:20,218 --> 00:09:24,430
skutečně mohla vidět, že obsah
zmizí a pak se objeví opravdu

190
00:09:24,430 --> 00:09:24,930
rychle.

191
00:09:24,930 --> 00:09:27,320
To je obsah je
odstraněny z infodiv,

192
00:09:27,320 --> 00:09:29,940
a pak se nahradil s
Nový Asynchronní požadavek.

193
00:09:29,940 --> 00:09:34,410
>> Takže když jsem přepnout se říci,
Rob-- a znovu, podívat se,

194
00:09:34,410 --> 00:09:38,379
a možná budeme ho vidět ve skutečnosti
zmizí a znovu se objeví rychle.

195
00:09:38,379 --> 00:09:38,920
Vidíte to?

196
00:09:38,920 --> 00:09:41,400
Jak to jen odebere pryč,
a pak to znovu naplnit?

197
00:09:41,400 --> 00:09:43,640
To je požadavek AJAX
druh probíhá.

198
00:09:43,640 --> 00:09:46,060
A tak v závislosti na
člověk vybrat, jsem

199
00:09:46,060 --> 00:09:50,690
dělat jiné asynchronní
Požadavek na jiný soubor

200
00:09:50,690 --> 00:09:52,730
že mám na svém serveru.

201
00:09:52,730 --> 00:09:55,550
A obsah mého
infodiv jsou aktualizace,

202
00:09:55,550 --> 00:09:58,457
na základě které z nich jsem zvolil.

203
00:09:58,457 --> 00:10:00,040
Tak to je opravdu všechno, co je na AJAX.

204
00:10:00,040 --> 00:10:04,090
To nám umožňuje, aby se tyto asynchronní
Žádosti, aktualizace na stránku.

205
00:10:04,090 --> 00:10:06,450
Aniž by bylo nutné
aktualizovat celou stránku,

206
00:10:06,450 --> 00:10:08,520
budeme mít nový
obsah od ní tím, že

207
00:10:08,520 --> 00:10:11,170
nový čerstvý požadavek na server.

208
00:10:11,170 --> 00:10:13,420
A tak, naše stránky se mohou stát
trochu dynamičtější.

209
00:10:13,420 --> 00:10:15,128
>> A jak jsme si více
a více pokročilé, vás

210
00:10:15,128 --> 00:10:17,700
mohl dostat věci jako
řekněme, e-mailovou schránku,

211
00:10:17,700 --> 00:10:19,850
kde nemusíte nic dělat.

212
00:10:19,850 --> 00:10:22,560
Nemusíte klepnout na
drop-down menu nebo klikněte na cokoliv,

213
00:10:22,560 --> 00:10:25,920
a najednou, váš nejnovější
email se objeví v horní části.

214
00:10:25,920 --> 00:10:27,840
To je také jen žádost Ajax.

215
00:10:27,840 --> 00:10:30,460
Ajax žádá o vaše
serveru, e-mailový server,

216
00:10:30,460 --> 00:10:33,360
odeslat přes veškeré informace
o své nejnovější e-maily,

217
00:10:33,360 --> 00:10:38,110
a měnící se to, co vidíte na
Obrazovka bude vaše nejnovější soubor e-mailů.

218
00:10:38,110 --> 00:10:41,080
A máte-li nějaký nový v
tam, pak obsah tohoto div

219
00:10:41,080 --> 00:10:44,580
se změní tak, aby odrážely
aktualizovaný obsah.

220
00:10:44,580 --> 00:10:45,480
Jsem Doug Lloyd.

221
00:10:45,480 --> 00:10:47,500
To je CS50.

222
00:10:47,500 --> 00:10:49,229