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

2
00:00:00,500 --> 00:00:04,810
[Muusika mängib]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Nii et üks rohkem
omamoodi arusaam, et

4
00:00:06,940 --> 00:00:12,120
omamoodi jääb katuse alla
JavaScript on midagi, mida nimetatakse AJAX.

5
00:00:12,120 --> 00:00:15,310
Kuni selle hetkeni, meie
suhtlemist JavaScript

6
00:00:15,310 --> 00:00:17,727
on piiratud suruda
nuppu ja midagi juhtub.

7
00:00:17,727 --> 00:00:19,560
Ja konkreetsemalt
midagi, mis juhtub

8
00:00:19,560 --> 00:00:22,950
Meie veebilehed ilme ja muutusi.

9
00:00:22,950 --> 00:00:23,450
Õigus?

10
00:00:23,450 --> 00:00:26,540
Nagu eelkõige selles
dokumendi objekti mudelit video,

11
00:00:26,540 --> 00:00:29,060
Muutsin tausta värvi.

12
00:00:29,060 --> 00:00:33,240
Aga kui ma tegin, et mul ei olnud
teha mingeid erilisi ekstra taotlusi.

13
00:00:33,240 --> 00:00:36,800
Ma ei pea taotlema
server saata mulle uue lehekülje.

14
00:00:36,800 --> 00:00:39,620
Kolisin just see, mida ma juba.

15
00:00:39,620 --> 00:00:42,245
Ma ei pea uuesti minu leheküljel
ja asjad kindlasti muutunud,

16
00:00:42,245 --> 00:00:43,760
nii et on hea.

17
00:00:43,760 --> 00:00:48,400
Aga seal on kindlasti mõned
Lae kasutaja interaktsiooni seotud.

18
00:00:48,400 --> 00:00:53,140
AJAX on lahe meetod, mis võimaldab
meil uuendada lehe sisu,

19
00:00:53,140 --> 00:00:55,750
ja mitte ainult välimuse ja
tunnen, ilma pealelaadimisel.

20
00:00:55,750 --> 00:00:58,610
>> Ja just siis, kui ma
öelda ajakohastamine lehe sisu,

21
00:00:58,610 --> 00:01:01,990
Ma ei ütle me kirjutada
lehe JavaScripti.

22
00:01:01,990 --> 00:01:06,560
Ma räägin me tegelikult taotlevad
Lisateavet serverist

23
00:01:06,560 --> 00:01:08,640
ilma meie leheküljel on uuesti laadida.

24
00:01:08,640 --> 00:01:10,850
>> Nüüd, justkui natuke
rohkem arenenud tehnikat

25
00:01:10,850 --> 00:01:11,950
et me ei kavatse rääkida
umbes selle video.

26
00:01:11,950 --> 00:01:13,720
Me läheme mõned suhtlemist.

27
00:01:13,720 --> 00:01:17,750
Aga kui me teeme, ma lähen
muutes taotlused veebiserver.

28
00:01:17,750 --> 00:01:21,140
Sel juhul just see, mida on
töötab minu Apache veebiserver.

29
00:01:21,140 --> 00:01:25,010
Ma lähen täiendavate
taotlusi kui ma külastate veebilehte,

30
00:01:25,010 --> 00:01:26,890
kuid minu leheküljel ei värskendada.

31
00:01:26,890 --> 00:01:30,000
>> See lihtsalt läheb
asünkroonselt uuendada oma lehele.

32
00:01:30,000 --> 00:01:31,840
Ja see on tegelikult
mis AJAX tähistab,

33
00:01:31,840 --> 00:01:35,400
on Asynchronous JavaScript ja XML.

34
00:01:35,400 --> 00:01:37,910
XML on teine ​​selline juurdehindlus
keel ja saate sortida kohta

35
00:01:37,910 --> 00:01:39,680
ma arvan et nagu HTML.

