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

2
00:00:00,500 --> 00:00:04,810
[Speel van musiek]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: So een
soort van idee dat

4
00:00:06,940 --> 00:00:12,120
soort van val onder die sambreel van
JavaScript is iets genoem AJAX.

5
00:00:12,120 --> 00:00:15,310
Tot hierdie punt, ons
interaksie met JavaScript

6
00:00:15,310 --> 00:00:17,727
is beperk tot 'n druk
knoppie en iets gebeur.

7
00:00:17,727 --> 00:00:19,560
En spesifiek die
iets wat gebeur

8
00:00:19,560 --> 00:00:22,950
is ons webtuistes lyk en voel veranderinge.

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

10
00:00:23,450 --> 00:00:26,540
Soos in die besonder, in die
dokument model voorwerp video,

11
00:00:26,540 --> 00:00:29,060
Ek verander die agtergrond.

12
00:00:29,060 --> 00:00:33,240
Maar toe ek dit gedoen het, het ek nie '
enige spesiale versoeke ekstra te doen.

13
00:00:33,240 --> 00:00:36,800
Ek het nie om te vra dat
die bediener stuur vir my 'n nuwe bladsy.

14
00:00:36,800 --> 00:00:39,620
Ek het net verander wat ek reeds gehad het.

15
00:00:39,620 --> 00:00:42,245
Ek het nie op my bladsy laai,
en dinge beslis verander,

16
00:00:42,245 --> 00:00:43,760
so dit is 'n groot.

17
00:00:43,760 --> 00:00:48,400
Maar daar is beslis 'n paar
handleiding gebruiker interaksie betrokke is.

18
00:00:48,400 --> 00:00:53,140
AJAX is 'n koel tegniek wat toelaat
ons inhoud van die bladsy te werk,

19
00:00:53,140 --> 00:00:55,750
en nie net die voorkoms en
voel, sonder herlaai.

20
00:00:55,750 --> 00:00:58,610
>> En deur spesifiek toe ek
sê die opdatering inhoud van die bladsy,

21
00:00:58,610 --> 00:01:01,990
Ek sê nie ons herskryf
die bladsy met JavaScript.

22
00:01:01,990 --> 00:01:06,560
Ek sê ons eintlik versoek
meer inligting van die bediener

23
00:01:06,560 --> 00:01:08,640
sonder ons bladsy om te herlaai.

24
00:01:08,640 --> 00:01:10,850
>> Nou dat die soort van 'n bietjie van
'n meer gevorderde tegniek

25
00:01:10,850 --> 00:01:11,950
dat ons gaan om te praat
oor wat in hierdie video.

26
00:01:11,950 --> 00:01:13,720
Ons gaan 'n paar interaksie te hê.

27
00:01:13,720 --> 00:01:17,750
Maar wanneer ons dit doen, ek gaan wees
versoeke om die web-bediener.

28
00:01:17,750 --> 00:01:21,140
In hierdie geval, net wat
hardloop my Apache web server.

29
00:01:21,140 --> 00:01:25,010
Ek gaan word om bykomende
versoeke terwyl ek besoek 'n webblad,

30
00:01:25,010 --> 00:01:26,890
maar my bladsy sal nie verfris.

31
00:01:26,890 --> 00:01:30,000
>> Dit is net gaan om te
asynchroon werk my bladsy.

32
00:01:30,000 --> 00:01:31,840
En dit is, in werklikheid,
wat AJAX staan,

33
00:01:31,840 --> 00:01:35,400
is Asynchronous JavaScript en XML.

34
00:01:35,400 --> 00:01:37,910
XML is 'n ander soort van opmaak
taal, en jy kan soort van

35
00:01:37,910 --> 00:01:39,680
dink dit net soos HTML.

36
00:01:39,680 --> 00:01:42,990
Dit is nie heeltemal dieselfde ding, maar
dit is basies net 'n opmaak taal.

