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

2
00:00:00,500 --> 00:00:04,810
[Musik spiller]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Så en mere
slags forestilling om, at

4
00:00:06,940 --> 00:00:12,120
slags falder ind under paraplyen af
JavaScript er noget, der hedder AJAX.

5
00:00:12,120 --> 00:00:15,310
Indtil dette punkt, vores
interaktion med JavaScript

6
00:00:15,310 --> 00:00:17,727
har været begrænset til at skubbe en
knap og der sker noget.

7
00:00:17,727 --> 00:00:19,560
Og specifikt
noget, der sker

8
00:00:19,560 --> 00:00:22,950
er vores websites udseende og ændringer.

9
00:00:22,950 --> 00:00:23,450
Højre?

10
00:00:23,450 --> 00:00:26,540
Ligesom navnlig i
dokument objekt model video,

11
00:00:26,540 --> 00:00:29,060
Jeg har ændret baggrundsfarven.

12
00:00:29,060 --> 00:00:33,240
Men da jeg gjorde det, havde jeg ikke
til at gøre eventuelle særlige ekstra anmodninger.

13
00:00:33,240 --> 00:00:36,800
Jeg behøvede ikke at anmode om, at
serveren sende mig en ny side.

14
00:00:36,800 --> 00:00:39,620
Jeg har lige skiftet det, jeg allerede havde.

15
00:00:39,620 --> 00:00:42,245
Jeg behøvede ikke at genindlæse min side,
og tingene afgjort ændret sig,

16
00:00:42,245 --> 00:00:43,760
så det er fantastisk.

17
00:00:43,760 --> 00:00:48,400
Men der er helt sikkert nogle
manuel brugerinteraktion involveret.

18
00:00:48,400 --> 00:00:53,140
AJAX er en cool teknik, der giver
os til at opdatere en sides indhold,

19
00:00:53,140 --> 00:00:55,750
og ikke kun udseendet og
føler, uden at genindlæse.

20
00:00:55,750 --> 00:00:58,610
>> Og ved specifikt, da jeg
sige opdatere en sides indhold,

21
00:00:58,610 --> 00:01:01,990
Jeg siger ikke, at vi omskrive
siden ved hjælp af JavaScript.

22
00:01:01,990 --> 00:01:06,560
Jeg siger vi faktisk anmode
mere information fra serveren

23
00:01:06,560 --> 00:01:08,640
uden vores side skulle genindlæse.

24
00:01:08,640 --> 00:01:10,850
>> Nu slags lidt af
en mere avanceret teknik

25
00:01:10,850 --> 00:01:11,950
at vi kommer til at tale
om i denne video.

26
00:01:11,950 --> 00:01:13,720
Vi kommer til at have en vis interaktion.

27
00:01:13,720 --> 00:01:17,750
Men når vi gør, jeg har tænkt mig at være
gør anmodninger til webserveren.

28
00:01:17,750 --> 00:01:21,140
I dette tilfælde, bare hvad der er
kører min Apache webserver.

29
00:01:21,140 --> 00:01:25,010
Jeg har tænkt mig at gøre yderligere
anmodninger mens jeg besøger en webside,

30
00:01:25,010 --> 00:01:26,890
men min side vil ikke opdatere.

31
00:01:26,890 --> 00:01:30,000
>> Det er bare at gå til
asynkront opdatere min side.

32
00:01:30,000 --> 00:01:31,840
Og det er i virkeligheden,
som AJAX står for,

33
00:01:31,840 --> 00:01:35,400
er Asynchronous JavaScript og XML.

34
00:01:35,400 --> 00:01:37,910
XML er en anden form for opmærkning
sprog, og du kan sortere på

35
00:01:37,910 --> 00:01:39,680
tænke på det ligesom HTML.

36
00:01:39,680 --> 00:01:42,990
Det er ikke helt det samme, men
det er dybest set bare et kodesprog.

37
00:01:42,990 --> 00:01:47,770
Så det er en asynkron
JavaScript og et kodesprog.

38
00:01:47,770 --> 00:01:50,590
>> Så for at bruge denne
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
er ikke en separat programmeringssprog.

40
00:01:52,230 --> 00:01:55,300
Det er bare en slags
sæt af techniques-- vi

41
00:01:55,300 --> 00:01:57,870
nødt til at oprette en særlig
JavaScript objekt, som

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

43
00:02:00,689 --> 00:02:01,980
Nu er det meget nemt at gøre dette.

44
00:02:01,980 --> 00:02:04,550
Vi bare sige var, uanset
vi ønsker at kalde dette objekt,

