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

2
00:00:00,500 --> 00:00:04,810
[MUZIKO Ludante]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Do unu pli
ia nocio ke

4
00:00:06,940 --> 00:00:12,120
ia falas sub la ombrelo de
JavaScript estas iu nomita AJAX.

5
00:00:12,120 --> 00:00:15,310
Supren ĝis tiu punkto, nia
interago kun JavaScript

6
00:00:15,310 --> 00:00:17,727
estis limigita puŝi
butono kaj io okazas.

7
00:00:17,727 --> 00:00:19,560
Kaj specife, la
iu kiu okazas

8
00:00:19,560 --> 00:00:22,950
Estas niaj retejoj fasadon ŝanĝoj.

9
00:00:22,950 --> 00:00:23,450
Dekstra?

10
00:00:23,450 --> 00:00:26,540
Kiel en aparta, en la
Document Object Model video,

11
00:00:26,540 --> 00:00:29,060
Mi ŝanĝis la fonkoloro.

12
00:00:29,060 --> 00:00:33,240
Sed kiam mi faris tion, mi ne havis
fari ajnan specialan ekstran petoj.

13
00:00:33,240 --> 00:00:36,800
Mi ne devis peti ke
la servilo sendas al mi novan paĝon.

14
00:00:36,800 --> 00:00:39,620
Mi nur ŝanĝis kion mi jam havis.

15
00:00:39,620 --> 00:00:42,245
Mi ne devis reŝarĝi mia paĝo,
Kaj aferoj definitive ŝanĝis,

16
00:00:42,245 --> 00:00:43,760
do tio estas granda.

17
00:00:43,760 --> 00:00:48,400
Sed estas sendube kelkaj
manlibro uzanto interago implikita.

18
00:00:48,400 --> 00:00:53,140
AJAX estas malvarmeta tekniko kiu permesas
nin ĝisdatigi paĝo enhavo,

19
00:00:53,140 --> 00:00:55,750
kaj ne nur la aspekto kaj
senti, sen reŝargi.

20
00:00:55,750 --> 00:00:58,610
>> Kaj per specife kiam mi
diru ĝisdatiganta paĝo enhavo,

21
00:00:58,610 --> 00:01:01,990
Mi ne diras ni reverkas
la paĝon uzante JavaScript.

22
00:01:01,990 --> 00:01:06,560
Mi dirante ni fakte petos
pliaj informoj de la servilo

23
00:01:06,560 --> 00:01:08,640
sen nia paĝo devi reŝargi.

24
00:01:08,640 --> 00:01:10,850
>> Nun tian pecon da
pli progresinta tekniko

25
00:01:10,850 --> 00:01:11,950
ke ni tuj paroli
pri en tiu video.

26
00:01:11,950 --> 00:01:13,720
Ni tuj havos iuj interago.

27
00:01:13,720 --> 00:01:17,750
Sed kiam ni fari, mi tuj esti
farante petoj al la retservilo.

28
00:01:17,750 --> 00:01:21,140
En tiu kazo, nur kio estas
kurado mia Apache retservilo.

29
00:01:21,140 --> 00:01:25,010
Mi tuj konvinkos aldonaj
petoj dum Mi vizitas retpaĝon,

30
00:01:25,010 --> 00:01:26,890
sed mia paĝo ne fortigu.

31
00:01:26,890 --> 00:01:30,000
>> Ĝi simple tuj
nesamtempe ĝisdatigi mian paĝon.

32
00:01:30,000 --> 00:01:31,840
Kaj tio estas, fakte,
kiu AJAX signifas,

33
00:01:31,840 --> 00:01:35,400
estas Asynchronous JavaScript kaj XML.

34
00:01:35,400 --> 00:01:37,910
XML estas alia speco de markado
lingvo, kaj vi povas ordigi de

35
00:01:37,910 --> 00:01:39,680
pensi pri ĝi nur kiel HTML.

36
00:01:39,680 --> 00:01:42,990
Ĝi ne estas sufiĉe la sama afero, sed
ĝi estas esence nur markado lingvo.