37
00:01:42,990 --> 00:01:47,770
So dit is 'n asinchrone
JavaScript en 'n opmaak taal.

38
00:01:47,770 --> 00:01:50,590
>> So om dit te gebruik
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
is nie 'n aparte programmeertaal.

40
00:01:52,230 --> 00:01:55,300
Dis net soort van 'n
stel techniques-- ons

41
00:01:55,300 --> 00:01:57,870
nodig om 'n spesiale te skep
JavaScript voorwerp, wat

42
00:01:57,870 --> 00:02:00,689
is 'n XMLHttpRequest genoem.

43
00:02:00,689 --> 00:02:01,980
Nou, dit is baie maklik om dit te doen.

44
00:02:01,980 --> 00:02:04,550
Ons sê net var, ongeag
Ons wil hierdie voorwerp noem,

45
00:02:04,550 --> 00:02:07,030
gelyk nuwe XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
En nou het ons nou verkry
'n AJAX soort voorwerp,

47
00:02:11,050 --> 00:02:14,370
of 'n XMLHttpRequest
voorwerp, wat sal toelaat dat

48
00:02:14,370 --> 00:02:18,360
ons asynchroon werk ons ​​bladsy.

49
00:02:18,360 --> 00:02:23,100
>> Nadat ons gekry het hierdie nuwe
voorwerp, hierdie XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
ons het om iets te doen om sy
onreadystatechange gedrag.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
gedrag is regtig net

52
00:02:30,360 --> 00:02:34,080
wanneer jy 'n versoek
om 'n web bladsy, die bladsy

53
00:02:34,080 --> 00:02:35,880
gaan deur 'n aantal stappe.

54
00:02:35,880 --> 00:02:37,370
Eerstens, het 'n versoek nie gestuur.

55
00:02:37,370 --> 00:02:39,860
Toe het die versoek was
gestuur, maar nie daarop te reageer.

56
00:02:39,860 --> 00:02:41,580
Toe het die versoek gereageer.

57
00:02:41,580 --> 00:02:43,680
Dan is die versoek
word terug gestuur na jou.

58
00:02:43,680 --> 00:02:46,930
>> Dan, die versoek
in jou bladsy ten volle gelaai.

59
00:02:46,930 --> 00:02:48,640
Dit is die verskillende state.

60
00:02:48,640 --> 00:02:53,890
En so moet ons ons stel
nuwe XMLHttpRequest voorwerp

61
00:02:53,890 --> 00:02:58,740
wanneer die gereed staat veranderinge te verander.

62
00:02:58,740 --> 00:03:01,925
En tipies, ons doen dit deur
definieer 'n anonieme funksie, wat

63
00:03:01,925 --> 00:03:04,490
ons is vertroud met van
JavaScript nou, wat

64
00:03:04,490 --> 00:03:09,840
genoem wanneer die gereed staat verander.

65
00:03:09,840 --> 00:03:11,340
Dit is regtig nie veel meer as dit.

66
00:03:11,340 --> 00:03:14,340
Ons is net gaan om te definieer 'n
anonieme funksie, soort van soos wat

67
00:03:14,340 --> 00:03:16,440
ons besig was om in
JavaScript, waar ons sou

68
00:03:16,440 --> 00:03:18,750
het 'n anonieme funksie
reageer op 'n on kliek,

69
00:03:18,750 --> 00:03:23,230
of wanneer ons 'n kaart van doen
die verskillende voorwerpe in 'n verskeidenheid.

70
00:03:23,230 --> 00:03:25,220
>> Iets het gebeur toe
iets gekliek.

71
00:03:25,220 --> 00:03:28,810
In hierdie geval, is dit net iets is
gebeur wanneer die toestand van ons bladsy

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

73
00:03:30,160 --> 00:03:32,730
Daar is twee ander eiendomme
dat die soort of-- hulle is nie

