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

2
00:00:00,500 --> 00:00:04,810
[Prehrávanie hudby]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Takže ešte jeden
druh predstavou, že

4
00:00:06,940 --> 00:00:12,120
druh spadá pod záštitou
JavaScript je niečo, čo nazýva AJAX.

5
00:00:12,120 --> 00:00:15,310
Až do tohto bodu, otázky
interakcie s JavaScriptu

6
00:00:15,310 --> 00:00:17,727
bola obmedzená na tlačiť
Tlačidlo a niečo stane.

7
00:00:17,727 --> 00:00:19,560
A špecificky,
niečo, čo sa stane,

8
00:00:19,560 --> 00:00:22,950
sú naše webové stránky vyzerať a cítiť sa zmeny.

9
00:00:22,950 --> 00:00:23,450
Je to tak?

10
00:00:23,450 --> 00:00:26,540
Rovnako ako najmä, v
Document Object Model video,

11
00:00:26,540 --> 00:00:29,060
Zmenil som farbu pozadia.

12
00:00:29,060 --> 00:00:33,240
Ale keď som to urobil, som nemal
robiť žiadne zvláštne požiadavky navyše.

13
00:00:33,240 --> 00:00:36,800
Nemusel som žiadať, aby
server mi poslať novú stránku.

14
00:00:36,800 --> 00:00:39,620
Práve som zmenil to, čo už som mal.

15
00:00:39,620 --> 00:00:42,245
Nemusel som znovu načítať mojej stránky,
a veci definitívne zmenilo,

16
00:00:42,245 --> 00:00:43,760
tak to je skvelé.

17
00:00:43,760 --> 00:00:48,400
Ale je tu určite nejaké
manuálny interakcie s užívateľom zapojiť.

18
00:00:48,400 --> 00:00:53,140
AJAX je v pohode technika, ktorá umožňuje
nám k aktualizácii obsahu stránky,

19
00:00:53,140 --> 00:00:55,750
a nie len vzhľad a
pocit, bez prekládky.

20
00:00:55,750 --> 00:00:58,610
>> A zvlášť, keď som
hovoria, aktualizácie obsahu stránky,

21
00:00:58,610 --> 00:01:01,990
Nehovorím, že by sme prepísať
stránky pomocou JavaScriptu.

22
00:01:01,990 --> 00:01:06,560
Hovorím, že sme vlastne požadovať
Viac informácií zo servera

23
00:01:06,560 --> 00:01:08,640
bez nášho strana museli znova načítať.

24
00:01:08,640 --> 00:01:10,850
>> Teraz, keď druh trochou
pokročilejšie techniku

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

26
00:01:11,950 --> 00:01:13,720
Budeme mať nejaké interakciu.

27
00:01:13,720 --> 00:01:17,750
Ale keď budeme robiť, ja budem
takže požiadavky na webový server.

28
00:01:17,750 --> 00:01:21,140
V tomto prípade, len to, čo je
beží moje webový server Apache.

29
00:01:21,140 --> 00:01:25,010
Budem robiť ďalšie sa
Žiadosti zatiaľ čo ja som na návšteve webovej stránky,

30
00:01:25,010 --> 00:01:26,890
ale moja strana nebude aktualizovať.

31
00:01:26,890 --> 00:01:30,000
>> Je to len bude
asynchrónne aktualizovať svoje stránky.

32
00:01:30,000 --> 00:01:31,840
A to je v skutočnosti,
čo je skratka pre 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 ďalší druh značenie
jazyk, a môžete triediť podľa

35
00:01:37,910 --> 00:01:39,680
myslieť na to, rovnako ako HTML.

36
00:01:39,680 --> 00:01:42,990
Nie je to úplne to isté, ale
je to v podstate len o značkovací jazyk.

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

38
00:01:47,770 --> 00:01:50,590
>> Tak, aby bolo možné použiť túto
AJAX technique-- AJAX

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

40
00:01:52,230 --> 00:01:55,300
Je to len niečo ako
sada techniques-- my

41
00:01:55,300 --> 00:01:57,870
musieť vytvoriť zvláštne
JavaScript objekt, ktorý

42
00:01:57,870 --> 00:02:00,689
sa nazýva XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Teraz, je to veľmi jednoduché, ako to urobiť.

44
00:02:01,980 --> 00:02:04,550
Práve sme sa povedať, var, bez ohľadu
chceme volať tento objekt,

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

46
00:02:07,030 --> 00:02:11,050
A teraz sme teraz získať
AJAX druh objektu,

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

