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

2
00:00:00,500 --> 00:00:04,810
[MUSIC SPILLE]

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

4
00:00:06,940 --> 00:00:12,120
liksom faller under paraplyen
Javascript er noe som kalles AJAX.

5
00:00:12,120 --> 00:00:15,310
Frem til dette punktet, vår
interaksjon med Javascript

6
00:00:15,310 --> 00:00:17,727
har vært begrenset til en presse
knappen og noe skjer.

7
00:00:17,727 --> 00:00:19,560
Og spesifikt,
noe som skjer

8
00:00:19,560 --> 00:00:22,950
er våre nettsteder ser og føles endringer.

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

10
00:00:23,450 --> 00:00:26,540
Som særlig i
Document Object Model video,

11
00:00:26,540 --> 00:00:29,060
Jeg endret bakgrunnsfargen.

12
00:00:29,060 --> 00:00:33,240
Men da jeg gjorde det, hadde jeg ikke
å gjøre noen spesielle ekstra forespørsler.

13
00:00:33,240 --> 00:00:36,800
Jeg trengte ikke å be om at
serveren sende meg en ny side.

14
00:00:36,800 --> 00:00:39,620
Jeg endret nettopp det jeg allerede hadde.

15
00:00:39,620 --> 00:00:42,245
Jeg trengte ikke å laste siden min,
og ting definitivt endret,

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

17
00:00:43,760 --> 00:00:48,400
Men det er definitivt noen
manual brukermedvirkning involvert.

18
00:00:48,400 --> 00:00:53,140
AJAX er en kul teknikk som gjør at
oss å oppdatere innholdet på en side,

19
00:00:53,140 --> 00:00:55,750
og ikke bare utseendet og
føler, uten omlasting.

20
00:00:55,750 --> 00:00:58,610
>> Og spesielt når jeg
si oppdatere innholdet på en side,

21
00:00:58,610 --> 00:01:01,990
Jeg sier ikke at vi omskrive
siden ved hjelp av Javascript.

22
00:01:01,990 --> 00:01:06,560
Jeg sier vi faktisk be
mer informasjon fra serveren

23
00:01:06,560 --> 00:01:08,640
uten vår side å måtte lesse.

24
00:01:08,640 --> 00:01:10,850
>> Nå som liksom litt av
en mer avansert teknikk

25
00:01:10,850 --> 00:01:11,950
at vi kommer til å snakke
om i denne videoen.

26
00:01:11,950 --> 00:01:13,720
Vi kommer til å ha noen interaksjon.

27
00:01:13,720 --> 00:01:17,750
Men når vi gjør det, kommer jeg til å være
gjøre forespørsler til webserveren.

28
00:01:17,750 --> 00:01:21,140
I dette tilfellet, akkurat hva som er
kjører min Apache webserver.

29
00:01:21,140 --> 00:01:25,010
Jeg kommer til å være å gjøre ytterligere
forespørsler mens jeg besøker en nettside,

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

31
00:01:26,890 --> 00:01:30,000
>> Det er bare kommer til
asynkront oppdatere siden min.

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

33
00:01:31,840 --> 00:01:35,400
er Asynkron Javascript og XML.

34
00:01:35,400 --> 00:01:37,910
XML er en annen form for markering
språk, og du kan sortere på

35
00:01:37,910 --> 00:01:39,680
tenke på det akkurat som HTML.

36
00:01:39,680 --> 00:01:42,990
Det er ikke helt det samme, men
det er i utgangspunktet bare et kodespråk.

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

38
00:01:47,770 --> 00:01:50,590
>> Så for å kunne bruke dette
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
er ikke et eget programmeringsspråk.

40
00:01:52,230 --> 00:01:55,300
Det er bare en slags
sett techniques-- vi

41
00:01:55,300 --> 00:01:57,870
trenger for å lage en spesiell
Javascript objekt, som

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

43
00:02:00,689 --> 00:02:01,980
Nå er det veldig enkelt å gjøre dette.