74
00:03:32,730 --> 00:03:35,524
die enigste eienskappe wat
inherent aan XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
maar hulle is redelik belangrike mense.

76
00:03:36,940 --> 00:03:39,815
Daar is iets genoem readyState,
wat as jy waarskynlik kan raai,

77
00:03:39,815 --> 00:03:41,750
is verwant aan onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
Dit vertel jy eintlik
wat die readyState is.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, en 4
die moontlikhede is daar,

80
00:03:46,289 --> 00:03:48,080
en hulle soort van rofweg
ooreenstem met wat

81
00:03:48,080 --> 00:03:50,030
Ek was net te praat oor 'n tweede gelede.

82
00:03:50,030 --> 00:03:53,100
>> En dan status, wat
hopelik as alles OK,

83
00:03:53,100 --> 00:03:56,710
is 200, wat is kort
vir, natuurlik, OK,

84
00:03:56,710 --> 00:03:58,330
wat ons vertroud is met van http.

85
00:03:58,330 --> 00:04:03,735
So ons hoop dat ons gereed staat
vier, en ons status is 200.

86
00:04:03,735 --> 00:04:07,940
En as ons gereed staat
vier, en die reaksie

87
00:04:07,940 --> 00:04:11,490
is gereed om op die plaas te wees
bladsy, en die status is 200,

88
00:04:11,490 --> 00:04:13,580
ons in staat was om te doen
alles suksesvol,

89
00:04:13,580 --> 00:04:17,209
Nou kan ons asynchroon
werk ons ​​bladsy

90
00:04:17,209 --> 00:04:21,730
sonder om te herlaai
die hele inhoud daarvan.

91
00:04:21,730 --> 00:04:27,710
>> Na ons gedefinieer wat gebeur
die onreadystatechange gedrag,

92
00:04:27,710 --> 00:04:31,020
en ons het bewys dat readyState
4 en status is 200,

93
00:04:31,020 --> 00:04:33,900
dan sal al wat ons nodig het om te doen is
oop 'n asinchrone

94
00:04:33,900 --> 00:04:38,530
versoek, wat net maak
'n HTTP GET algemeen versoek.

95
00:04:38,530 --> 00:04:41,950
Net om dit te doen programmaties,
in plaas van deur ons webblaaier.

96
00:04:41,950 --> 00:04:43,786
En dan stuur ons dat versoek.

97
00:04:43,786 --> 00:04:45,660
So wat beteken dit dalk
lyk soos in konteks?

98
00:04:45,660 --> 00:04:49,790
So hier is 'n funksie wat
handel oor AJAX versoeke.

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

100
00:04:50,290 --> 00:04:52,430
En ek het gesê arbitrêr
dit 'n argument aanvaar.

101
00:04:52,430 --> 00:04:55,550
En dit 'n soort van 'n
algemene geraamte hier.

102
00:04:55,550 --> 00:05:00,890
Aan die begin, kry ons
onsself 'n nuwe XMLHttpRequest voorwerp.

103
00:05:00,890 --> 00:05:03,830
Dan moet ek die stel
onreadystatechange gedrag.

104
00:05:03,830 --> 00:05:06,970
En so ek gaan om te sê
toe die readyState veranderinge,

105
00:05:06,970 --> 00:05:10,110
Ek wil hê jy moet hierdie funksie noem.

106
00:05:10,110 --> 00:05:12,570
>> Wat gaan die vra
vraag, as die readyState

107
00:05:12,570 --> 00:05:17,240
4, indien die readyState verander
te wees 4, en die status was 200,

108
00:05:17,240 --> 00:05:20,799
so ons het 'n suksesvolle versoek ek
wil iets om die bladsy te doen.

109
00:05:20,799 --> 00:05:22,590
En ons sal 'n blik
na 'n voorbeeld van wat

110
00:05:22,590 --> 00:05:25,010
dat iets kan wees in 'n tweede.