48
00:02:14,370 --> 00:02:18,360
nám asynchrónne aktualizovať našu stránku.

49
00:02:18,360 --> 00:02:23,100
>> Potom, čo sme dostali tento nový
objekt, tento XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
Musíme niečo urobiť, aby jeho
onreadystatechange správanie.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
správanie je naozaj len

52
00:02:30,360 --> 00:02:34,080
keď si podať žiadosť
na webovú stránku, stránka

53
00:02:34,080 --> 00:02:35,880
prechádza niekoľkých krokov.

54
00:02:35,880 --> 00:02:37,370
Po prvé, žiadosť nebola odoslaná.

55
00:02:37,370 --> 00:02:39,860
Potom, žiadosť bola
poslal, ale nie konal.

56
00:02:39,860 --> 00:02:41,580
Potom žiadosť bola konal.

57
00:02:41,580 --> 00:02:43,680
Potom je požiadavka
byť poslaný späť k vám.

58
00:02:43,680 --> 00:02:46,930
>> Potom, je požiadavka
plne naložené na vašej stránke.

59
00:02:46,930 --> 00:02:48,640
To sú rôzne stavy.

60
00:02:48,640 --> 00:02:53,890
A preto musíme nastaviť otázky
Nový objekt XMLHttpRequest

61
00:02:53,890 --> 00:02:58,740
k zmene, keď pripravené zmeny stavu.

62
00:02:58,740 --> 00:03:01,925
A zvyčajne, my to tým,
definovanie anonymný funkciu, ktorá

63
00:03:01,925 --> 00:03:04,490
Sme oboznámení s od
JavaScript teraz, že

64
00:03:04,490 --> 00:03:09,840
je volaná pri stave pripravenosti zmeny.

65
00:03:09,840 --> 00:03:11,340
Je to naozaj nič viac než to.

66
00:03:11,340 --> 00:03:14,340
Sme jednoducho bude definovanie
Funkcie anonymný, tak trochu páči, čo

67
00:03:14,340 --> 00:03:16,440
sme robili v
JavaScript, kde by sme

68
00:03:16,440 --> 00:03:18,750
majú anonymné funkcie
reagovať na on kliknutie,

69
00:03:18,750 --> 00:03:23,230
alebo keď sme robili mapu
v poli rôzne objekty.

70
00:03:23,230 --> 00:03:25,220
>> Niečo sa stalo, keď
niečo klepli.

71
00:03:25,220 --> 00:03:28,810
V tomto prípade, je to proste niečo, čo je
deje, keď stav našej stránke

72
00:03:28,810 --> 00:03:30,160
zmeny.

73
00:03:30,160 --> 00:03:32,730
Existujú dva ďalšie vlastnosti
ktoré sú nejako of-- že to nie je

74
00:03:32,730 --> 00:03:35,524
len vlastnosti, ktoré sú
inherentnú XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
ale sú to tie dosť dôležité.

76
00:03:36,940 --> 00:03:39,815
Je tu niečo, čo nazýva readyState,
ktorý, ako asi tušíte,

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

78
00:03:41,750 --> 00:03:44,250
Je to vlastne vám povie,
čo readyState je.

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

80
00:03:46,289 --> 00:03:48,080
a oni nejako hrubo
zodpovedajú tomu, čo

81
00:03:48,080 --> 00:03:50,030
Práve som hovoril asi pred druhým.

82
00:03:50,030 --> 00:03:53,100
>> A potom stav, ktorý
dúfajme, že ak išlo všetko v poriadku,

83
00:03:53,100 --> 00:03:56,710
je 200, čo je skratka
pre, samozrejme, OK,

84
00:03:56,710 --> 00:03:58,330
ktoré ste oboznámení s z HTTP.

85
00:03:58,330 --> 00:04:03,735
Takže dúfame, že náš štát pripravený
sú štyri, a naše stav je 200.

86
00:04:03,735 --> 00:04:07,940
A ak sa náš stave pripravenosti
sú štyri, a odozva

87
00:04:07,940 --> 00:04:11,490
je pripravený na uvedenie na
strana, a stav je 200,

88
00:04:11,490 --> 00:04:13,580
sme boli schopní urobiť
všetko úspešne,

89
00:04:13,580 --> 00:04:17,209
Teraz môžeme asynchrónne
aktualizovať našu stránku

90
00:04:17,209 --> 00:04:21,730
aby bolo nutné znovu načítať
celý obsah dohody.