45
00:02:04,550 --> 00:02:07,030
lig ny XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
Og nu har vi nu fået
en AJAX slags objekt,

47
00:02:11,050 --> 00:02:14,370
eller en XMLHttpRequest
formål, som vil give

48
00:02:14,370 --> 00:02:18,360
os til asynkront opdatere vores side.

49
00:02:18,360 --> 00:02:23,100
>> Efter at vi har fået denne nye
objekt, denne XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
vi er nødt til at gøre noget til sin
onreadystatechange adfærd.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
adfærd er virkelig bare

52
00:02:30,360 --> 00:02:34,080
når du laver en anmodning
til en webside, siden

53
00:02:34,080 --> 00:02:35,880
går gennem en række trin.

54
00:02:35,880 --> 00:02:37,370
For det første har en anmodning ikke er blevet sendt.

55
00:02:37,370 --> 00:02:39,860
Da har anmodningen været
sendt, men ikke reageret på.

56
00:02:39,860 --> 00:02:41,580
Så anmodningen er blevet imødekommet.

57
00:02:41,580 --> 00:02:43,680
Så anmodningen er
at blive sendt tilbage til dig.

58
00:02:43,680 --> 00:02:46,930
>> Derefter anmodningen er
fuldt lastet i din side.

59
00:02:46,930 --> 00:02:48,640
De er forskellige tilstande.

60
00:02:48,640 --> 00:02:53,890
Og så er vi nødt til at sætte vores
nye XMLHttpRequest objekt

61
00:02:53,890 --> 00:02:58,740
at ændre sig, når de færdige tilstandsændringer.

62
00:02:58,740 --> 00:03:01,925
Og typisk, vi gør dette ved
definerer en anonym funktion, som

63
00:03:01,925 --> 00:03:04,490
Vi er bekendt med fra
JavaScript nu, at

64
00:03:04,490 --> 00:03:09,840
kaldes, når tilstanden Klar ændringer.

65
00:03:09,840 --> 00:03:11,340
Det er virkelig ikke meget mere end det.

66
00:03:11,340 --> 00:03:14,340
Vi er lige kommer til at definere en
anonym funktion, lidt ligesom hvad

67
00:03:14,340 --> 00:03:16,440
vi lavede i
JavaScript, hvor vi ville

68
00:03:16,440 --> 00:03:18,750
har en anonym funktion
reagere på en on klik,

69
00:03:18,750 --> 00:03:23,230
eller når vi gjorde et kort over
de forskellige objekter i et array.

70
00:03:23,230 --> 00:03:25,220
>> Noget skete, da
noget blev klikket.

71
00:03:25,220 --> 00:03:28,810
I dette tilfælde, det er bare noget er
sker, når tilstanden af ​​vores side

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

73
00:03:30,160 --> 00:03:32,730
Der er to andre egenskaber
der er sortere of-- de ikke er

74
00:03:32,730 --> 00:03:35,524
de eneste egenskaber, som er
uløseligt forbundet med XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
men de er temmelig vigtige.

76
00:03:36,940 --> 00:03:39,815
Der er noget, der hedder readyState,
der som du nok kan gætte,

77
00:03:39,815 --> 00:03:41,750
er relateret til onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
Det faktisk fortæller dig
hvad readyState er.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3 og 4 er
mulighederne der,

80
00:03:46,289 --> 00:03:48,080
og de slags ca.
svarer til det

81
00:03:48,080 --> 00:03:50,030
Jeg var bare tale om et sekund siden.

82
00:03:50,030 --> 00:03:53,100
>> Og så status, hvilket
forhåbentlig, hvis alt gik OK,

83
00:03:53,100 --> 00:03:56,710
er 200, hvilket er en forkortelse
for naturligvis OK,

84
00:03:56,710 --> 00:03:58,330
som vi er bekendt med fra http.

85
00:03:58,330 --> 00:04:03,735
Så vi håber, at vores klar tilstand
er fire, og vores status er 200.

86
00:04:03,735 --> 00:04:07,940
Og hvis vores klar tilstand
er fire, og svaret

87
00:04:07,940 --> 00:04:11,490
er klar til at blive sat på
side, og status er 200,

88
00:04:11,490 --> 00:04:13,580
vi var i stand til at gøre
alt held,

89
00:04:13,580 --> 00:04:17,209
Nu kan vi asynkront
opdatere vores side

90
00:04:17,209 --> 00:04:21,730
uden at skulle genindlæse
hele indholdet af det.