36
00:01:39,680 --> 00:01:42,990
See ei ole päris sama asi, kuid
see on põhimõtteliselt ainult märgistuskeel.

37
00:01:42,990 --> 00:01:47,770
Nii et see on asünkroonne
JavaScript ja märgistuskeel.

38
00:01:47,770 --> 00:01:50,590
>> Nii, et kasutada seda
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
ei ole eraldi programmeerimiskeelt.

40
00:01:52,230 --> 00:01:55,300
See on lihtsalt omamoodi
komplekt techniques-- me

41
00:01:55,300 --> 00:01:57,870
on vaja luua spetsiaalne
JavaScript objekti, mis

42
00:01:57,870 --> 00:02:00,689
nimetatakse XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Nüüd, see on väga lihtne teha.

44
00:02:01,980 --> 00:02:04,550
Me lihtsalt öelda var, mida iganes
tahame nimetame seda objekti,

45
00:02:04,550 --> 00:02:07,030
võrdub uue XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
Ja nüüd me oleme nüüd saanud
AJAX omamoodi objekti,

47
00:02:11,050 --> 00:02:14,370
või XMLHttpRequest
objekt, mis võimaldab

48
00:02:14,370 --> 00:02:18,360
meil asünkroonselt uuendada meie lehel.

49
00:02:18,360 --> 00:02:23,100
>> Pärast oleme saanud selle uue
objekt, seda XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
Me peame midagi tegema, et oma
onreadystatechange käitumist.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
käitumine on tõesti ainult

52
00:02:30,360 --> 00:02:34,080
kui teete taotluse
web leht,

53
00:02:34,080 --> 00:02:35,880
läbib mitmeid samme.

54
00:02:35,880 --> 00:02:37,370
Esiteks taotlus ei saadetud.

55
00:02:37,370 --> 00:02:39,860
Siis, kui taotlus on
saatis, kuid ei tegutseta.

56
00:02:39,860 --> 00:02:41,580
Siis taotlusel on tegutsenud.

57
00:02:41,580 --> 00:02:43,680
Siis taotlus on
saadetakse sulle tagasi.

58
00:02:43,680 --> 00:02:46,930
>> Seejärel taotlus on
täielikult laetud lehel.

59
00:02:46,930 --> 00:02:48,640
Need on eri riikides.

60
00:02:48,640 --> 00:02:53,890
Ja nii on meil vaja, et määrata oma
Uue XMLHttpRequest objekti

61
00:02:53,890 --> 00:02:58,740
muuta, kui valmis seisukord muutusi.

62
00:02:58,740 --> 00:03:01,925
Ja tavaliselt, me teeme seda
määratlemisel anonüümne funktsioon, mis

63
00:03:01,925 --> 00:03:04,490
me oleme tuttavad on
JavaScript nüüd, et

64
00:03:04,490 --> 00:03:09,840
kutsutakse välja valmis seisukord muutusi.

65
00:03:09,840 --> 00:03:11,340
See ei ole tõesti palju rohkem.

66
00:03:11,340 --> 00:03:14,340
Me lihtsalt kavatse määratlemisel
anonüümne funktsioon, omamoodi nagu mida

67
00:03:14,340 --> 00:03:16,440
me teeme ka
JavaScript kui oleksime

68
00:03:16,440 --> 00:03:18,750
on anonüümne funktsioon
Vastata klikkimise,

69
00:03:18,750 --> 00:03:23,230
või kui me teeme kaart
erinevate objektide massiivi.

70
00:03:23,230 --> 00:03:25,220
>> Midagi juhtus, kui
midagi klõpsatud.

71
00:03:25,220 --> 00:03:28,810
Sel juhul on see lihtsalt midagi
juhtub siis, kui riik meie lehel

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

73
00:03:30,160 --> 00:03:32,730
On kaks muid omadusi
mis on omamoodi of-- nad ei ole