91
00:04:21,730 --> 00:04:27,710
>> Potom, čo ste definovali, čo sa stane
k správaniu onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
a my sme overil, že readyState
je 4 a status je 200,

93
00:04:31,020 --> 00:04:33,900
potom všetko, čo potrebujete urobiť, je
otvárajú asynchrónne

94
00:04:33,900 --> 00:04:38,530
Žiadosť, ktorá sa len robiť
HTTP všeobecne GET požiadavku.

95
00:04:38,530 --> 00:04:41,950
Proste to robiť programovo,
namiesto prostredníctvom nášho webovom prehliadači.

96
00:04:41,950 --> 00:04:43,786
A potom sme sa, že žiadosť poslať.

97
00:04:43,786 --> 00:04:45,660
Takže to, čo robí to možno
vyzerať v kontexte?

98
00:04:45,660 --> 00:04:49,790
Tak tu je funkcia, ktorá
sa zaoberá žiadosťami Ajax.

99
00:04:49,790 --> 00:04:50,290
OK?

100
00:04:50,290 --> 00:04:52,430
A ja som povedal svojvoľne
prijíma argument.

101
00:04:52,430 --> 00:04:55,550
A to akýmsi
Všeobecne kostra tu.

102
00:04:55,550 --> 00:05:00,890
Na samom počiatku, dostaneme
Sami nový XMLHttpRequest objekt.

103
00:05:00,890 --> 00:05:03,830
Potom musím nastaviť
onreadystatechange správanie.

104
00:05:03,830 --> 00:05:06,970
A tak som chcel povedať,
keď readyState zmeny,

105
00:05:06,970 --> 00:05:10,110
Chcem, aby si volanie tejto funkcie.

106
00:05:10,110 --> 00:05:12,570
>> Čo sa chystá požiadať
otázka, pokiaľ readyState

107
00:05:12,570 --> 00:05:17,240
4 je, v prípade, že k zmene readyState
, Že je 4, a stav bol 200,

108
00:05:17,240 --> 00:05:20,799
takže sme mali úspešnú žiadosť, I
chcete urobiť niečo na stránku.

109
00:05:20,799 --> 00:05:22,590
A budeme sa pozrieť
na príklad toho, čo

110
00:05:22,590 --> 00:05:25,010
, Že niečo, čo by mohlo byť v druhom.

111
00:05:25,010 --> 00:05:27,830
Tak, teraz som definované
môj anonymný funkcie,

112
00:05:27,830 --> 00:05:31,340
moja funkcia reakcie kedykoľvek
readyState zmeny.

113
00:05:31,340 --> 00:05:37,120
>> Takže už stačí len otvoriť
požiadať, pomocou metódy Open.

114
00:05:37,120 --> 00:05:39,160
A potom som tú žiadosť poslať.

115
00:05:39,160 --> 00:05:41,980
A poďme sa pozrieť na
Konkrétnejší príklad

116
00:05:41,980 --> 00:05:46,290
čoho AJAX môžete robiť na našich webových stránkach.

117
00:05:46,290 --> 00:05:49,740
Tak som tu veľmi jednoduchý
stránka s názvom home.html.

118
00:05:49,740 --> 00:05:53,620
A ja mám informačný pokračuje
tu a nejaký drop-down menu of.

119
00:05:53,620 --> 00:05:55,390
>> A budeme znovu to počas jednej sekundy.

120
00:05:55,390 --> 00:05:59,150
Ale myslím, že by sme teraz mali vziať
pozrite sa na skutočné zdrojového kódu.

121
00:05:59,150 --> 00:06:01,080
A tak, budem otvárať home.html.

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

123
00:06:03,490 --> 00:06:04,740
A uvidíme, čo sa deje.

124
00:06:04,740 --> 00:06:08,240
Takže hor sa na samom vrchole tu, mám
niektorí JavaScript veci, čo sa deje.

125
00:06:08,240 --> 00:06:12,470
>> A tu, ja majú zjavne
div, ktorého číslo je infodiv,

126
00:06:12,470 --> 00:06:15,290
a niektoré informácie
sa chystá ísť tam.

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

128
00:06:16,374 --> 00:06:18,081
A vnútri tejto
forma, mám niečo

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

130
00:06:20,200 --> 00:06:22,150
s partiou rôznych možností.

131
00:06:22,150 --> 00:06:26,150
A zrejme keď to zmení, keď
možnosť, ktorá bola vybraná má

