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

2
00:00:00,500 --> 00:00:04,810
[MUSIK SPELA]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Så ett mer
slags föreställning om att

4
00:00:06,940 --> 00:00:12,120
sorts faller inom ramen för
JavaScript är något som kallas AJAX.

5
00:00:12,120 --> 00:00:15,310
Fram till denna punkt, vår
interaktion med JavaScript

6
00:00:15,310 --> 00:00:17,727
har begränsats till att driva en
knappen och något händer.

7
00:00:17,727 --> 00:00:19,560
Och specifikt
något som händer

8
00:00:19,560 --> 00:00:22,950
är våra webbplatser ser ut och känns förändringar.

9
00:00:22,950 --> 00:00:23,450
Höger?

10
00:00:23,450 --> 00:00:26,540
Liksom i synnerhet i
Document Object Model video,

11
00:00:26,540 --> 00:00:29,060
Jag ändrade bakgrundsfärgen.

12
00:00:29,060 --> 00:00:33,240
Men när jag gjorde det, jag har inte
göra några särskilda extra önskemål.

13
00:00:33,240 --> 00:00:36,800
Jag behövde inte begära att
servern skicka mig en ny sida.

14
00:00:36,800 --> 00:00:39,620
Jag ändrade bara vad jag redan hade.

15
00:00:39,620 --> 00:00:42,245
Jag behövde inte ladda min sida,
och saker och ting definitivt förändrats,

16
00:00:42,245 --> 00:00:43,760
så det är bra.

17
00:00:43,760 --> 00:00:48,400
Men det finns definitivt några
manuell interaktion användar inblandade.

18
00:00:48,400 --> 00:00:53,140
AJAX är en cool teknik som gör det möjligt
oss att uppdatera en sidas innehåll,

19
00:00:53,140 --> 00:00:55,750
och inte bara utseendet och
känna, utan omlastning.

20
00:00:55,750 --> 00:00:58,610
>> Och genom att specifikt när jag
säger uppdatera en sidas innehåll,

21
00:00:58,610 --> 00:01:01,990
Jag säger inte att vi skriva
sidan med hjälp av JavaScript.

22
00:01:01,990 --> 00:01:06,560
Jag säger att vi faktiskt begär
Mer information från servern

23
00:01:06,560 --> 00:01:08,640
utan vår sida att behöva ladda om.

24
00:01:08,640 --> 00:01:10,850
>> Nu den sortens lite
en mer avancerad teknik

25
00:01:10,850 --> 00:01:11,950
att vi kommer att prata
om i den här videon.

26
00:01:11,950 --> 00:01:13,720
Vi kommer att ha lite interaktion.

27
00:01:13,720 --> 00:01:17,750
Men när vi gör, jag kommer att vara
gör förfrågningar till webbservern.

28
00:01:17,750 --> 00:01:21,140
I det här fallet, precis vad är
kör min webbservern Apache.

29
00:01:21,140 --> 00:01:25,010
Jag kommer att göra ytterligare
förfrågningar medan jag besöker en webbsida,

30
00:01:25,010 --> 00:01:26,890
men min sida kommer inte att uppdateras.

31
00:01:26,890 --> 00:01:30,000
>> Det är bara att gå till
asynkront uppdatera min sida.

32
00:01:30,000 --> 00:01:31,840
Och det är i själva verket,
som AJAX står för,

33
00:01:31,840 --> 00:01:35,400
är Asynchronous JavaScript and XML.

34
00:01:35,400 --> 00:01:37,910
XML är en annan typ av uppmärkning
språk, och du kan sortera av

35
00:01:37,910 --> 00:01:39,680
tänka på det precis som HTML.

36
00:01:39,680 --> 00:01:42,990
Det är inte riktigt samma sak, men
det är i princip bara en markup language.

37
00:01:42,990 --> 00:01:47,770
Så det är en asynkron
JavaScript och ett märkningsspråk.

38
00:01:47,770 --> 00:01:50,590
>> Så för att använda den här
Ajax technique-- Ajax

39
00:01:50,590 --> 00:01:52,230
är inte ett separat programmeringsspråk.

40
00:01:52,230 --> 00:01:55,300
Det är bara en slags
uppsättning techniques-- vi

41
00:01:55,300 --> 00:01:57,870
måste skapa en särskild
JavaScript-objekt, som

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

43
00:02:00,689 --> 00:02:01,980
Nu är det mycket lätt att göra detta.

44
00:02:01,980 --> 00:02:04,550
Vi säger bara var, oavsett
Vi vill kalla detta objekt,