44
00:02:01,980 --> 00:02:04,550
Vi bare si var, uansett
vi ønsker å kalle dette objektet,

45
00:02:04,550 --> 00:02:07,030
tilsvarer nye XMLHttpRequest.

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

47
00:02:11,050 --> 00:02:14,370
eller en XMLHttpRequest
objekt, som vil tillate

48
00:02:14,370 --> 00:02:18,360
oss til asynkront oppdatere vår side.

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

50
00:02:23,100 --> 00:02:27,760
vi må gjøre noe til sin
onreadystatechange oppførsel.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
atferd er egentlig bare

52
00:02:30,360 --> 00:02:34,080
Når du gjør en forespørsel
til en nettside, siden

53
00:02:34,080 --> 00:02:35,880
går gjennom et antall trinn.

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

55
00:02:37,370 --> 00:02:39,860
Da har anmodning vært
sendt, men ikke handlet på.

56
00:02:39,860 --> 00:02:41,580
Da forespørselen har blitt handlet på.

57
00:02:41,580 --> 00:02:43,680
Deretter forespørselen er
blir sendt tilbake til deg.

58
00:02:43,680 --> 00:02:46,930
>> Deretter er en forespørsel
fullastet på siden din.

59
00:02:46,930 --> 00:02:48,640
De er forskjellige stater.

60
00:02:48,640 --> 00:02:53,890
Og så vi må sette vår
nye XMLHttpRequest objektet

61
00:02:53,890 --> 00:02:58,740
å endre seg når de er klare tilstandsendringer.

62
00:02:58,740 --> 00:03:01,925
Og typisk, vi gjør dette ved å
å definere en anonym funksjon, hvilken

63
00:03:01,925 --> 00:03:04,490
vi er kjent med fra
Javascript nå, at

64
00:03:04,490 --> 00:03:09,840
kalles Når klar tilstandsendringer.

65
00:03:09,840 --> 00:03:11,340
Det er egentlig ikke så mye mer enn det.

66
00:03:11,340 --> 00:03:14,340
Vi kommer bare til å bli å definere en
anonym funksjon, liksom liker det

67
00:03:14,340 --> 00:03:16,440
vi gjorde i
Javascript, der vi ville

68
00:03:16,440 --> 00:03:18,750
har en anonym funksjon
svare på en på klikk,

69
00:03:18,750 --> 00:03:23,230
eller når vi gjorde et kart over
de ulike objektene i en matrise.

70
00:03:23,230 --> 00:03:25,220
>> Noe skjedde da
noe ble klikket.

71
00:03:25,220 --> 00:03:28,810
I dette tilfellet er det bare noe er
skjer når staten vår side

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

73
00:03:30,160 --> 00:03:32,730
Det er to andre eiendommer
som er slags of-- de er ikke

74
00:03:32,730 --> 00:03:35,524
de eneste egenskapene som er
iboende til XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
men de er ganske viktige.

76
00:03:36,940 --> 00:03:39,815
Det er noe som heter readyState,
som som du kan sikkert gjette,

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

78
00:03:41,750 --> 00:03:44,250
Det faktisk forteller deg
hva readyState er.

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

80
00:03:46,289 --> 00:03:48,080
og de slags lag
tilsvare hva

81
00:03:48,080 --> 00:03:50,030
Jeg var bare snakk om en andre siden.

82
00:03:50,030 --> 00:03:53,100
>> Og da status som
forhåpentligvis hvis alt gikk OK,

83
00:03:53,100 --> 00:03:56,710
er 200, som er en forkortelse
for, selvfølgelig, OK,

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

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

86
00:04:03,735 --> 00:04:07,940
Og hvis vår klar tilstand
er fire, og responsen

87
00:04:07,940 --> 00:04:11,490
er klar til å bli satt på
side, og statusen er 200,

88
00:04:11,490 --> 00:04:13,580
vi var i stand til å gjøre
alt hell,