132
00:06:26,150 --> 00:06:30,600
zmenil, budem volať
niektoré funkcie cs50Info,

133
00:06:30,600 --> 00:06:33,190
a potom budem
odovzdať this.value,

134
00:06:33,190 --> 00:06:35,740
ak sa to týka
, Ktorá voľba bola vybraná,

135
00:06:35,740 --> 00:06:39,820
a hodnota je jedna z nich tu možnosť
hodnota = rovná prázdne, "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, čo by v skutočnosti mohli
sa stalo tu, keď som to urobiť?

138
00:06:45,090 --> 00:06:48,800
Dobre, poďme
pozrite sa na blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Vyzerá to, že je to len
úryvok nejakého HTML.

141
00:06:53,924 --> 00:06:56,090
A v skutočnosti to, čo som dúfal,
sa stane tu

142
00:06:56,090 --> 00:07:00,020
sa budem môcť pripojiť
Tento HTML priamo do mojej webovej stránky

143
00:07:00,020 --> 00:07:02,970
aby bolo nutné znovu načítať
stránku, tak, že keď

144
00:07:02,970 --> 00:07:07,510
Vybrať Hannah z otváracieho
menu, informácie o Hannah,

145
00:07:07,510 --> 00:07:11,100
najmä tieto informácie
tu v blumberg.html,

146
00:07:11,100 --> 00:07:12,574
je to, čo sa objaví na stránke.

147
00:07:12,574 --> 00:07:13,740
A ja nemám aktualizovať.

148
00:07:13,740 --> 00:07:16,842
A keď som si vybral niekoho iného,
ich informácie by sa ukázal.

149
00:07:16,842 --> 00:07:17,550
Ako to mám urobiť?

150
00:07:17,550 --> 00:07:20,290
Opäť platí, že to vyžaduje
nám použiť nejakú AJAX.

151
00:07:20,290 --> 00:07:22,540
A tak budeme otvoriť ajax.js.

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

153
00:07:25,550 --> 00:07:27,410
Ak názov nie je nič, som sa vrátiť.

154
00:07:27,410 --> 00:07:31,450
Nebudem robiť nič, ak
prázdny varianta bola vybraná.

155
00:07:31,450 --> 00:07:35,420
Inak budem
vytvorte novú XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
A potom budem hovoriť, keď sa
readyState zmeny, túto funkciu volať.

157
00:07:39,020 --> 00:07:43,630
>> A v prípade, že je readyState
4 a je stav 200,

158
00:07:43,630 --> 00:07:45,740
tu je trochu
jQuery na riadku 13.

159
00:07:45,740 --> 00:07:50,450
Ale všetko, čo robím sa hovorí,
zmeniť obsah infodiv

160
00:07:50,450 --> 00:07:57,820
ako niečo, čo som sa vrátil ako
odpoveď z môjho HttpRequest.

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

162
00:07:59,590 --> 00:08:02,020
No, to je pravda
tu na riadku 18 a 19.

163
00:08:02,020 --> 00:08:08,550
Riadok 18, ja som v podstate prípravou
GET požiadavka na meno + .html.

164
00:08:08,550 --> 00:08:11,170
A opäť, názov tu
argument, že bola

165
00:08:11,170 --> 00:08:14,280
odovzdaný ako parameter cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Takže v podstate, ja som okolo v niečí
meno, čo bolo to, že sada volieb

167
00:08:18,460 --> 00:08:22,980
že sme videli v
drop-down menu vo forme.

168
00:08:22,980 --> 00:08:24,450
Začínam to meno.

169
00:08:24,450 --> 00:08:29,530
A ja hovorím, rád by som, aby ste
vyžiadajte si pre mňa ten file.html,

170
00:08:29,530 --> 00:08:31,020
a potom poslať takejto žiadosti.

171
00:08:31,020 --> 00:08:34,820
>> A tak, že onreadystatechange sa deje
za počúvanie a čaká a čaká

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

173
00:08:39,460 --> 00:08:44,970
Takže je pripravený byť doručená,
a žiadosť bola úspešná.

174
00:08:44,970 --> 00:08:49,500
A potom, ak je to, že to bude
zmeniť obsah infodiv

175
00:08:49,500 --> 00:08:53,030
aby text, odpoveď, že som sa vrátil.

176
00:08:53,030 --> 00:08:54,930
>> Takže poďme sa pozrieť, ako to
by v skutočnosti mohli fungovať.