45
00:02:04,550 --> 00:02:07,030
är lika med ny XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
Och nu har vi nu fått
en AJAX typ av objekt,

47
00:02:11,050 --> 00:02:14,370
eller en XMLHttpRequest
objekt, vilket gör det möjligt

48
00:02:14,370 --> 00:02:18,360
oss att asynkront uppdatera vår sida.

49
00:02:18,360 --> 00:02:23,100
>> Efter att vi har fått detta nya
objekt, detta XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
Vi måste göra något för att dess
onreadystatechange beteende.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
beteende är egentligen bara

52
00:02:30,360 --> 00:02:34,080
när du gör en begäran
till en webbsida, sidan

53
00:02:34,080 --> 00:02:35,880
går igenom ett antal steg.

54
00:02:35,880 --> 00:02:37,370
För det första har en begäran inte skickats.

55
00:02:37,370 --> 00:02:39,860
Därefter har begäran varit
skickats, men inte agerat på.

56
00:02:39,860 --> 00:02:41,580
Då begäran har agerat på.

57
00:02:41,580 --> 00:02:43,680
Då begäran
skickas tillbaka till dig.

58
00:02:43,680 --> 00:02:46,930
>> Då är begäran
fullastad på din sida.

59
00:02:46,930 --> 00:02:48,640
De är olika tillstånd.

60
00:02:48,640 --> 00:02:53,890
Och så vi måste ställa vår
nya XMLHttpRequest objekt

61
00:02:53,890 --> 00:02:58,740
att ändra när de färdiga tillståndsförändringar.

62
00:02:58,740 --> 00:03:01,925
Och typiskt, vi gör detta genom att
definierar en anonym funktion, som

63
00:03:01,925 --> 00:03:04,490
Vi är bekant med från
JavaScript nu, som

64
00:03:04,490 --> 00:03:09,840
anropas när de färdiga tillståndsförändringar.

65
00:03:09,840 --> 00:03:11,340
Det är verkligen inte mycket mer än så.

66
00:03:11,340 --> 00:03:14,340
Vi ska bara vara att definiera en
anonym funktion, ungefär som vad

67
00:03:14,340 --> 00:03:16,440
vi gjorde i
JavaScript, där vi skulle

68
00:03:16,440 --> 00:03:18,750
har en anonym funktion
svara på en på klick

69
00:03:18,750 --> 00:03:23,230
eller när vi gjorde en karta över
de olika objekten i en array.

70
00:03:23,230 --> 00:03:25,220
>> Något hände när
något klickade.

71
00:03:25,220 --> 00:03:28,810
I det här fallet, det är bara något är
händer när tillståndet i vår sida

72
00:03:28,810 --> 00:03:30,160
förändringar.

73
00:03:30,160 --> 00:03:32,730
Det finns två andra egenskaper
som sorterar of-- de inte är

74
00:03:32,730 --> 00:03:35,524
de enda egenskaper som är
inneboende XMLHttpRequest

75
00:03:35,524 --> 00:03:36,940
men de är ganska viktiga.

76
00:03:36,940 --> 00:03:39,815
Det finns något som kallas readyState,
vilket som ni säkert kan gissa,

77
00:03:39,815 --> 00:03:41,750
är relaterade till onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
Den talar om faktiskt
vad readyState är.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, och 4 är
möjligheterna där,

80
00:03:46,289 --> 00:03:48,080
och de slags ungefär
motsvarar vad

81
00:03:48,080 --> 00:03:50,030
Jag pratade just om en sekund sedan.

82
00:03:50,030 --> 00:03:53,100
>> Och sedan status, som
förhoppningsvis om allt gick OK,

83
00:03:53,100 --> 00:03:56,710
är 200, som är kort
för, naturligtvis, OK,

84
00:03:56,710 --> 00:03:58,330
som vi känner till från http.

85
00:03:58,330 --> 00:04:03,735
Så vi hoppas att våra färdiga tillstånd
är fyra, och vår status är 200.

86
00:04:03,735 --> 00:04:07,940
Och om våra färdiga tillstånd
är fyra, och svaret

87
00:04:07,940 --> 00:04:11,490
är redo att sätta på
sida, och statusen är 200,

88
00:04:11,490 --> 00:04:13,580
vi skulle kunna göra
allt framgångsrikt,

89
00:04:13,580 --> 00:04:17,209
Nu kan vi asynkront
uppdatera vår sida