74
00:03:32,730 --> 00:03:35,524
ainus omadused, mis on
omane XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
kuid nad on üsna olulisemad.

76
00:03:36,940 --> 00:03:39,815
Seal on midagi, mida nimetatakse readyState,
mis nii saab ilmselt arvan,

77
00:03:39,815 --> 00:03:41,750
on seotud onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
See tegelikult näitab teile
mida readyState on.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3 ja 4 on
võimalusi seal,

80
00:03:46,289 --> 00:03:48,080
ja nad omamoodi umbes
vasta sellele, mida

81
00:03:48,080 --> 00:03:50,030
Ma lihtsalt räägin teine ​​tagasi.

82
00:03:50,030 --> 00:03:53,100
>> Ja siis seisund, mis
loodetavasti kui kõik läks OK,

83
00:03:53,100 --> 00:03:56,710
on 200, mis on lühike
jaoks muidugi OK,

84
00:03:56,710 --> 00:03:58,330
mis me oleme tuttavad http.

85
00:03:58,330 --> 00:04:03,735
Nii me loodame, et meie valmis seisukord
on neli ja seis on 200.

86
00:04:03,735 --> 00:04:07,940
Ja kui meie valmis seisukord
on neli ja vastused

87
00:04:07,940 --> 00:04:11,490
on valmis panna
leht ja staatus on 200,

88
00:04:11,490 --> 00:04:13,580
suutsime teha
kõik edukalt,

89
00:04:13,580 --> 00:04:17,209
Nüüd saame asünkroonselt
uuendada meie lehel

90
00:04:17,209 --> 00:04:21,730
ilma reload
kogu sisu seda.

91
00:04:21,730 --> 00:04:27,710
>> Pärast oleme määratletud, mis juhtub
et onreadystatechange käitumist,

92
00:04:27,710 --> 00:04:31,020
ja me oleme kontrollinud, et readyState
on 4 ja staatus on 200,

93
00:04:31,020 --> 00:04:33,900
siis kõik me peame tegema, on
avada asünkroonne

94
00:04:33,900 --> 00:04:38,530
taotluse, mis on lihtsalt tegemist
HTTP üldiselt GET taotluse.

95
00:04:38,530 --> 00:04:41,950
Lihtsalt tee seda programmiliselt,
selle asemel, et meie veebilehitsejat.

96
00:04:41,950 --> 00:04:43,786
Ja siis me saadame selle taotluse.

97
00:04:43,786 --> 00:04:45,660
Mida see võibolla
nägema kontekstis?

98
00:04:45,660 --> 00:04:49,790
Nii et siin on funktsioon, mis
tegeleb AJAX taotlusi.

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

100
00:04:50,290 --> 00:04:52,430
Ja ma olen meelevaldselt ütles
ta võtab argumendiks.

101
00:04:52,430 --> 00:04:55,550
Ja see omamoodi
üldiselt skelett siin.

102
00:04:55,550 --> 00:05:00,890
Alguses, saame
ise uue XMLHttpRequest objekti.

103
00:05:00,890 --> 00:05:03,830
Siis ma pean seada
onreadystatechange käitumist.

104
00:05:03,830 --> 00:05:06,970
Ja nii ma ütlen
kui readyState muudatusi,

105
00:05:06,970 --> 00:05:10,110
Ma tahan, et sa kutsuda seda funktsiooni.

106
00:05:10,110 --> 00:05:12,570
>> Milline saab küsida
küsimus, kui readyState

107
00:05:12,570 --> 00:05:17,240
on 4, kui readyState on muutunud
olema 4 ja status oli 200,

108
00:05:17,240 --> 00:05:20,799
nii et meil oli edukas taotluse, ma
tahad teha midagi lehel.

109
00:05:20,799 --> 00:05:22,590
Ja me vaatame
kell näide sellest, mida

110
00:05:22,590 --> 00:05:25,010
et midagi võib olla teises.