89
00:04:13,580 --> 00:04:17,209
Nå kan vi asynkront
oppdatere vår side

90
00:04:17,209 --> 00:04:21,730
uten å måtte laste
hele innholdet i den.

91
00:04:21,730 --> 00:04:27,710
>> Etter at vi har definert hva som skjer
til onreadystatechange atferd,

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

93
00:04:31,020 --> 00:04:33,900
så alt vi trenger å gjøre er å
åpne opp en asynkron

94
00:04:33,900 --> 00:04:38,530
forespørsel, som er bare å gjøre
En HTTP generelt GET forespørsel.

95
00:04:38,530 --> 00:04:41,950
Bare gjør det programmatisk,
i stedet for gjennom vår nettleser.

96
00:04:41,950 --> 00:04:43,786
Og så sender vi at forespørselen.

97
00:04:43,786 --> 00:04:45,660
Så hva betyr dette kanskje
se ut i sammenheng?

98
00:04:45,660 --> 00:04:49,790
Så her er en funksjon som
avtaler med AJAX forespørsler.

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

100
00:04:50,290 --> 00:04:52,430
Og jeg har vilkårlig sa
Det aksepterer et argument.

101
00:04:52,430 --> 00:04:55,550
Og dette er en slags
Generelt skjelett her.

102
00:04:55,550 --> 00:05:00,890
Helt i begynnelsen, får vi
oss selv en ny XMLHttpRequest objektet.

103
00:05:00,890 --> 00:05:03,830
Så, jeg trenger å sette
onreadystatechange oppførsel.

104
00:05:03,830 --> 00:05:06,970
Og så kommer jeg til å si
når readyState endringer,

105
00:05:06,970 --> 00:05:10,110
Jeg vil at du skal kalle denne funksjonen.

106
00:05:10,110 --> 00:05:12,570
>> Som kommer til å be
Spørsmålet om den readyState

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

108
00:05:17,240 --> 00:05:20,799
så vi hadde en vellykket forespørsel, jeg
ønsker å gjøre noe til siden.

109
00:05:20,799 --> 00:05:22,590
Og vi vil ta en titt
ved et eksempel på hva

110
00:05:22,590 --> 00:05:25,010
at noe kan være i et sekund.

111
00:05:25,010 --> 00:05:27,830
Så da, nå har jeg definert
min anonym funksjon,

112
00:05:27,830 --> 00:05:31,340
mitt svar funksjon når
de readyState endringer.

113
00:05:31,340 --> 00:05:37,120
>> Så da trenger jeg bare å åpne opp en
be, hjelp av Open-metoden.

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

115
00:05:39,160 --> 00:05:41,980
Og la oss ta en titt på
et mer konkret eksempel

116
00:05:41,980 --> 00:05:46,290
av hva AJAX kan gjøre på våre nettsider.

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

118
00:05:49,740 --> 00:05:53,620
Og jeg har fått en informasjons går
her og en slags rullegardinmenyen.

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

120
00:05:55,390 --> 00:05:59,150
Men jeg tror vi skal nå ta en
se på selve kildekoden.

121
00:05:59,150 --> 00:06:01,080
Og så, jeg kommer til å åpne opp home.html.

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

123
00:06:03,490 --> 00:06:04,740
Og vi får se hva som skjer.

124
00:06:04,740 --> 00:06:08,240
Så opp på toppen her, har jeg
noen Script ting som skjer.

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

126
00:06:12,470 --> 00:06:15,290
og litt informasjon
kommer til å gå dit.

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

128
00:06:16,374 --> 00:06:18,081
Og inne i denne
form, har jeg noe

129
00:06:18,081 --> 00:06:20,200
kalles en Select, som
er bare en rullegardinmeny

130
00:06:20,200 --> 00:06:22,150
med en haug med forskjellige alternativer.

131
00:06:22,150 --> 00:06:26,150
Og tilsynelatende når som endres når
det alternativet som er valgt har

132
00:06:26,150 --> 00:06:30,600
endret seg, kommer jeg til å ringe
noen funksjon cs50Info,

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