37
00:01:42,990 --> 00:01:47,770
Do ĝi estas nesinkrona
JavaScript kaj markado lingvo.

38
00:01:47,770 --> 00:01:50,590
>> Do, por uzi ĉi
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
estas ne aparta programlingvo.

40
00:01:52,230 --> 00:01:55,300
Estas nur speco de
aro de techniques-- ni

41
00:01:55,300 --> 00:01:57,870
bezonas krei specialajn
JavaScript objekto, kiu

42
00:01:57,870 --> 00:02:00,689
nomiĝas XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Nun, estas tre facila fari tion.

44
00:02:01,980 --> 00:02:04,550
Ni simple diru var ajn
ni volas nomi tiun objekton,

45
00:02:04,550 --> 00:02:07,030
egalas nova XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
Kaj nun ni jam ricevis
AJAX ia objekto,

47
00:02:11,050 --> 00:02:14,370
aŭ XMLHttpRequest
objekto, kiu ebligos

48
00:02:14,370 --> 00:02:18,360
nin al nesamtempe ĝisdatigi nia paĝo.

49
00:02:18,360 --> 00:02:23,100
>> Post ni akiris ĉi nova
objekto, ĉi XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
ni devas fari ion por lia
onreadystatechange konduto.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
konduto estas vere nur

52
00:02:30,360 --> 00:02:34,080
kiam vi fari peton
al retpaĝo, la paĝo

53
00:02:34,080 --> 00:02:35,880
iras tra kelkaj paŝoj.

54
00:02:35,880 --> 00:02:37,370
Unue, peto ne estis sendita.

55
00:02:37,370 --> 00:02:39,860
Tiam, la peto estis
sendis, sed ne agis sur.

56
00:02:39,860 --> 00:02:41,580
Tiam la peto estis agita sur.

57
00:02:41,580 --> 00:02:43,680
Tiam la peto estas
esti sendita reen al vi.

58
00:02:43,680 --> 00:02:46,930
>> Tiam, la peto estas
plene ŝarĝitaj en vian paĝon.

59
00:02:46,930 --> 00:02:48,640
Tiuj estas malsamaj ŝtatoj.

60
00:02:48,640 --> 00:02:53,890
Kaj tial ni devas agordi nian
nova XMLHttpRequest objekto

61
00:02:53,890 --> 00:02:58,740
ŝanĝi kiam la preta stato ŝanĝojn.

62
00:02:58,740 --> 00:03:01,925
Kaj tipe, ni faru tion
difinanta anonima funkcio, kiun

63
00:03:01,925 --> 00:03:04,490
ni estas familiara kun el
Ĝavoskripto nun, ke

64
00:03:04,490 --> 00:03:09,840
nomata kiam la preta stato ŝanĝojn.

65
00:03:09,840 --> 00:03:11,340
Estas vere ne multe pli ol tio.

66
00:03:11,340 --> 00:03:14,340
Ni nur tuj estos difinanta
anonima funkcio, ia kiel kion

67
00:03:14,340 --> 00:03:16,440
ni faris en
Ĝavoskripto, kie ni volus

68
00:03:16,440 --> 00:03:18,750
havi anoniman funkcion
respondi al sur klako

69
00:03:18,750 --> 00:03:23,230
aŭ kiam ni faris mapon de
la ajxojn en tabelo.

70
00:03:23,230 --> 00:03:25,220
>> Io okazis kiam
io klakis.

71
00:03:25,220 --> 00:03:28,810
En tiu kazo, estas nur io estas
okazanta kiam la stato de nia paĝo

72
00:03:28,810 --> 00:03:30,160
ŝanĝoj.

73
00:03:30,160 --> 00:03:32,730
Estas du aliaj propraĵoj
kiuj ia of-- ili ne estas

74
00:03:32,730 --> 00:03:35,524
la sola propraĵoj kiuj estas
propraj al XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
sed ili estas belaj gravaj.