91
00:04:21,730 --> 00:04:27,710
>> Efter at vi har defineret, hvad der sker
til onreadystatechange adfærd,

92
00:04:27,710 --> 00:04:31,020
og vi har kontrolleret, at readyState
er 4, og status er 200,

93
00:04:31,020 --> 00:04:33,900
så alt vi skal gøre, er
åbne en asynkron

94
00:04:33,900 --> 00:04:38,530
anmodning, der er bare at gøre
en HTTP generelt GET-anmodning.

95
00:04:38,530 --> 00:04:41,950
Bare gør det programmeringsmæssigt,
i stedet for gennem vores web browser.

96
00:04:41,950 --> 00:04:43,786
Og så sender vi denne anmodning.

97
00:04:43,786 --> 00:04:45,660
Så hvad betyder det måske
se ud i sammenhæng?

98
00:04:45,660 --> 00:04:49,790
Så her er en funktion,
omhandler AJAX anmodninger.

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

100
00:04:50,290 --> 00:04:52,430
Og jeg har vilkårligt sagt
det accepterer et argument.

101
00:04:52,430 --> 00:04:55,550
Og dette en slags
generelt skelet her.

102
00:04:55,550 --> 00:05:00,890
I begyndelsen, får vi
selv en ny XMLHttpRequest objekt.

103
00:05:00,890 --> 00:05:03,830
Så jeg har brug for at indstille
onreadystatechange adfærd.

104
00:05:03,830 --> 00:05:06,970
Og så jeg har tænkt mig at sige
når readyState ændringer,

105
00:05:06,970 --> 00:05:10,110
Jeg vil have dig til at kalde denne funktion.

106
00:05:10,110 --> 00:05:12,570
>> Som vil spørge
spørgsmål, hvis readyState

107
00:05:12,570 --> 00:05:17,240
er 4, hvis readyState har ændret
at være 4, og status var 200,

108
00:05:17,240 --> 00:05:20,799
så vi havde en vellykket anmodning, jeg
ønsker at gøre noget til siden.

109
00:05:20,799 --> 00:05:22,590
Og vi vil tage et kig
på et eksempel på, hvad

110
00:05:22,590 --> 00:05:25,010
at noget kan være i en anden.

111
00:05:25,010 --> 00:05:27,830
Så, nu har jeg defineret
min anonyme funktion,

112
00:05:27,830 --> 00:05:31,340
min responsfunktion når
de readyState ændringer.

113
00:05:31,340 --> 00:05:37,120
>> Så så jeg bare nødt til at åbne op for en
anmode, ved hjælp af den åbne metode.

114
00:05:37,120 --> 00:05:39,160
Og så, jeg sender denne anmodning.

115
00:05:39,160 --> 00:05:41,980
Og lad os tage et kig på
en mere konkret eksempel

116
00:05:41,980 --> 00:05:46,290
af, hvad AJAX kan gøre på vores websider.

117
00:05:46,290 --> 00:05:49,740
Så jeg har her en meget enkel
side kaldet home.html.

118
00:05:49,740 --> 00:05:53,620
Og jeg har fået en information går
her og en slags drop-down menuen.

119
00:05:53,620 --> 00:05:55,390
>> Og vi vil revidere dette i et sekund.

120
00:05:55,390 --> 00:05:59,150
Men jeg synes, vi skal nu tage en
se på de faktiske kildekode.

121
00:05:59,150 --> 00:06:01,080
Og så, jeg har tænkt mig at åbne op home.html.

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

123
00:06:03,490 --> 00:06:04,740
Og vi vil se, hvad der foregår.

124
00:06:04,740 --> 00:06:08,240
Så op på toppen her, jeg har
nogle JavaScript ting, der foregår.

125
00:06:08,240 --> 00:06:12,470
>> Og her, jeg har tilsyneladende
en div, hvis id er infodiv,

126
00:06:12,470 --> 00:06:15,290
og nogle oplysninger
kommer til at gå der.

127
00:06:15,290 --> 00:06:16,374
Og så har jeg denne formular.

128
00:06:16,374 --> 00:06:18,081
Og inde i denne
formular, jeg har noget

129
00:06:18,081 --> 00:06:20,200
kaldes en Select, som
er blot en rullemenu

130
00:06:20,200 --> 00:06:22,150
med en masse forskellige muligheder.

131
00:06:22,150 --> 00:06:26,150
Og tilsyneladende når det ændrer sig, når
den indstilling, der er blevet valgt har

132
00:06:26,150 --> 00:06:30,600
ændret sig, jeg vil kalde
en funktion cs50Info,