177
00:08:54,930 --> 00:08:58,860
Takže budeme cez hlavu na svojho prehliadača
okná, a my sa pozrieme tu.

178
00:08:58,860 --> 00:09:01,359
Takže poďme sa pozrieť na
čo sa deje tu v AJAX.

179
00:09:01,359 --> 00:09:03,400
Tak sme si vybrať niekoho
z drop-down menu.

180
00:09:03,400 --> 00:09:06,079
Takže v tomto prípade, poďme
stačí si vybrať Hannah.

181
00:09:06,079 --> 00:09:08,120
A všimnite si, že Hannah
sa zmenili,

182
00:09:08,120 --> 00:09:11,030
ale nemal som any-- my
Stránka nebola úplne znovu.

183
00:09:11,030 --> 00:09:12,190
Veci zostal.

184
00:09:12,190 --> 00:09:13,320
Väčšina vecí zostal.

185
00:09:13,320 --> 00:09:14,320
AJAX Testovacie nezmenil.

186
00:09:14,320 --> 00:09:16,700
Tlačidlo sám, to
drop-down menu sa nezmenila.

187
00:09:16,700 --> 00:09:18,260
Ale informácie tam urobil zmenu.

188
00:09:18,260 --> 00:09:20,218
A v závislosti na tom, ako
Rýchlo môj počítač sa pohybuje,

189
00:09:20,218 --> 00:09:24,430
skutočne mohla vidieť, že obsah
zmizne a potom sa objaví naozaj

190
00:09:24,430 --> 00:09:24,930
rýchlo.

191
00:09:24,930 --> 00:09:27,320
To je obsah je
odstránené z infodiv,

192
00:09:27,320 --> 00:09:29,940
a potom sa nahradil s
Nový Asynchrónne požiadavku.

193
00:09:29,940 --> 00:09:34,410
>> Takže keď som prepnúť sa povedať,
Rob-- a znovu, pozrieť sa,

194
00:09:34,410 --> 00:09:38,379
a možno budeme ho vidieť v skutočnosti
zmizne a znova sa objaví rýchlo.

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

196
00:09:38,920 --> 00:09:41,400
Ako to len odoberie preč,
a potom to znova naplniť?

197
00:09:41,400 --> 00:09:43,640
To je požiadavka AJAX
druh prebieha.

198
00:09:43,640 --> 00:09:46,060
A tak v závislosti na
človek vybrať, som

199
00:09:46,060 --> 00:09:50,690
robiť iné asynchrónne
Požiadavka na iný súbor

200
00:09:50,690 --> 00:09:52,730
že mám na svojom serveri.

201
00:09:52,730 --> 00:09:55,550
A obsah môjho
infodiv sú aktualizácie,

202
00:09:55,550 --> 00:09:58,457
na základe ktorej z nich som zvolil.

203
00:09:58,457 --> 00:10:00,040
Tak to je naozaj všetko, čo je na AJAX.

204
00:10:00,040 --> 00:10:04,090
To nám umožňuje, aby sa tieto asynchrónne
Žiadosti, aktualizácie na stránku.

205
00:10:04,090 --> 00:10:06,450
Aby bolo nutné
aktualizovať celú stránku,

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

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

208
00:10:11,170 --> 00:10:13,420
A tak, naše stránky sa môžu stať
trochu dynamickejšie.

209
00:10:13,420 --> 00:10:15,128
>> A ako sme si viac
a viac pokročilých, vás

210
00:10:15,128 --> 00:10:17,700
mohol dostať veci ako
povedzme, e-mailovú schránku,

211
00:10:17,700 --> 00:10:19,850
kde nemusíte nič robiť.

212
00:10:19,850 --> 00:10:22,560
Nemusíte kliknúť na
drop-down menu alebo kliknite na čokoľvek,

213
00:10:22,560 --> 00:10:25,920
a zrazu, váš najnovší
email sa objaví v hornej časti.

214
00:10:25,920 --> 00:10:27,840
To je tiež len žiadosť Ajax.

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

216
00:10:30,460 --> 00:10:33,360
odoslať cez všetky informácie
o svoje najnovšie e-maily,

217
00:10:33,360 --> 00:10:38,110
a meniace sa to, čo vidíte na
Obrazovka bude vaša najnovší súbor e-mailov.

218
00:10:38,110 --> 00:10:41,080
A ak máte nejaký nový v
tam, potom obsah tohto div

219
00:10:41,080 --> 00:10:44,580
sa zmení tak, aby odrážali
aktualizovaný obsah.

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

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

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