76
00:03:36,940 --> 00:03:39,815
Estas io nomita readyState,
kiu kiel vi verŝajne povas diveni,

77
00:03:39,815 --> 00:03:41,750
estas rilatigita onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
Ĝi efektive diras vin
kion la readyState estas.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, kaj 4 estas
la eblecoj tie,

80
00:03:46,289 --> 00:03:48,080
kaj ili ia krude
respondas al kio

81
00:03:48,080 --> 00:03:50,030
Mi nur parolas pri dua antaŭ.

82
00:03:50,030 --> 00:03:53,100
>> Kaj tiam statuso, kiuj
espereble se ĉio iris bone,

83
00:03:53,100 --> 00:03:56,710
estas 200, kiu estas mallonga
cxar, kompreneble, okej,

84
00:03:56,710 --> 00:03:58,330
kiu ni estas konataj kun de HTTP.

85
00:03:58,330 --> 00:04:03,735
Do ni esperas ke nia preta stato
estas kvar, kaj nia statuso estas 200.

86
00:04:03,735 --> 00:04:07,940
Kaj se nia preta stato
estas kvar, kaj la respondo

87
00:04:07,940 --> 00:04:11,490
estas lerta por esti metita sur la
paĝo, kaj la statuso estas 200,

88
00:04:11,490 --> 00:04:13,580
ni povis fari
ĉio sukcese,

89
00:04:13,580 --> 00:04:17,209
Nun ni povas nesamtempe
ĝisdatigi nian paĝon

90
00:04:17,209 --> 00:04:21,730
sen devi reŝargi
la tutan enhavon de ĝi.

91
00:04:21,730 --> 00:04:27,710
>> Post ni difinis kio okazas
al la onreadystatechange konduto,

92
00:04:27,710 --> 00:04:31,020
kaj ni kontrolis ke readyState
estas 4 kaj statuso estas 200,

93
00:04:31,020 --> 00:04:33,900
tiam ĉiuj ni devas fari estas
malfermu asíncrona

94
00:04:33,900 --> 00:04:38,530
peton, kiu estas nur faranta
HTTP ĝenerale GET peton.

95
00:04:38,530 --> 00:04:41,950
Nur faranta ĝin programmatically,
anstataŭ per nia retumilo.

96
00:04:41,950 --> 00:04:43,786
Kaj poste ni sendu tiun peton.

97
00:04:43,786 --> 00:04:45,660
Do kio faras tiun eble
similas en kunteksto?

98
00:04:45,660 --> 00:04:49,790
Do jen funkcio kiu
traktas AJAX petoj.

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

100
00:04:50,290 --> 00:04:52,430
Kaj mi arbitre diris
akceptas argumenton.

101
00:04:52,430 --> 00:04:55,550
Kaj tiu speco de
ĝenerala skeleto tie.

102
00:04:55,550 --> 00:05:00,890
Je la komenco, ni preni
nin nova XMLHttpRequest objekto.

103
00:05:00,890 --> 00:05:03,830
Tiam mi devas agordi la
onreadystatechange konduto.

104
00:05:03,830 --> 00:05:06,970
Kaj tiel mi tuj diru
kiam la readyState ŝanĝoj,

105
00:05:06,970 --> 00:05:10,110
Mi volas ke vi nomas tiun funkcion.

106
00:05:10,110 --> 00:05:12,570
>> Kiu iras demandi la
demandon, se la readyState

107
00:05:12,570 --> 00:05:17,240
estas 4, se la readyState ŝanĝiĝis
esti 4, kaj la statuso estis 200,

108
00:05:17,240 --> 00:05:20,799
do ni havis sukcesan peto, mi
volas fari ion por la paĝo.

109
00:05:20,799 --> 00:05:22,590
Kaj ni rigardu
ekzemplon de kio

110
00:05:22,590 --> 00:05:25,010
ke io povus esti en dua.

111
00:05:25,010 --> 00:05:27,830
Tial, nun mi difinis
miaj anonima funkcio,