111
00:05:25,010 --> 00:05:27,830
Niisiis, nüüd olen määratletud
minu anonüümne funktsioon,

112
00:05:27,830 --> 00:05:31,340
minu vastus funktsiooni, kui
readyState muutusi.

113
00:05:31,340 --> 00:05:37,120
>> Nii ma siis lihtsalt vaja avada
nõuda, kasutades avatud.

114
00:05:37,120 --> 00:05:39,160
Ja siis, ma saadan selle taotluse.

115
00:05:39,160 --> 00:05:41,980
Ja võtame pilk
konkreetsem näide

116
00:05:41,980 --> 00:05:46,290
mida AJAX saab teha meie veebilehti.

117
00:05:46,290 --> 00:05:49,740
Nii et mul on siin väga lihtne
leheküljel nimetatakse home.html.

118
00:05:49,740 --> 00:05:53,620
Ja mul on info läheb
siin ja mingi rippmenüüst.

119
00:05:53,620 --> 00:05:55,390
>> Ja me vaadata seda üks teine.

120
00:05:55,390 --> 00:05:59,150
Aga ma arvan, et me peaksime nüüd
vaadata lähtekoodi.

121
00:05:59,150 --> 00:06:01,080
Ja nii ma avada home.html.

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

123
00:06:03,490 --> 00:06:04,740
Ja me näeme, mis toimub.

124
00:06:04,740 --> 00:06:08,240
Nii up tipus siin, mul on
mõned JavaScript asju, mis toimub.

125
00:06:08,240 --> 00:06:12,470
>> Ja siin, ma ilmselt ei
div kelle ID on infodiv,

126
00:06:12,470 --> 00:06:15,290
ja mõned info
läheb sinna minna.

127
00:06:15,290 --> 00:06:16,374
Ja siis ma pean seda vormi.

128
00:06:16,374 --> 00:06:18,081
Ja sees selle
kujul, mul on midagi

129
00:06:18,081 --> 00:06:20,200
nimetatakse Select, mis
on lihtsalt rippmenüüst

130
00:06:20,200 --> 00:06:22,150
hunnik erinevaid võimalusi.

131
00:06:22,150 --> 00:06:26,150
Ja ilmselt, kui see muutub, kui
variant, mis on valitud on

132
00:06:26,150 --> 00:06:30,600
muutunud, ma lähen kutsun
mõned funktsiooni cs50Info,

133
00:06:30,600 --> 00:06:33,190
ja siis ma lähen
pass this.value,

134
00:06:33,190 --> 00:06:35,740
kus see viitab
mis on valitud võimalus,

135
00:06:35,740 --> 00:06:39,820
ja väärtus on üks neist siin, võimalus
väärtus = võrdub tühi, "Blumberg,"

136
00:06:39,820 --> 00:06:42,610
"Bowden," "chan" ja "Humala."

137
00:06:42,610 --> 00:06:45,090
>> Mis võiks tegelikult
juhtub siin, kui ma seda teen?

138
00:06:45,090 --> 00:06:48,800
Noh, võtame
vaata blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Paistab, et see on lihtsalt
väljavõtte mõned HTML.

141
00:06:53,924 --> 00:06:56,090
Ja tegelikult, mida ma lootsin
juhtub siin

142
00:06:56,090 --> 00:07:00,020
on ma lähen, et oleks võimalik ühendada
Selle HTML otse minu veebileht

143
00:07:00,020 --> 00:07:02,970
ilma reload
Lehe selline, et kui

144
00:07:02,970 --> 00:07:07,510
Ma valin Hannah alates rippmenüüst
Menüüs infot Hannah,

145
00:07:07,510 --> 00:07:11,100
eelkõige seda teavet
siin blumberg.html,

146
00:07:11,100 --> 00:07:12,574
on see, mis ilmub lehel.