111
00:05:25,010 --> 00:05:27,830
So dan, ek het gedefinieer
my anonieme funksie,

112
00:05:27,830 --> 00:05:31,340
my reaksie funksie wanneer
die readyState veranderinge.

113
00:05:31,340 --> 00:05:37,120
>> So dan het ek net nodig om oop te maak 'n
versoek, met behulp van die Open metode.

114
00:05:37,120 --> 00:05:39,160
En dan is Ek wat versoek te stuur.

115
00:05:39,160 --> 00:05:41,980
En laat ons 'n blik op
'n meer konkrete voorbeeld

116
00:05:41,980 --> 00:05:46,290
van wat AJAX kan doen op ons webblaaie.

117
00:05:46,290 --> 00:05:49,740
So ek het hier 'n baie eenvoudige
bladsy genoem home.html.

118
00:05:49,740 --> 00:05:53,620
En ek het 'n inligting gaan
hier en 'n soort van drop-down menu.

119
00:05:53,620 --> 00:05:55,390
>> En ons sal dit weer in 'n sekonde.

120
00:05:55,390 --> 00:05:59,150
Maar ek dink ons ​​moet nou neem 'n
kyk na die werklike bron-kode.

121
00:05:59,150 --> 00:06:01,080
En so, ek gaan om oop te maak home.html.

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

123
00:06:03,490 --> 00:06:04,740
En ons sal sien wat aangaan.

124
00:06:04,740 --> 00:06:08,240
So by hier die heel boonste, ek het
sommige JavaScript dinge wat aangaan.

125
00:06:08,240 --> 00:06:12,470
>> En hier, ek het blykbaar
'n div wie ID is infodiv,

126
00:06:12,470 --> 00:06:15,290
en 'n paar inligting
gaan om daar te gaan.

127
00:06:15,290 --> 00:06:16,374
En dan het ek hierdie vorm.

128
00:06:16,374 --> 00:06:18,081
En binnekant van hierdie
vorm, ek het iets

129
00:06:18,081 --> 00:06:20,200
bekend as 'n Select, wat
is net 'n drop-down menu

130
00:06:20,200 --> 00:06:22,150
met 'n klomp van die verskillende opsies.

131
00:06:22,150 --> 00:06:26,150
En blykbaar toe dat veranderinge, wanneer
die opsie wat gekies is het

132
00:06:26,150 --> 00:06:30,600
verander, ek gaan om te bel
'n funksie cs50Info,

133
00:06:30,600 --> 00:06:33,190
en dan gaan ek
slaag in this.value,

134
00:06:33,190 --> 00:06:35,740
waar dit verwys na
watter opsie gekies is,

135
00:06:35,740 --> 00:06:39,820
en waarde is een van hierdie hier, opsie
waarde = gelyk leeg, "Blumberg,"

136
00:06:39,820 --> 00:06:42,610
"Bowden", "Chan," en "Malan."

137
00:06:42,610 --> 00:06:45,090
>> So, wat kan eintlik
hier gebeur wanneer ek dit doen?

138
00:06:45,090 --> 00:06:48,800
Wel, laat ons neem 'n
kyk na blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Lyk soos dit is net 'n
uittreksel van 'n HTML.

141
00:06:53,924 --> 00:06:56,090
En in die feit, wat ek hoop
gaan hier gebeur

142
00:06:56,090 --> 00:07:00,020
is ek in staat sal wees om aan te sluit
hierdie Html direk in my webblad

143
00:07:00,020 --> 00:07:02,970
sonder om te herlaai
die bladsy, soos dat wanneer

144
00:07:02,970 --> 00:07:07,510
Ek kies Hannah van die drop-down
menu, inligting oor Hannah,

145
00:07:07,510 --> 00:07:11,100
in die besonder, hierdie inligting
hier in blumberg.html,

146
00:07:11,100 --> 00:07:12,574
is wat dui op die bladsy.