112
00:05:27,830 --> 00:05:31,340
mia respondo funkcio whenever
la readyState ŝanĝoj.

113
00:05:31,340 --> 00:05:37,120
>> Do tiam mi devas nur malfermi
peti, uzante la Malferma metodo.

114
00:05:37,120 --> 00:05:39,160
Kaj poste, mi sendas tiun peton.

115
00:05:39,160 --> 00:05:41,980
Kaj ni rigardu
pli konkretan ekzemplon

116
00:05:41,980 --> 00:05:46,290
kio AJAX povas fari sur nia retpaĝoj.

117
00:05:46,290 --> 00:05:49,740
Do mi havas ĉi tie tre simpla
paĝo nomita home.html.

118
00:05:49,740 --> 00:05:53,620
Kaj mi ricevis informon iras
tie kaj ia falmenuo.

119
00:05:53,620 --> 00:05:55,390
>> Kaj ni reviziti ĉi en unu sekundo.

120
00:05:55,390 --> 00:05:59,150
Sed mi kredas ke ni devus nun prenas
rigardu la efektiva fontkodo.

121
00:05:59,150 --> 00:06:01,080
Kaj tiel, mi tuj malfermos home.html.

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

123
00:06:03,490 --> 00:06:04,740
Kaj ni vidos kio okazas.

124
00:06:04,740 --> 00:06:08,240
Do ĉe la plejsupro tie, mi havas
iuj Javascript aĵoj kiuj okazas.

125
00:06:08,240 --> 00:06:12,470
>> Kaj tie, mi ŝajne havas
div kies ID estas infodiv,

126
00:06:12,470 --> 00:06:15,290
kaj iu informo
tuj iru tien.

127
00:06:15,290 --> 00:06:16,374
Kaj tiam mi havas tiun formon.

128
00:06:16,374 --> 00:06:18,081
Kaj ene de tiu
formon, mi havas ion

129
00:06:18,081 --> 00:06:20,200
nomata unuaranga, kiu
estas nur falmenuo

130
00:06:20,200 --> 00:06:22,150
kun aro da malsamaj ebloj.

131
00:06:22,150 --> 00:06:26,150
Kaj ŝajne kiam tiu ŝanĝas, kiam
la eblo kiu estis selektita havas

132
00:06:26,150 --> 00:06:30,600
ŝanĝiĝis, mi tuj vokos
iu funkcio cs50Info,

133
00:06:30,600 --> 00:06:33,190
kaj tiam mi tuj
Iam en this.value,

134
00:06:33,190 --> 00:06:35,740
kie tio rilatas al
kiu opcio estis selektitaj,

135
00:06:35,740 --> 00:06:39,820
kaj valoro estas unu el tiuj ĉi, eblo
valoro = egalas malplenaj, "Blumberg"

136
00:06:39,820 --> 00:06:42,610
"Bowden," "chan" kaj "Malan."

137
00:06:42,610 --> 00:06:45,090
>> Do kio povus reale
okazi tie kiam mi faras tion?

138
00:06:45,090 --> 00:06:48,800
Nu, ni prenu
rigardas blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Aspektas kiel ĝi estas nur
fragmento de iuj HTML.

141
00:06:53,924 --> 00:06:56,090
Kaj fakte, kion mi esperante
okazos tie

142
00:06:56,090 --> 00:07:00,020
Estas mi tuj povos plug
Ĉi HTML rekte en mian retpaĝo

143
00:07:00,020 --> 00:07:02,970
sen devi reŝargi
la paĝo, tiel ke kiam

144
00:07:02,970 --> 00:07:07,510
Mi elektas Ĥana el la falmenuo
menuon, informoj pri Hannah,

145
00:07:07,510 --> 00:07:11,100
en aparta, ĉi tiu informo
tie en blumberg.html,

146
00:07:11,100 --> 00:07:12,574
estas kio aperas sur la paĝo.

147
00:07:12,574 --> 00:07:13,740
Kaj mi ne devas refreŝigi.

148
00:07:13,740 --> 00:07:16,842
Kaj se mi elektis iu alia,
ilia informo montrus supren.