147
00:07:12,574 --> 00:07:13,740
Ja ma ei pea värskenda.

148
00:07:13,740 --> 00:07:16,842
Ja kui ma valisin keegi teine,
nende andmed ei näita üles.

149
00:07:16,842 --> 00:07:17,550
Kuidas seda teha?

150
00:07:17,550 --> 00:07:20,290
Jällegi, see nõuab
meil kasutada mõned AJAX.

151
00:07:20,290 --> 00:07:22,540
Ja nii me avada ajax.js.

152
00:07:22,540 --> 00:07:25,550
Ja siin on see funktsioon, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Kui nimi on midagi, ma tagasi.

154
00:07:27,410 --> 00:07:31,450
Ma ei kavatse midagi teha, kui
tühja valik on valitud.

155
00:07:31,450 --> 00:07:35,420
Muidu ma lähen
luua uus XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
Ja siis ma lähen ütlen, kui
readyState muutused, nimetame seda funktsiooni.

157
00:07:39,020 --> 00:07:43,630
>> Ja kui readyState on
4 ja staatus on 200,

158
00:07:43,630 --> 00:07:45,740
siin on natuke
jQuery on line 13.

159
00:07:45,740 --> 00:07:50,450
Aga ma teen ütleb,
muuta sisu infodiv

160
00:07:50,450 --> 00:07:57,820
olla mis iganes ma sain tagasi kui
Vastuseks minu HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Mis on minu HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Noh, see on õige
siin on line 18 ja 19.

163
00:08:02,020 --> 00:08:08,550
Line 18, ma põhimõtteliselt valmistada
GET taotluse nimi + .html.

164
00:08:08,550 --> 00:08:11,170
Ja jälle, nimi siin on
argument, et oli

165
00:08:11,170 --> 00:08:14,280
möödunud aastal, kui parameeter cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Ühesõnaga, ma olen läbinud kellegi
Nime, mis oli kogum võimalusi

167
00:08:18,460 --> 00:08:22,980
et me nägime
Rippmenüüst kujul.

168
00:08:22,980 --> 00:08:24,450
Ma saan seda nime.

169
00:08:24,450 --> 00:08:29,530
Ja ma väidan ma tahaksin teile
Palun saada mulle, et file.html,

170
00:08:29,530 --> 00:08:31,020
ja siis saadab selle taotluse.

171
00:08:31,020 --> 00:08:34,820
>> Ja nii, et onreadystatechange läheb
kuuleb ja ootab ja ootab

172
00:08:34,820 --> 00:08:39,460
ja ootab, kuni readyState
on 4 ja staatus on 200.

173
00:08:39,460 --> 00:08:44,970
Nii et see on valmis kätte,
ja taotluse oli edukas.

174
00:08:44,970 --> 00:08:49,500
Ja siis, kui ta on, siis läheb
muuta sisu infodiv

175
00:08:49,500 --> 00:08:53,030
olla vastuseks teksti, et ma sain tagasi.

176
00:08:53,030 --> 00:08:54,930
>> Vaatame, kuidas see
võib tegelikult töötavad.

177
00:08:54,930 --> 00:08:58,860
Nii me pea üle oma brauseri
akna ja me vaatame siin.

178
00:08:58,860 --> 00:09:01,359
Võtame pilk
mis toimub siin AJAX.

179
00:09:01,359 --> 00:09:03,400
Nii me valida keegi
alates rippmenüüst.

180
00:09:03,400 --> 00:09:06,079
Nii et sel juhul, olgem
lihtsalt valida Hannah.

181
00:09:06,079 --> 00:09:08,120
Ja teate, et Hannah
andmed ei ole muutunud,

182
00:09:08,120 --> 00:09:11,030
aga ma ei ole any-- minu
leheküljel ei ole täielikult laadida.

183
00:09:11,030 --> 00:09:12,190
Kraami jäi.

184
00:09:12,190 --> 00:09:13,320
Enamus asju jäi.