147
00:07:12,574 --> 00:07:13,740
En ek hoef nie te verfris.

148
00:07:13,740 --> 00:07:16,842
En as ek gekies iemand anders,
hulle inligting sal wys.

149
00:07:16,842 --> 00:07:17,550
Hoe kan ek dit doen?

150
00:07:17,550 --> 00:07:20,290
Weereens, dit vereis
ons om 'n paar AJAX gebruik.

151
00:07:20,290 --> 00:07:22,540
En so sal ons oop ajax.js.

152
00:07:22,540 --> 00:07:25,550
En hier is die funksie, cs50Info.

153
00:07:25,550 --> 00:07:27,410
As naam is niks nie, ek terugkom.

154
00:07:27,410 --> 00:07:31,450
Ek is nie van plan om iets te doen as
die leë opsie gekies is.

155
00:07:31,450 --> 00:07:35,420
Anders, ek gaan
skep 'n nuwe XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
En dan gaan ek om te sê, toe die
readyState veranderinge, noem hierdie funksie.

157
00:07:39,020 --> 00:07:43,630
>> En as die readyState is
4 en die status is 200,

158
00:07:43,630 --> 00:07:45,740
hier is 'n bietjie
van jQuery op die lyn 13.

159
00:07:45,740 --> 00:07:50,450
Maar al wat ek doen, is gesê,
die inhoud van infodiv verander

160
00:07:50,450 --> 00:07:57,820
te wees wat ek het terug as 'n
reaksie van my HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Wat is my HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Wel, dit is reg
hier op die lyn 18 en 19.

163
00:08:02,020 --> 00:08:08,550
Line 18, ek basies voorbereiding
'n get versoek om die naam + Html.

164
00:08:08,550 --> 00:08:11,170
En weer, noem hier is
die argument dat was

165
00:08:11,170 --> 00:08:14,280
geslaag in as 'n parameter te cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> So basies, ek verby in iemand se
noem, wat daardie stel opsies was

167
00:08:18,460 --> 00:08:22,980
wat ons gesien het in die
drop-down menu in die vorm.

168
00:08:22,980 --> 00:08:24,450
Ek kry die naam.

169
00:08:24,450 --> 00:08:29,530
En ek sê: Ek wil hê jy moet
asseblief 'vir my dat file.html,

170
00:08:29,530 --> 00:08:31,020
en dan stuur die versoek.

171
00:08:31,020 --> 00:08:34,820
>> En sodat onreadystatechange gaan
te wees luister en wag en wag

172
00:08:34,820 --> 00:08:39,460
en wag totdat die readyState
is 4, en die status is 200.

173
00:08:39,460 --> 00:08:44,970
So dit is gereed om te bedien,
en die versoek was suksesvol.

174
00:08:44,970 --> 00:08:49,500
En dan is dit, dit gaan om
die inhoud van infodiv verander

175
00:08:49,500 --> 00:08:53,030
om die reaksie teks wat ek terug wees.

176
00:08:53,030 --> 00:08:54,930
>> So laat ons sien hoe dit
kan eintlik werk.

177
00:08:54,930 --> 00:08:58,860
So ons sal kop bo aan my browser
venster, en ons sal kyk hier.

178
00:08:58,860 --> 00:09:01,359
So laat ons neem 'n blik op
wat gaan aan hier in AJAX.

179
00:09:01,359 --> 00:09:03,400
So sal ons iemand kies
uit die drop-down menu.

180
00:09:03,400 --> 00:09:06,079
So in hierdie geval, laat ons
net kies Hannah.

181
00:09:06,079 --> 00:09:08,120
En kennis dat Hannah se
inligting verander het,

182
00:09:08,120 --> 00:09:11,030
maar ek het nie any-- het my
bladsy nie heeltemal op te laai.

183
00:09:11,030 --> 00:09:12,190
Die dinge gebly.

184
00:09:12,190 --> 00:09:13,320
Die meeste van die dinge wat gebly.