90
00:04:17,209 --> 00:04:21,730
utan att behöva ladda
hela innehållet av det.

91
00:04:21,730 --> 00:04:27,710
>> Efter att vi har definierat vad som händer
till onreadystatechange beteende,

92
00:04:27,710 --> 00:04:31,020
och vi har kontrollerat att readyState
är 4 och status är 200,

93
00:04:31,020 --> 00:04:33,900
då allt vi behöver göra är
öppna upp en asynkron

94
00:04:33,900 --> 00:04:38,530
begäran, som just gör
en HTTP GET allmänhet begäran.

95
00:04:38,530 --> 00:04:41,950
Bara gör det programmatiskt,
i stället för via vår webbläsare.

96
00:04:41,950 --> 00:04:43,786
Och sedan skickar vi denna begäran.

97
00:04:43,786 --> 00:04:45,660
Så vad gör detta kanske
se ut i sitt sammanhang?

98
00:04:45,660 --> 00:04:49,790
Så här är en funktion som
behandlar AJAX anmodan.

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

100
00:04:50,290 --> 00:04:52,430
Och jag har godtyckligt sagt
den accepterar ett argument.

101
00:04:52,430 --> 00:04:55,550
Och detta ett slags
allmän skelett här.

102
00:04:55,550 --> 00:05:00,890
I början, får vi
oss en ny XMLHttpRequest objekt.

103
00:05:00,890 --> 00:05:03,830
Då måste jag ställa in
onreadystatechange beteende.

104
00:05:03,830 --> 00:05:06,970
Och så jag kommer att säga
när readyState förändringar,

105
00:05:06,970 --> 00:05:10,110
Jag vill att du ringer denna funktion.

106
00:05:10,110 --> 00:05:12,570
>> Som kommer att be
fråga, om readyState

107
00:05:12,570 --> 00:05:17,240
är 4, om readyState har ändrats
att vara 4, och status var 200,

108
00:05:17,240 --> 00:05:20,799
så vi hade en lyckad begäran, jag
vill göra något för att sidan.

109
00:05:20,799 --> 00:05:22,590
Och vi tar en titt
vid ett exempel på vad

110
00:05:22,590 --> 00:05:25,010
att något kan vara på en sekund.

111
00:05:25,010 --> 00:05:27,830
Alltså, nu har jag har definierat
min anonym funktion,

112
00:05:27,830 --> 00:05:31,340
mitt svar funktion när
de readyState förändringar.

113
00:05:31,340 --> 00:05:37,120
>> Så då behöver jag bara öppna upp en
begära hjälp av den öppna samordningsmetoden.

114
00:05:37,120 --> 00:05:39,160
Och sedan, jag skickar denna begäran.

115
00:05:39,160 --> 00:05:41,980
Och låt oss ta en titt på
en mer konkret exempel

116
00:05:41,980 --> 00:05:46,290
vad AJAX kan göra på våra webbsidor.

117
00:05:46,290 --> 00:05:49,740
Så jag har här en mycket enkel
sida kallas home.html.

118
00:05:49,740 --> 00:05:53,620
Och jag har fått ett informations går
här och någon sorts rullgardinsmenyn av.

119
00:05:53,620 --> 00:05:55,390
>> Och vi kommer att se över detta i en sekund.

120
00:05:55,390 --> 00:05:59,150
Men jag tycker att vi borde nu ta en
titta på den faktiska källkoden.

121
00:05:59,150 --> 00:06:01,080
Och så kommer jag att öppna upp home.html.

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

123
00:06:03,490 --> 00:06:04,740
Och vi får se vad som händer.

124
00:06:04,740 --> 00:06:08,240
Så upp högst upp här, har jag
några JavaScript saker som händer.

125
00:06:08,240 --> 00:06:12,470
>> Och här, jag har tydligen
en div vars ID är infodiv,

126
00:06:12,470 --> 00:06:15,290
och viss information
kommer att åka dit.

127
00:06:15,290 --> 00:06:16,374
Och då har jag det här formuläret.

128
00:06:16,374 --> 00:06:18,081
Och insidan av denna
formulär, jag har något

129
00:06:18,081 --> 00:06:20,200
kallas Select, som
är bara en rullgardinsmeny

130
00:06:20,200 --> 00:06:22,150
med en massa olika alternativ.

131
00:06:22,150 --> 00:06:26,150
Och tydligen när som ändras, när
det alternativ som har valts ut har

132
00:06:26,150 --> 00:06:30,600
ändrats, jag ska ringa
någon funktion cs50Info,