185
00:09:13,320 --> 00:09:14,320
AJAX Test ei muutunud.

186
00:09:14,320 --> 00:09:16,700
Nupp ise, seda
rippmenüüd ei muutunud.

187
00:09:16,700 --> 00:09:18,260
Aga info on siiski muutus.

188
00:09:18,260 --> 00:09:20,218
Ja sõltuvalt sellest, kuidas
kiiresti minu arvutis liigub,

189
00:09:20,218 --> 00:09:24,430
sa tegelikult võib näha, et sisu
kaob ja siis ilmub tõesti

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

191
00:09:24,930 --> 00:09:27,320
See sisu on
kustutada infodiv,

192
00:09:27,320 --> 00:09:29,940
ja seejärel asendati
Uue asünkroonne taotluse.

193
00:09:29,940 --> 00:09:34,410
>> Nii et kui ma saan seda tuleb öelda,
Rob-- ja jälle, kui heita,

194
00:09:34,410 --> 00:09:38,379
ja äkki näeme, et tegelikult
kaovad ja taas kiiresti.

195
00:09:38,379 --> 00:09:38,920
Sa näed seda?

196
00:09:38,920 --> 00:09:41,400
Kuidas see lihtsalt hüppasid ära,
ja siis uuesti täita?

197
00:09:41,400 --> 00:09:43,640
See on AJAX taotlus
omamoodi toimub.

198
00:09:43,640 --> 00:09:46,060
Ja nii sõltuvalt
inimene valida, ma olen

199
00:09:46,060 --> 00:09:50,690
tegemise teist asünkroonse
taotluse teise faili

200
00:09:50,690 --> 00:09:52,730
et mul on minu server.

201
00:09:52,730 --> 00:09:55,550
Ja sisu minu
infodiv uuendamas,

202
00:09:55,550 --> 00:09:58,457
mille alusel need olen valinud.

203
00:09:58,457 --> 00:10:00,040
Nii et tõesti kõik on AJAX.

204
00:10:00,040 --> 00:10:04,090
See võimaldab meil teha need asünkroonne
taotlused, uudiseid lehel.

205
00:10:04,090 --> 00:10:06,450
Ilma et
värskenda terve lehekülje,

206
00:10:06,450 --> 00:10:08,520
me ei kavatse saada uusi
sisu see tehes

207
00:10:08,520 --> 00:10:11,170
uus värske taotluse serverile.

208
00:10:11,170 --> 00:10:13,420
Ja nii meie lehekülge ei saanud
päris palju dünaamilisem.

209
00:10:13,420 --> 00:10:15,128
>> Ja kui saame rohkem
ja rohkem arenenud, siis

210
00:10:15,128 --> 00:10:17,700
võib saada asjad
ütleme, postkastist,

211
00:10:17,700 --> 00:10:19,850
kus sa ei pea midagi tegema.

212
00:10:19,850 --> 00:10:22,560
Sa ei pea klikkima
rippmenüüd või vajuta midagi,

213
00:10:22,560 --> 00:10:25,920
ja äkki teie uusim
Kirjuta ilmub ülaosas.

214
00:10:25,920 --> 00:10:27,840
See on ka lihtsalt Ajax taotluse.

215
00:10:27,840 --> 00:10:30,460
Ajax on taotlenud oma
server, e-posti server,

216
00:10:30,460 --> 00:10:33,360
saata üle kogu teave
oma viimaseid kirju,

217
00:10:33,360 --> 00:10:38,110
ja muutuvate mida näed
ekraan on sinu Uusimate kirju.

218
00:10:38,110 --> 00:10:41,080
Ja kui teil on uuega
seal, siis sisu, mis div

219
00:10:41,080 --> 00:10:44,580
muutub vastavalt
ajakohastatud sisu.

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

221
00:10:45,480 --> 00:10:47,500
See on CS50.

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