185
00:09:13,320 --> 00:09:14,320
AJAX toets het nie verander nie.

186
00:09:14,320 --> 00:09:16,700
Die knoppie self, dit
drop-down menu het nie verander nie.

187
00:09:16,700 --> 00:09:18,260
Maar inligting het daar verandering.

188
00:09:18,260 --> 00:09:20,218
En afhangende van hoe
vinnig my rekenaar beweeg,

189
00:09:20,218 --> 00:09:24,430
jy kan eintlik sien dat die inhoud
verdwyn en dan weer verskyn regtig

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

191
00:09:24,930 --> 00:09:27,320
Dit is die inhoud om
verwyder uit infodiv,

192
00:09:27,320 --> 00:09:29,940
en dan vervang met 'n
nuwe asynchrone versoek.

193
00:09:29,940 --> 00:09:34,410
>> So as ek skakel dit om te sê,
Rob-- en weer, 'n blik,

194
00:09:34,410 --> 00:09:38,379
en miskien sal ons dit eintlik sien
verdwyn en vinnig weer verskyn.

195
00:09:38,379 --> 00:09:38,920
Jy sien dat?

196
00:09:38,920 --> 00:09:41,400
Hoe is dit net inloer weg,
en dan is dit hervul?

197
00:09:41,400 --> 00:09:43,640
Dit is die AJAX versoek
soort plaasvind.

198
00:09:43,640 --> 00:09:46,060
En so afhangende van die
persoon wat ek kies, ek is

199
00:09:46,060 --> 00:09:50,690
maak 'n ander asynchrone
versoek om 'n ander lêer

200
00:09:50,690 --> 00:09:52,730
dat ek op my bediener.

201
00:09:52,730 --> 00:09:55,550
En die inhoud van my
infodiv opdatering,

202
00:09:55,550 --> 00:09:58,457
gebaseer op wat van hierdie ek het gekies.

203
00:09:58,457 --> 00:10:00,040
So dit is regtig al wat daar is om AJAX.

204
00:10:00,040 --> 00:10:04,090
Dit stel ons in staat om hierdie asynchrone maak
versoeke, updates na 'n bladsy.

205
00:10:04,090 --> 00:10:06,450
Sonder om
verfris die hele bladsy,

206
00:10:06,450 --> 00:10:08,520
ons gaan kry nuwe
inhoud daarvan deur

207
00:10:08,520 --> 00:10:11,170
'n nuwe vars versoek aan die bediener.

208
00:10:11,170 --> 00:10:13,420
En so, ons bladsye kan raak
nogal 'n bietjie meer dinamiese.

209
00:10:13,420 --> 00:10:15,128
>> En as ons meer
en meer gevorderde, jy

210
00:10:15,128 --> 00:10:17,700
kan dinge soos te kry
sê, jou e-pos inboks,

211
00:10:17,700 --> 00:10:19,850
waar jy nie hoef te doen nie.

212
00:10:19,850 --> 00:10:22,560
Jy hoef nie na 'n klik
drop-down menu of kliek enigiets,

213
00:10:22,560 --> 00:10:25,920
en al van 'n skielike, jou nuutste
e-pos toon tot by die top.

214
00:10:25,920 --> 00:10:27,840
Dit is ook net 'n Ajax versoek.

215
00:10:27,840 --> 00:10:30,460
Ajax versoek jou
bediener, die e-pos bediener,

216
00:10:30,460 --> 00:10:33,360
stuur oor al die inligting
oor jou jongste e-pos,

217
00:10:33,360 --> 00:10:38,110
en verander wat jy sien op die
skerm om jou nuutste stel e-pos wees.

218
00:10:38,110 --> 00:10:41,080
En as jy 'n nuwe een in
daar is, dan die inhoud van daardie div

219
00:10:41,080 --> 00:10:44,580
sal verander om te besin
die opgedateer inhoud.

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

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

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