133
00:06:30,600 --> 00:06:33,190
og så vil jeg
passere i this.value,

134
00:06:33,190 --> 00:06:35,740
hvor det drejer sig om
hvilken løsning blev valgt,

135
00:06:35,740 --> 00:06:39,820
og værdi er en af ​​disse her, mulighed
værdi = lig tom, "Blumberg,"

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

137
00:06:42,610 --> 00:06:45,090
>> Så hvad kan faktisk
ske her, når jeg gør det?

138
00:06:45,090 --> 00:06:48,800
Nå, lad os tage et
se på blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Ligner det er bare en
uddrag af nogle HTML.

141
00:06:53,924 --> 00:06:56,090
Og i virkeligheden, hvad jeg håber
kommer til at ske her

142
00:06:56,090 --> 00:07:00,020
er jeg har tænkt mig at være i stand til at tilslutte
Denne HTML direkte ind i min hjemmeside

143
00:07:00,020 --> 00:07:02,970
uden at skulle genindlæse
siden, således at når

144
00:07:02,970 --> 00:07:07,510
Jeg vælger Hannah fra drop-down
menuen, information om Hannah,

145
00:07:07,510 --> 00:07:11,100
især denne information
her i blumberg.html,

146
00:07:11,100 --> 00:07:12,574
er det dukker op på siden.

147
00:07:12,574 --> 00:07:13,740
Og jeg behøver ikke at opdatere.

148
00:07:13,740 --> 00:07:16,842
Og hvis jeg valgte en anden,
deres oplysninger ville dukke op.

149
00:07:16,842 --> 00:07:17,550
Hvordan gør jeg det?

150
00:07:17,550 --> 00:07:20,290
Igen, dette kræver
os at bruge nogle AJAX.

151
00:07:20,290 --> 00:07:22,540
Og så vil vi åbne op ajax.js.

152
00:07:22,540 --> 00:07:25,550
Og her er, at funktion, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Hvis navnet ikke er noget, returnere jeg.

154
00:07:27,410 --> 00:07:31,450
Jeg har ikke tænkt mig at gøre noget, hvis
den tomme indstilling er valgt.

155
00:07:31,450 --> 00:07:35,420
Ellers vil jeg
oprette en ny XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
Og så vil jeg sige, når
readyState ændringer, kalder denne funktion.

157
00:07:39,020 --> 00:07:43,630
>> Og hvis readyState er
4 og status er 200,

158
00:07:43,630 --> 00:07:45,740
her er en lille smule
af jQuery på linje 13.

159
00:07:45,740 --> 00:07:50,450
Men alt jeg gør er at sige,
ændre indholdet af infodiv

160
00:07:50,450 --> 00:07:57,820
at være, hvad jeg kom tilbage som en
respons fra min HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Hvad er min HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Tja, det er rigtigt
her på linje 18 og 19.

163
00:08:02,020 --> 00:08:08,550
Linje 18, jeg dybest set at forberede
en GET anmodning om navn + .html.

164
00:08:08,550 --> 00:08:11,170
Og igen, navn her er
argumentet om, at var

165
00:08:11,170 --> 00:08:14,280
bestået i som en parameter til cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Så dybest set, jeg passerer i nogens
navn, som var det sæt af muligheder

167
00:08:18,460 --> 00:08:22,980
at vi så i
drop-down menuen i form.

168
00:08:22,980 --> 00:08:24,450
Jeg får det navn.

169
00:08:24,450 --> 00:08:29,530
Og jeg siger, jeg vil gerne have dig til
bedes du skaffe mig, at file.html,

170
00:08:29,530 --> 00:08:31,020
og derefter sende denne anmodning.

171
00:08:31,020 --> 00:08:34,820
>> Og så onreadystatechange går
at være lytte og venter og venter

172
00:08:34,820 --> 00:08:39,460
og venter, indtil readyState
er 4, og status er 200.

173
00:08:39,460 --> 00:08:44,970
Så det er klar til at blive serveret,
og anmodningen var vellykket.

174
00:08:44,970 --> 00:08:49,500
Og derefter, hvis det er, det kommer til at
ændre indholdet af infodiv

175
00:08:49,500 --> 00:08:53,030
at være svaret tekst, jeg fik tilbage.

176
00:08:53,030 --> 00:08:54,930
>> Så lad os se, hvordan dette
kan faktisk fungere.

177
00:08:54,930 --> 00:08:58,860
Så vi vil hovedet over til min browser
vindue, og vi vil se her.