134
00:06:33,190 --> 00:06:35,740
hvor dette refererer til
som alternativet ble valgt,

135
00:06:35,740 --> 00:06:39,820
og verdien er en av disse her, alternativ
value = lik 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å hva kan faktisk
skje her når jeg gjør dette?

138
00:06:45,090 --> 00:06:48,800
Vel, la oss ta en
se på blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Ser ut som det er bare en
snippet av noen HTML.

141
00:06:53,924 --> 00:06:56,090
Og faktisk, det jeg håpet
kommer til å skje her

142
00:06:56,090 --> 00:07:00,020
er jeg kommer til å være i stand til å koble
dette Html direkte inn i min nettside

143
00:07:00,020 --> 00:07:02,970
uten å måtte laste
siden, slik at når

144
00:07:02,970 --> 00:07:07,510
Jeg velger Hannah fra rullegardin
menyen, informasjon om Hannah,

145
00:07:07,510 --> 00:07:11,100
særlig denne informasjonen
her i blumberg.html,

146
00:07:11,100 --> 00:07:12,574
er hva som dukker opp på siden.

147
00:07:12,574 --> 00:07:13,740
Og jeg trenger ikke å oppdatere.

148
00:07:13,740 --> 00:07:16,842
Og hvis jeg valgte en annen,
deres informasjon vil dukke opp.

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

150
00:07:17,550 --> 00:07:20,290
Igjen, dette krever
oss å bruke noen AJAX.

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

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

153
00:07:25,550 --> 00:07:27,410
Hvis navn er ingenting, jeg kommer tilbake.

154
00:07:27,410 --> 00:07:31,450
Jeg har ikke tenkt å gjøre noe hvis
den tomme alternativet er valgt.

155
00:07:31,450 --> 00:07:35,420
Ellers kommer jeg til å
opprette et nytt XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
Og så kommer jeg til å si, når
readyState endringer, kaller denne funksjonen.

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

158
00:07:43,630 --> 00:07:45,740
her er en liten bit
av jQuery på linje 13.

159
00:07:45,740 --> 00:07:50,450
Men alt jeg gjør er å si,
endre innholdet i infodiv

160
00:07:50,450 --> 00:07:57,820
å være hva jeg kom tilbake som en
respons fra min HttpRequest.

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

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

163
00:08:02,020 --> 00:08:08,550
Linje 18, jeg er i utgangspunktet forbereder
en GET forespørsel om navn + .html.

164
00:08:08,550 --> 00:08:11,170
Og igjen, her er navn
argumentet som var

165
00:08:11,170 --> 00:08:14,280
gått inn som en parameter til cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Så i utgangspunktet er jeg passerer i noens
navn, som var det sett av alternativer

167
00:08:18,460 --> 00:08:22,980
som vi så i
rullegardinmenyen i form.

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

169
00:08:24,450 --> 00:08:29,530
Og jeg sier jeg vil gjerne at du
kan få for meg at file.html,

170
00:08:29,530 --> 00:08:31,020
og deretter sende forespørsel.

171
00:08:31,020 --> 00:08:34,820
>> Og slik at onreadystatechange kommer
å være lytter og venter og venter

172
00:08:34,820 --> 00:08:39,460
og å vente inntil readyState
er fire, og statusen er 200.

173
00:08:39,460 --> 00:08:44,970
Så det er klar til å bli servert,
, og forespørselen var vellykket.

174
00:08:44,970 --> 00:08:49,500
Og så hvis det er, det kommer til å
endre innholdet i infodiv

175
00:08:49,500 --> 00:08:53,030
å være svaret teksten at jeg kom tilbake.

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

177
00:08:54,930 --> 00:08:58,860
Så vi vil gå over til nettleseren min
vindu, og vi vil se her.

178
00:08:58,860 --> 00:09:01,359
Så la oss ta en titt på
hva som skjer her i AJAX.