149
00:07:16,842 --> 00:07:17,550
Kiel mi faru tion?

150
00:07:17,550 --> 00:07:20,290
Denove, tio postulas
ni uzi iun AJAX.

151
00:07:20,290 --> 00:07:22,540
Kaj tiel, ni devos malfermi ajax.js.

152
00:07:22,540 --> 00:07:25,550
Kaj tie estas ke funkcio, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Se nomo estas nenio, mi revenos.

154
00:07:27,410 --> 00:07:31,450
Mi ne tuj fari ion se
la malplena eblo estis elektita.

155
00:07:31,450 --> 00:07:35,420
Alie, mi tuj
krei novan XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
Kaj tiam mi tuj diros, kiam la
readyState ŝanĝoj, nomas tiun funkcion.

157
00:07:39,020 --> 00:07:43,630
>> Kaj se la readyState estas
4 kaj la statuso estas 200,

158
00:07:43,630 --> 00:07:45,740
jen ankaŭ iomete
de jQuery sur linio 13.

159
00:07:45,740 --> 00:07:50,450
Sed ĉiuj mi faras estas jene:
ŝanĝi la enhavon de infodiv

160
00:07:50,450 --> 00:07:57,820
esti kion mi reunuiĝis kiel
respondon de mia HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Kio estas mia HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Nu, tio estas vera
tie sur linio 18 kaj 19.

163
00:08:02,020 --> 00:08:08,550
Linio 18, mi esence preparante
a GET peton por nomo + .html.

164
00:08:08,550 --> 00:08:11,170
Kaj denove, nomo ĉi tie estas
la argumento kiu estis

165
00:08:11,170 --> 00:08:14,280
pasis en kiel parametron al cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Do resume, mi pasante en ies
nomon, ke aro de ebloj

167
00:08:18,460 --> 00:08:22,980
ke ni vidis en la
falmenuo en la formo.

168
00:08:22,980 --> 00:08:24,450
Mi ricevas tiun nomon.

169
00:08:24,450 --> 00:08:29,530
Kaj mi diras mi ŝatus ke vi
bonvolu akiri por mi ke file.html,

170
00:08:29,530 --> 00:08:31,020
kaj tiam sendu tiun peton.

171
00:08:31,020 --> 00:08:34,820
>> Kaj por ke onreadystatechange tuj
esti aŭskultante kaj atendante kaj atendante

172
00:08:34,820 --> 00:08:39,460
kaj atendis, ĝis la readyState
estas 4, kaj la statuso estas 200.

173
00:08:39,460 --> 00:08:44,970
Do estas preta esti servita,
kaj la peto estis sukcesa.

174
00:08:44,970 --> 00:08:49,500
Kaj tiam se ĝi estas, ĝi tuj
ŝanĝi la enhavon de infodiv

175
00:08:49,500 --> 00:08:53,030
esti la respondo teksto kiun mi atingis.

176
00:08:53,030 --> 00:08:54,930
>> Do ni vidu kiel ĉi
efektive povus labori.

177
00:08:54,930 --> 00:08:58,860
Do ni estrus super al mia retumilo
fenestro, kaj ni povos rigardi tie.

178
00:08:58,860 --> 00:09:01,359
Do ni rigardu
kio okazas ĉi tie en AJAX.

179
00:09:01,359 --> 00:09:03,400
Do ni elektas iu
el la falmenuo.

180
00:09:03,400 --> 00:09:06,079
Do tiukaze ni
simple elekti Hannah.

181
00:09:06,079 --> 00:09:08,120
Kaj rimarki ke Hannah
informo ŝanĝis,

182
00:09:08,120 --> 00:09:11,030
sed mi ne havis any-- mia
paĝo ne tute reŝarĝi.

183
00:09:11,030 --> 00:09:12,190
La aĵoj restis.

184
00:09:12,190 --> 00:09:13,320
Plejparto de la aĵoj restis.

185
00:09:13,320 --> 00:09:14,320
AJAX Test ne ŝanĝis.