178
00:08:58,860 --> 00:09:01,359
Så lad os tage et kig på
hvad der foregår her i AJAX.

179
00:09:01,359 --> 00:09:03,400
Så vi vil vælge nogen
fra drop-down menuen.

180
00:09:03,400 --> 00:09:06,079
Så i dette tilfælde, lad os
bare vælge Hannah.

181
00:09:06,079 --> 00:09:08,120
Og bemærk, at Hannahs
har ændret sig,

182
00:09:08,120 --> 00:09:11,030
men jeg havde ikke any-- min
side ikke helt genindlæse.

183
00:09:11,030 --> 00:09:12,190
De ting opholdt sig.

184
00:09:12,190 --> 00:09:13,320
De fleste af de ting opholdt sig.

185
00:09:13,320 --> 00:09:14,320
AJAX Test ændrede sig ikke.

186
00:09:14,320 --> 00:09:16,700
Selve knappen, dette
drop-down menuen ikke ændre.

187
00:09:16,700 --> 00:09:18,260
Men information der gjorde forandring.

188
00:09:18,260 --> 00:09:20,218
Og afhængigt af hvor
hurtigt min computer bevæger sig,

189
00:09:20,218 --> 00:09:24,430
du faktisk kan se, at indholdet
forsvinder, og derefter dukker op igen virkelig

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

191
00:09:24,930 --> 00:09:27,320
Det er det indhold, der
slettet fra infodiv,

192
00:09:27,320 --> 00:09:29,940
og derefter erstattet med en
nye asynkron anmodning.

193
00:09:29,940 --> 00:09:34,410
>> Så hvis jeg skifter det at være sige,
Rob-- og igen, tage et kig,

194
00:09:34,410 --> 00:09:38,379
og måske vil vi se det faktisk
forsvinde og dukke op igen hurtigt.

195
00:09:38,379 --> 00:09:38,920
Du ser det?

196
00:09:38,920 --> 00:09:41,400
Hvordan det blot dukkede væk,
og så er det genopfyldes?

197
00:09:41,400 --> 00:09:43,640
Det er anmodningen AJAX
slags finder sted.

198
00:09:43,640 --> 00:09:46,060
Og så afhængig af
person, jeg vælger, jeg er

199
00:09:46,060 --> 00:09:50,690
gør en anden asynkron
anmodning til en anden fil

200
00:09:50,690 --> 00:09:52,730
at jeg har på min server.

201
00:09:52,730 --> 00:09:55,550
Og indholdet af min
infodiv opdaterer,

202
00:09:55,550 --> 00:09:58,457
baseret på hvilke af disse jeg har valgt.

203
00:09:58,457 --> 00:10:00,040
Så det er virkelig alt der er til AJAX.

204
00:10:00,040 --> 00:10:04,090
Det giver os mulighed for at gøre disse asynkron
anmodninger, opdateringer til en side.

205
00:10:04,090 --> 00:10:06,450
Uden at skulle
opdatere hele siden,

206
00:10:06,450 --> 00:10:08,520
vi kommer til at få nye
indhold fra det ved at gøre

207
00:10:08,520 --> 00:10:11,170
en ny, frisk anmodning til serveren.

208
00:10:11,170 --> 00:10:13,420
Og så kan vores sider blive
ganske lidt mere dynamisk.

209
00:10:13,420 --> 00:10:15,128
>> Og som vi får mere
og mere avancerede, du

210
00:10:15,128 --> 00:10:17,700
måske få ting som
siger, din indbakke,

211
00:10:17,700 --> 00:10:19,850
hvor du ikke behøver at gøre noget.

212
00:10:19,850 --> 00:10:22,560
Du behøver ikke at klikke på en
drop-down menuen eller klik på noget,

213
00:10:22,560 --> 00:10:25,920
og lige pludselig, din nyeste
e dukker op på toppen.

214
00:10:25,920 --> 00:10:27,840
Det er også bare en anmodning Ajax.

215
00:10:27,840 --> 00:10:30,460
Ajax anmoder din
server, e-mail-server,

216
00:10:30,460 --> 00:10:33,360
at sende over alle de oplysninger
om dine seneste e-mails,

217
00:10:33,360 --> 00:10:38,110
og ændre, hvad du ser på
skærmen for at være din nyeste sæt af e-mails.

218
00:10:38,110 --> 00:10:41,080
Og hvis du har en ny i
der, så indholdet af denne div

219
00:10:41,080 --> 00:10:44,580
skifte for at afspejle
det opdaterede indhold.

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

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

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