179
00:09:01,359 --> 00:09:03,400
Så vi vil velge noen
fra rullegardinmenyen.

180
00:09:03,400 --> 00:09:06,079
Slik at i dette tilfellet, la oss
bare velge Hannah.

181
00:09:06,079 --> 00:09:08,120
Og legg merke til at Hannahs
informasjon har endret seg,

182
00:09:08,120 --> 00:09:11,030
men jeg hadde ikke any-- min
side ikke helt på nytt.

183
00:09:11,030 --> 00:09:12,190
Den ting bodde.

184
00:09:12,190 --> 00:09:13,320
Det meste av ting bodde.

185
00:09:13,320 --> 00:09:14,320
AJAX Test ble ikke endret.

186
00:09:14,320 --> 00:09:16,700
Selve knappen, dette
drop-down menyen ble ikke endret.

187
00:09:16,700 --> 00:09:18,260
Men informasjon der gjorde endringen.

188
00:09:18,260 --> 00:09:20,218
Og avhengig av hvordan
raskt min datamaskin trekk,

189
00:09:20,218 --> 00:09:24,430
du kan faktisk se at innholdet
forsvinner og deretter dukker opp igjen virkelig

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

191
00:09:24,930 --> 00:09:27,320
Det er innholdet som
slettet fra infodiv,

192
00:09:27,320 --> 00:09:29,940
og deretter erstattet med en
ny asynkron forespørsel.

193
00:09:29,940 --> 00:09:34,410
>> Så hvis jeg bytter det skal si,
Rob-- og igjen, ta en titt,

194
00:09:34,410 --> 00:09:38,379
og kanskje vi får se det faktisk
forsvinne og dukke opp igjen raskt.

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

196
00:09:38,920 --> 00:09:41,400
Hvordan det bare dukket unna,
og da er det etterfylt?

197
00:09:41,400 --> 00:09:43,640
Det er AJAX forespørsel
slags finner sted.

198
00:09:43,640 --> 00:09:46,060
Og så avhengig
person jeg velger, jeg er

199
00:09:46,060 --> 00:09:50,690
å lage en annen asynkron
forespørsel til en annen fil

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

201
00:09:52,730 --> 00:09:55,550
Og innholdet av mitt
infodiv oppdaterer,

202
00:09:55,550 --> 00:09:58,457
basert på hvilken av disse jeg har valgt.

203
00:09:58,457 --> 00:10:00,040
Så det er egentlig alt som skal til AJAX.

204
00:10:00,040 --> 00:10:04,090
Det tillater oss å gjøre disse asynkron
forespørsler, oppdateringer til en side.

205
00:10:04,090 --> 00:10:06,450
Uten å måtte
oppdatere hele siden,

206
00:10:06,450 --> 00:10:08,520
vi kommer til å få ny
Innholdet fra den ved å gjøre

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

208
00:10:11,170 --> 00:10:13,420
Og så kan våre sider blir
ganske mye mer dynamisk.

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

210
00:10:15,128 --> 00:10:17,700
kan få ting som
si, e-postinnboksen,

211
00:10:17,700 --> 00:10:19,850
der du ikke trenger å gjøre noe.

212
00:10:19,850 --> 00:10:22,560
Du trenger ikke å klikke en
rullegardinmenyen, eller klikk på noe,

213
00:10:22,560 --> 00:10:25,920
og plutselig, din nyeste
e-post dukker opp på toppen.

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

215
00:10:27,840 --> 00:10:30,460
Ajax ber om din
server, e-postserveren,

216
00:10:30,460 --> 00:10:33,360
å sende over all informasjon
om dine siste e-post,

217
00:10:33,360 --> 00:10:38,110
og endre det du ser på
skjermen for å være din nyeste sett med e-poster.

218
00:10:38,110 --> 00:10:41,080
Og hvis du har en ny en i
der, da innholdet av at div

219
00:10:41,080 --> 00:10:44,580
vil endres til å reflektere
det oppdaterte innholdet.

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

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

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