133
00:06:30,600 --> 00:06:33,190
och sedan kommer jag att
passera i this.value,

134
00:06:33,190 --> 00:06:35,740
där det rör sig
vilket alternativ valdes,

135
00:06:35,740 --> 00:06:39,820
och värdet är en av dessa här, alternativ
value = lika tom "Blumberg,"

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

137
00:06:42,610 --> 00:06:45,090
>> Så vad kan faktiskt
händer här när jag gör detta?

138
00:06:45,090 --> 00:06:48,800
Nåväl, låt oss ta en
titta 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 är bara en
utdrag av vissa HTML.

141
00:06:53,924 --> 00:06:56,090
Och faktiskt, vad jag hoppas
som kommer att hända här

142
00:06:56,090 --> 00:07:00,020
är jag ska kunna ansluta
denna HTML direkt i min webbsida

143
00:07:00,020 --> 00:07:02,970
utan att behöva ladda
sidan, så att när

144
00:07:02,970 --> 00:07:07,510
Jag väljer Hannah från rullgardins
meny, information om Hannah,

145
00:07:07,510 --> 00:07:11,100
i synnerhet, den här informationen
här i blumberg.html,

146
00:07:11,100 --> 00:07:12,574
är vad som visas upp på sidan.

147
00:07:12,574 --> 00:07:13,740
Och jag behöver inte uppdatera.

148
00:07:13,740 --> 00:07:16,842
Och om jag valde någon annan,
deras uppgifter skulle visa upp.

149
00:07:16,842 --> 00:07:17,550
Hur gör jag detta?

150
00:07:17,550 --> 00:07:20,290
Återigen kräver detta
oss att använda vissa AJAX.

151
00:07:20,290 --> 00:07:22,540
Och så kommer vi att öppna upp ajax.js.

152
00:07:22,540 --> 00:07:25,550
Och här är den funktionen, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Om namnet är ingenting, jag återvänder.

154
00:07:27,410 --> 00:07:31,450
Jag tänker inte göra någonting om
den tomma alternativet har valts.

155
00:07:31,450 --> 00:07:35,420
Annars kommer jag att
skapa ett nytt XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
Och sedan ska jag säga, när
readyState förändringar, kalla denna funktion.

157
00:07:39,020 --> 00:07:43,630
>> Och om readyState är
4 och statusen är 200,

158
00:07:43,630 --> 00:07:45,740
Här är lite
jQuery på rad 13.

159
00:07:45,740 --> 00:07:50,450
Men allt jag gör är att säga,
ändra innehållet i infodiv

160
00:07:50,450 --> 00:07:57,820
att vara vad jag kom tillbaka som en
svar från min httprequest.

161
00:07:57,820 --> 00:07:59,590
>> Vad är min httprequest?

162
00:07:59,590 --> 00:08:02,020
Tja, det är rätt
här på ledningen 18 och 19.

163
00:08:02,020 --> 00:08:08,550
Linje 18, jag i princip förbereder
en GET begäran om namn + .html.

164
00:08:08,550 --> 00:08:11,170
Och återigen, här är namn
argumentet att var

165
00:08:11,170 --> 00:08:14,280
passerade in som en parameter till cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Så i princip är jag passerar någons
namn, vilket var den uppsättning alternativ

167
00:08:18,460 --> 00:08:22,980
som vi såg i
rullgardinsmenyn i formuläret.

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

169
00:08:24,450 --> 00:08:29,530
Och jag säger att jag skulle vilja att ni
vänligen få för mig att file.html,

170
00:08:29,530 --> 00:08:31,020
och sedan skicka denna begäran.

171
00:08:31,020 --> 00:08:34,820
>> Och så att onreadystatechange går
att lyssna och väntar och väntar

172
00:08:34,820 --> 00:08:39,460
och väntar, tills readyState
är 4, och statusen är 200.

173
00:08:39,460 --> 00:08:44,970
Så det är redo att serveras,
och begäran var framgångsrik.

174
00:08:44,970 --> 00:08:49,500
Och sedan om det är, det kommer att
ändra innehållet i infodiv

175
00:08:49,500 --> 00:08:53,030
vara svaret text som jag kom tillbaka.

176
00:08:53,030 --> 00:08:54,930
>> Så låt oss se hur detta
kan faktiskt fungera.

177
00:08:54,930 --> 00:08:58,860
Så vi ska bege dig till min webbläsare
fönstret, och vi kommer att se här.