186
00:09:14,320 --> 00:09:16,700
La butono mem, ĉi
falmenuo ne ŝanĝis.

187
00:09:16,700 --> 00:09:18,260
Sed informo ekzistas faris ŝanĝon.

188
00:09:18,260 --> 00:09:20,218
Kaj dependanta sur kiel
rapide mia komputilo movas,

189
00:09:20,218 --> 00:09:24,430
vi efektive povus vidi ke la enhavo
malaperas kaj tiam reaperas vere

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

191
00:09:24,930 --> 00:09:27,320
Jen la enhavo estanta
forviŝita el infodiv,

192
00:09:27,320 --> 00:09:29,940
kaj tiam anstataŭigita per
nova nesinkrona peto.

193
00:09:29,940 --> 00:09:34,410
>> Do se mi ŝanĝos ĝin por esti diri,
Rob-- kaj denove, rigardu,

194
00:09:34,410 --> 00:09:38,379
Kaj eble ni vidos ŝin reale
malaperi kaj reaperi rapide.

195
00:09:38,379 --> 00:09:38,920
Vi vidos ke?

196
00:09:38,920 --> 00:09:41,400
Kiel ĝi ĵus krevita for,
kaj tiam ĝi replenigis?

197
00:09:41,400 --> 00:09:43,640
Jen la AJAX peton
ia malhelpo.

198
00:09:43,640 --> 00:09:46,060
Do dependanta sur la
persono mi elekti, mi

199
00:09:46,060 --> 00:09:50,690
farante malsamaj nesinkrona
peto al malsama dosiero

200
00:09:50,690 --> 00:09:52,730
ke mi havas sur mia servilo.

201
00:09:52,730 --> 00:09:55,550
Kaj la enhavon de miaj
infodiv ĝisdatigas,

202
00:09:55,550 --> 00:09:58,457
bazita sur kiu el tiuj mi elektis.

203
00:09:58,457 --> 00:10:00,040
Do jen vere ĉiuj estas al AJAX.

204
00:10:00,040 --> 00:10:04,090
Ĝi permesas nin fari tiujn nesinkrona
petoj, ĝisdatigoj al paĝo.

205
00:10:04,090 --> 00:10:06,450
Sen devi
refreŝigi la tutan paĝon,

206
00:10:06,450 --> 00:10:08,520
ni tuj akiri novajn
enhavo de ĝi farante

207
00:10:08,520 --> 00:10:11,170
nova freŝa peto al la servilo.

208
00:10:11,170 --> 00:10:13,420
Kaj do, niaj paĝoj povas fariĝi
tre iom pli dinamika.

209
00:10:13,420 --> 00:10:15,128
>> Kaj kiel ni preni pli
kaj pli antaŭita, vi

210
00:10:15,128 --> 00:10:17,700
povus akiri aferojn kiel
diru, via retpoŝta inbox,

211
00:10:17,700 --> 00:10:19,850
kie vi ne devas fari ion.

212
00:10:19,850 --> 00:10:22,560
Vi ne devas klaki
falmenuo aŭ klaki ion,

213
00:10:22,560 --> 00:10:25,920
kaj subite, via plejnove
retpoŝto aperas ĉe la supro.

214
00:10:25,920 --> 00:10:27,840
Jen ankaŭ nur Ajax peto.

215
00:10:27,840 --> 00:10:30,460
Ajax petas vian
servilo, la retpoŝta servilo,

216
00:10:30,460 --> 00:10:33,360
por sendi la tutan informon
pri via lasta retpoŝtojn,

217
00:10:33,360 --> 00:10:38,110
kaj ŝanĝanta kion vi vidas sur la
ekrano esti via plejnove aro de retpoŝtoj.

218
00:10:38,110 --> 00:10:41,080
Kaj se vi havas novan en
tie, tiam la enhavo de tiu div

219
00:10:41,080 --> 00:10:44,580
ŝanĝos reflekti
la ĝisdatigita enhavo.

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

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

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