178
00:08:58,860 --> 00:09:01,359
Så låt oss ta en titt på
vad som händer här i AJAX.

179
00:09:01,359 --> 00:09:03,400
Så vi ska välja någon
från rullgardinsmenyn.

180
00:09:03,400 --> 00:09:06,079
Så i detta fall, låt oss
välj bara Hannah.

181
00:09:06,079 --> 00:09:08,120
Och märker att Hannahs
informationen har ändrats,

182
00:09:08,120 --> 00:09:11,030
men jag har inte any-- min
sida inte helt ladda om.

183
00:09:11,030 --> 00:09:12,190
Grejer stannade.

184
00:09:12,190 --> 00:09:13,320
De flesta av grejer stannade.

185
00:09:13,320 --> 00:09:14,320
AJAX Test förändrades inte.

186
00:09:14,320 --> 00:09:16,700
Själva knappen, detta
rullgardinsmenyn förändrades inte.

187
00:09:16,700 --> 00:09:18,260
Men uppgifter där gjorde förändringen.

188
00:09:18,260 --> 00:09:20,218
Och beroende på hur
snabbt min dator flyttar,

189
00:09:20,218 --> 00:09:24,430
du faktiskt kan se att innehållet
försvinner och sedan dyker upp verkligen

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

191
00:09:24,930 --> 00:09:27,320
Det är innehållet som
bort från infodiv,

192
00:09:27,320 --> 00:09:29,940
och ersattes sedan med en
nya asynkron begäran.

193
00:09:29,940 --> 00:09:34,410
>> Så om jag slå att säga,
Rob-- och igen, ta en titt,

194
00:09:34,410 --> 00:09:38,379
och kanske vi får se det faktiskt
försvinna och dyka upp igen snabbt.

195
00:09:38,379 --> 00:09:38,920
Ser du det där?

196
00:09:38,920 --> 00:09:41,400
Hur det bara poppade bort,
och då är det fyllas?

197
00:09:41,400 --> 00:09:43,640
Det är AJAX begäran
slags äger rum.

198
00:09:43,640 --> 00:09:46,060
Och så beroende på den
person jag väljer, jag är

199
00:09:46,060 --> 00:09:50,690
göra en annan asynkron
förfrågan till en annan fil

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

201
00:09:52,730 --> 00:09:55,550
Och innehållet i min
infodiv uppdaterar,

202
00:09:55,550 --> 00:09:58,457
baserat på vilka av dessa jag valt.

203
00:09:58,457 --> 00:10:00,040
Så det är egentligen allt som finns att AJAX.

204
00:10:00,040 --> 00:10:04,090
Det ger oss möjlighet att göra dessa asynkrona
förfrågningar, uppdateringar till en sida.

205
00:10:04,090 --> 00:10:06,450
Utan att behöva
uppdatera hela sidan,

206
00:10:06,450 --> 00:10:08,520
Vi kommer att få nya
innehåll från den genom att göra

207
00:10:08,520 --> 00:10:11,170
en ny ny begäran till servern.

208
00:10:11,170 --> 00:10:13,420
Och så kan våra sidor bli
ganska lite mer dynamisk.

209
00:10:13,420 --> 00:10:15,128
>> Och när vi får mer
och mer avancerade, du

210
00:10:15,128 --> 00:10:17,700
kan få saker som
säg din e-postbrevlåda,

211
00:10:17,700 --> 00:10:19,850
där du inte behöver göra någonting.

212
00:10:19,850 --> 00:10:22,560
Du behöver inte klicka på en
rullgardinsmenyn eller klicka på någonting,

213
00:10:22,560 --> 00:10:25,920
och helt plötsligt, din nyaste
e-post dyker upp på toppen.

214
00:10:25,920 --> 00:10:27,840
Det är också bara en Ajax begäran.

215
00:10:27,840 --> 00:10:30,460
Ajax begär din
server, e-postservern,

216
00:10:30,460 --> 00:10:33,360
att skicka över all information
om dina senaste e-postmeddelanden,

217
00:10:33,360 --> 00:10:38,110
och ändra vad du ser på
skärm för att vara din nyaste uppsättning av e-post.

218
00:10:38,110 --> 00:10:41,080
Och om du har ett nytt i
där, då innehållet i denna div

219
00:10:41,080 --> 00:10:44,580
kommer att ändras för att återspegla
det uppdaterade innehållet.

220
00:10:44,580 --> 00:10:45,480
Jag är Doug Lloyd.

221
00:10:45,480 --> 00:10:47,500
Detta är CS50.

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