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

2
00:00:00,500 --> 00:00:04,810
[Muziek]

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

4
00:00:06,940 --> 00:00:12,120
soort valt onder de paraplu van
JavaScript is iets genaamd AJAX.

5
00:00:12,120 --> 00:00:15,310
Tot op dit punt, onze
interactie met JavaScript

6
00:00:15,310 --> 00:00:17,727
is beperkt tot duwen
knop en er iets gebeurt.

7
00:00:17,727 --> 00:00:19,560
En in het bijzonder de
iets dat gebeurt

8
00:00:19,560 --> 00:00:22,950
is onze websites kijken en voelen veranderingen.

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

10
00:00:23,450 --> 00:00:26,540
Zoals met name in de
document object model video,

11
00:00:26,540 --> 00:00:29,060
Ik veranderde de achtergrondkleur.

12
00:00:29,060 --> 00:00:33,240
Maar toen ik dat deed, heb ik niet
aan speciale extra verzoeken te doen.

13
00:00:33,240 --> 00:00:36,800
Ik hoefde niet te vragen dat
de server stuur mij een nieuwe pagina.

14
00:00:36,800 --> 00:00:39,620
Ik veranderde wat ik al had.

15
00:00:39,620 --> 00:00:42,245
Ik hoefde niet naar mijn pagina herladen,
en dingen die zeker veranderd,

16
00:00:42,245 --> 00:00:43,760
dus dat is geweldig.

17
00:00:43,760 --> 00:00:48,400
Maar er is zeker enkele
manuele interactie met de gebruiker betrokken.

18
00:00:48,400 --> 00:00:53,140
AJAX is een koele techniek die het mogelijk maakt
ons om de inhoud van een pagina te werken,

19
00:00:53,140 --> 00:00:55,750
en niet alleen de look en
voelen, zonder herladen.

20
00:00:55,750 --> 00:00:58,610
>> En door specifiek als ik
zeggen bijwerken van de inhoud van een pagina,

21
00:00:58,610 --> 00:01:01,990
Ik zeg niet dat we herschrijven
de pagina met behulp van JavaScript.

22
00:01:01,990 --> 00:01:06,560
Ik zeg dat we eigenlijk te vragen
Meer informatie van de server

23
00:01:06,560 --> 00:01:08,640
zonder onze pagina te hoeven herladen.

24
00:01:08,640 --> 00:01:10,850
>> Nu dat soort een beetje
een geavanceerde techniek

25
00:01:10,850 --> 00:01:11,950
dat we gaan praten
over in deze video.

26
00:01:11,950 --> 00:01:13,720
We gaan een aantal interactie.

27
00:01:13,720 --> 00:01:17,750
Maar als we dat doen, ik ga worden
het maken van verzoeken aan de webserver.

28
00:01:17,750 --> 00:01:21,140
In dit geval, wat het
runnen van mijn Apache web server.

29
00:01:21,140 --> 00:01:25,010
Ik ga het maken van extra
verzoeken terwijl ik een bezoek aan een webpagina,

30
00:01:25,010 --> 00:01:26,890
maar mijn pagina niet zal vernieuwen.

31
00:01:26,890 --> 00:01:30,000
>> Het gaat gewoon om
asynchroon werken mijn pagina.

32
00:01:30,000 --> 00:01:31,840
Dat is, in feite,
die AJAX staat voor,

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

34
00:01:35,400 --> 00:01:37,910
XML is een ander soort markup
taal, en u kunt sorteren van

35
00:01:37,910 --> 00:01:39,680
denk aan het net als HTML.

36
00:01:39,680 --> 00:01:42,990
Het is niet helemaal hetzelfde, maar
het is eigenlijk gewoon een opmaaktaal.

37
00:01:42,990 --> 00:01:47,770
Dus het is een asynchrone
JavaScript en een opmaaktaal.

38
00:01:47,770 --> 00:01:50,590
>> Dus om deze te gebruiken
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
is geen aparte programmeertaal.

40
00:01:52,230 --> 00:01:55,300
Het is gewoon een soort van
set van techniques-- we

41
00:01:55,300 --> 00:01:57,870
moet een speciale creëren
JavaScript-object, dat

42
00:01:57,870 --> 00:02:00,689
wordt een XMLHttpRequest genoemd.

43
00:02:00,689 --> 00:02:01,980
Nu, het is heel gemakkelijk om dit te doen.

44
00:02:01,980 --> 00:02:04,550
We zeggen gewoon var, ongeacht
we willen dit object noemen,

45
00:02:04,550 --> 00:02:07,030
is gelijk aan nieuwe XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
En nu hebben we nu verkregen
een AJAX soort object,

47
00:02:11,050 --> 00:02:14,370
of een XMLHttpRequest
object, waarmee

48
00:02:14,370 --> 00:02:18,360
ons asynchroon werken onze pagina.

49
00:02:18,360 --> 00:02:23,100
>> Nadat we hebben gekregen deze nieuwe
object, deze XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
We moeten iets doen om haar
onreadystatechange gedrag.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
gedrag is eigenlijk gewoon

52
00:02:30,360 --> 00:02:34,080
wanneer u een verzoek
naar een webpagina, de pagina

53
00:02:34,080 --> 00:02:35,880
doorloopt een aantal stappen.

54
00:02:35,880 --> 00:02:37,370
Ten eerste heeft een verzoek niet verzonden.

55
00:02:37,370 --> 00:02:39,860
Vervolgens heeft het verzoek geweest
gezonden, maar niet gehandeld.

56
00:02:39,860 --> 00:02:41,580
Dan is het verzoek is gehonoreerd.

57
00:02:41,580 --> 00:02:43,680
Dan is het verzoek
wordt teruggestuurd naar u.

58
00:02:43,680 --> 00:02:46,930
>> Vervolgens het verzoek
in uw pagina volledig geladen.

59
00:02:46,930 --> 00:02:48,640
Dat zijn verschillende staten.

60
00:02:48,640 --> 00:02:53,890
En dus moeten we onze set
nieuwe XMLHttpRequest object

61
00:02:53,890 --> 00:02:58,740
wanneer het klaar staat veranderingen te veranderen.

62
00:02:58,740 --> 00:03:01,925
En meestal doen we dit door
definiëren van een anonieme functie die

63
00:03:01,925 --> 00:03:04,490
we kennen uit
JavaScript nu, dat

64
00:03:04,490 --> 00:03:09,840
wordt aangeroepen wanneer het klaar staat verandert.

65
00:03:09,840 --> 00:03:11,340
Het is echt niet veel meer dan dat.

66
00:03:11,340 --> 00:03:14,340
We gaan gewoon te definiëren van een
anonieme functie, soort graag wat

67
00:03:14,340 --> 00:03:16,440
We deden in
JavaScript, waar we zouden

68
00:03:16,440 --> 00:03:18,750
hebben een anonieme functie
reageren op een aan klik,

69
00:03:18,750 --> 00:03:23,230
of toen we een kaart van het doen
de verschillende voorwerpen in een array.

70
00:03:23,230 --> 00:03:25,220
>> Iets gebeurde toen
iets is geklikt.

71
00:03:25,220 --> 00:03:28,810
In dit geval, het is gewoon iets is
gebeurt wanneer de toestand van onze pagina

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

73
00:03:30,160 --> 00:03:32,730
Er zijn twee andere eigenschappen
dat soort van-- ze zijn niet

74
00:03:32,730 --> 00:03:35,524
de enige eigenschappen die
inherent aan XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
maar ze zijn erg belangrijke.

76
00:03:36,940 --> 00:03:39,815
Er is iets genaamd readyState,
die zoals u waarschijnlijk kunt raden,

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

78
00:03:41,750 --> 00:03:44,250
Het vertelt je eigenlijk
wat de readyState is.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3 en 4 zijn
de mogelijkheden daar,

80
00:03:46,289 --> 00:03:48,080
en ze soort van ongeveer
overeenkomen met wat

81
00:03:48,080 --> 00:03:50,030
Ik was gewoon te praten over een tweede geleden.

82
00:03:50,030 --> 00:03:53,100
>> Dan status, aan
hopelijk als alles ging OK,

83
00:03:53,100 --> 00:03:56,710
200, dat is kort
voor natuurlijk, OK,

84
00:03:56,710 --> 00:03:58,330
die we kennen van http.

85
00:03:58,330 --> 00:04:03,735
Dus we hopen dat ons klaar staat
is vier, en onze status is 200.

86
00:04:03,735 --> 00:04:07,940
En als onze kant staat
vier, en de respons

87
00:04:07,940 --> 00:04:11,490
bereid op worden gelegd
pagina en de status is 200,

88
00:04:11,490 --> 00:04:13,580
we waren in staat om te doen
alles met succes,

89
00:04:13,580 --> 00:04:17,209
Nu kunnen we asynchroon
werken onze pagina

90
00:04:17,209 --> 00:04:21,730
zonder te hoeven herladen
de gehele inhoud van het.

91
00:04:21,730 --> 00:04:27,710
>> Nadat we hebben gedefinieerd wat er gebeurt
de onreadystatechange gedrag

92
00:04:27,710 --> 00:04:31,020
en we hebben gecontroleerd dat readyState
is 4 en status is 200,

93
00:04:31,020 --> 00:04:33,900
dan alles wat we moeten doen is
openstellen van een asynchrone

94
00:04:33,900 --> 00:04:38,530
verzoek, dat alleen maakt
een Http algemeen GET verzoek.

95
00:04:38,530 --> 00:04:41,950
Gewoon doen programmatisch,
in plaats van door middel van onze webbrowser.

96
00:04:41,950 --> 00:04:43,786
En dan sturen we dat verzoek.

97
00:04:43,786 --> 00:04:45,660
Dus wat doet dit misschien
eruit in context?

98
00:04:45,660 --> 00:04:49,790
Dus hier is een functie die
deals met AJAX verzoeken.

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

100
00:04:50,290 --> 00:04:52,430
En ik heb gezegd willekeurig
Het argument accepteert.

101
00:04:52,430 --> 00:04:55,550
En dit een soort van een
algemene skelet hier.

102
00:04:55,550 --> 00:05:00,890
Aan het begin, krijgen we
onszelf een nieuw XMLHttpRequest object.

103
00:05:00,890 --> 00:05:03,830
Dan moet ik het stellen
onreadystatechange gedrag.

104
00:05:03,830 --> 00:05:06,970
En dus ik ga zeggen
wanneer de readyState verandert,

105
00:05:06,970 --> 00:05:10,110
Ik wil dat je deze functie aan te roepen.

106
00:05:10,110 --> 00:05:12,570
>> Die gaat naar de vragen
vraag, indien de readyState

107
00:05:12,570 --> 00:05:17,240
4 is, indien de readyState veranderd
4 zijn en de status was 200,

108
00:05:17,240 --> 00:05:20,799
dus we hadden een succesvolle aanvraag, I
willen iets doen om de pagina te doen.

109
00:05:20,799 --> 00:05:22,590
En we zullen een kijkje nemen
een voorbeeld van wat

110
00:05:22,590 --> 00:05:25,010
dat er iets zou kunnen zijn in een tweede.

111
00:05:25,010 --> 00:05:27,830
Zo dan, nu heb ik gedefinieerd
mijn anonieme functie,

112
00:05:27,830 --> 00:05:31,340
mijn reactie functie wanneer
de readyState verandert.

113
00:05:31,340 --> 00:05:37,120
>> Dus dan moet ik gewoon het openen van een
vragen, met behulp van de Open-methode.

114
00:05:37,120 --> 00:05:39,160
En dan heb ik dat verzoek te verzenden.

115
00:05:39,160 --> 00:05:41,980
En laten we een kijkje nemen op
een concreet voorbeeld

116
00:05:41,980 --> 00:05:46,290
wat AJAX kan doen op onze webpagina's.

117
00:05:46,290 --> 00:05:49,740
Dus ik heb hier een zeer eenvoudige
pagina genaamd home.html.

118
00:05:49,740 --> 00:05:53,620
En ik heb een informatie gaat
hier en een soort van drop-down menu.

119
00:05:53,620 --> 00:05:55,390
>> En we zullen deze opnieuw in één seconde.

120
00:05:55,390 --> 00:05:59,150
Maar ik denk dat we nu moeten nemen
kijken naar de werkelijke broncode.

121
00:05:59,150 --> 00:06:01,080
En dus, ik ga openstellen home.html.

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

123
00:06:03,490 --> 00:06:04,740
En we zullen zien wat er gebeurt.

124
00:06:04,740 --> 00:06:08,240
Dus op naar hier de top, ik heb
sommige JavaScript dingen die er gaande is.

125
00:06:08,240 --> 00:06:12,470
>> En hier, ik heb blijkbaar
een div wiens ID is infodiv,

126
00:06:12,470 --> 00:06:15,290
en wat informatie
gaat er naartoe te gaan.

127
00:06:15,290 --> 00:06:16,374
En dan heb ik dit formulier.

128
00:06:16,374 --> 00:06:18,081
En de binnenkant van deze
vorm, ik heb iets

129
00:06:18,081 --> 00:06:20,200
riep een Select, die
is gewoon een drop-down menu

130
00:06:20,200 --> 00:06:22,150
met een bos van verschillende opties.

131
00:06:22,150 --> 00:06:26,150
En blijkbaar als dat verandert wanneer
de optie die is geselecteerd heeft

132
00:06:26,150 --> 00:06:30,600
veranderd, ik ga om te bellen
een functie cs50Info,

133
00:06:30,600 --> 00:06:33,190
en dan ga ik
passeren this.value,

134
00:06:33,190 --> 00:06:35,740
wanneer dit verwijst naar
welke optie is geselecteerd,

135
00:06:35,740 --> 00:06:39,820
en de waarde is een van deze hier, optie
value = gelijk leeg, "Blumberg,"

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

137
00:06:42,610 --> 00:06:45,090
>> Dus wat zou eigenlijk
gebeuren hier toen ik dit doen?

138
00:06:45,090 --> 00:06:48,800
Nou, laten we eens een
kijk naar blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Lijkt alsof het is gewoon een
fragment van enkele HTML.

141
00:06:53,924 --> 00:06:56,090
En in feite, wat ik hoop
er gaat gebeuren hier

142
00:06:56,090 --> 00:07:00,020
is dat ik ga in staat zijn om aan te sluiten
Deze HTML direct in mijn webpagina

143
00:07:00,020 --> 00:07:02,970
zonder te hoeven herladen
de pagina, zodanig dat wanneer

144
00:07:02,970 --> 00:07:07,510
Kies ik Hannah uit het drop-down
menu, informatie over Hannah,

145
00:07:07,510 --> 00:07:11,100
Met name deze informatie
hier in blumberg.html,

146
00:07:11,100 --> 00:07:12,574
wat verschijnt op de pagina.

147
00:07:12,574 --> 00:07:13,740
En ik heb niet te vernieuwen.

148
00:07:13,740 --> 00:07:16,842
En als ik koos voor iemand anders,
hun informatie zou opdagen.

149
00:07:16,842 --> 00:07:17,550
Hoe doe ik dit?

150
00:07:17,550 --> 00:07:20,290
Ook dit vereist
ons naar een aantal AJAX gebruiken.

151
00:07:20,290 --> 00:07:22,540
En dus zullen we openstellen ajax.js.

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

153
00:07:25,550 --> 00:07:27,410
Als de naam is er niets, ik terug.

154
00:07:27,410 --> 00:07:31,450
Ik ben niet van plan om iets te doen als
de lege optie is gekozen.

155
00:07:31,450 --> 00:07:35,420
Anders ga ik
maak een nieuw XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
En dan ga ik om te zeggen, wanneer de
readyState veranderingen, noemen deze functie.

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

158
00:07:43,630 --> 00:07:45,740
hier is een beetje
van jQuery op lijn 13.

159
00:07:45,740 --> 00:07:50,450
Maar alles wat ik doe is te zeggen,
de inhoud van infodiv veranderen

160
00:07:50,450 --> 00:07:57,820
te zijn wat ik terug als een
reactie van mijn HttpRequest.

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

162
00:07:59,590 --> 00:08:02,020
Nou, dat klopt
hier op lijn 18 en 19.

163
00:08:02,020 --> 00:08:08,550
Lijn 18, ben ik eigenlijk voorbereiding
een GET verzoek om de naam + .html.

164
00:08:08,550 --> 00:08:11,170
En nogmaals, de naam is hier
het argument dat was

165
00:08:11,170 --> 00:08:14,280
doorgegeven als een parameter om cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Dus eigenlijk, ik ben passeren in iemands
te noemen, die deze set opties was

167
00:08:18,460 --> 00:08:22,980
die we zagen in de
drop-down menu in de vorm.

168
00:08:22,980 --> 00:08:24,450
Ik krijg die naam.

169
00:08:24,450 --> 00:08:29,530
En ik zeg ik zou graag willen dat u
gelieve te krijgen voor mij dat file.html,

170
00:08:29,530 --> 00:08:31,020
en stuur vervolgens dat verzoek.

171
00:08:31,020 --> 00:08:34,820
>> En zodat onreadystatechange gaat
te luisteren en wachten en wachten

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

173
00:08:39,460 --> 00:08:44,970
Dus het is klaar om te worden geserveerd,
en het verzoek succesvol was.

174
00:08:44,970 --> 00:08:49,500
En als het is, het gaat om
de inhoud van infodiv veranderen

175
00:08:49,500 --> 00:08:53,030
om de reactie tekst dat ik terug.

176
00:08:53,030 --> 00:08:54,930
>> Dus laten we zien hoe dit
eigenlijk zou kunnen werken.

177
00:08:54,930 --> 00:08:58,860
Dus we zullen het hoofd naar mijn browser
venster, en we zullen hier kijken.

178
00:08:58,860 --> 00:09:01,359
Dus laten we een kijkje nemen op
wat er hier in AJAX.

179
00:09:01,359 --> 00:09:03,400
Dus we iemand kiezen
uit het drop-down menu.

180
00:09:03,400 --> 00:09:06,079
Dus in dit geval, laten we
gewoon kiezen voor Hannah.

181
00:09:06,079 --> 00:09:08,120
En bericht dat Hannah's
zijn gewijzigd,

182
00:09:08,120 --> 00:09:11,030
maar ik heb niet any-- mijn
pagina niet helemaal opnieuw te laden.

183
00:09:11,030 --> 00:09:12,190
Het spul gebleven.

184
00:09:12,190 --> 00:09:13,320
Het merendeel van het spul gebleven.

185
00:09:13,320 --> 00:09:14,320
AJAX test niet veranderen.

186
00:09:14,320 --> 00:09:16,700
De knop zelf, dit
drop-down menu veranderde niet.

187
00:09:16,700 --> 00:09:18,260
Maar de informatie daar deed veranderen.

188
00:09:18,260 --> 00:09:20,218
En afhankelijk van hoe
snel mijn computer zetten,

189
00:09:20,218 --> 00:09:24,430
je eigenlijk zou kunnen zien dat de inhoud
verdwijnt en vervolgens verschijnt weer echt

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

191
00:09:24,930 --> 00:09:27,320
Dat is de inhoud wordt
verwijderd uit infodiv,

192
00:09:27,320 --> 00:09:29,940
en vervolgens vervangen door een
nieuwe asynchrone aanvraag.

193
00:09:29,940 --> 00:09:34,410
>> Dus als ik zet hem te zeggen:
Rob-- en opnieuw, een kijkje nemen,

194
00:09:34,410 --> 00:09:38,379
en misschien zullen we het eigenlijk zien
verdwijnen en snel weer verschijnen.

195
00:09:38,379 --> 00:09:38,920
Jij ziet dat?

196
00:09:38,920 --> 00:09:41,400
Hoe het kwam even verderop,
en dan is het bijgevuld?

197
00:09:41,400 --> 00:09:43,640
Dat is de AJAX verzoek
soort plaats.

198
00:09:43,640 --> 00:09:46,060
En dus afhankelijk van de
persoon die ik kies, ik ben

199
00:09:46,060 --> 00:09:50,690
waardoor een andere asynchrone
verzoek aan een ander bestand

200
00:09:50,690 --> 00:09:52,730
dat ik op mijn server.

201
00:09:52,730 --> 00:09:55,550
En de inhoud van het
infodiv bijwerken,

202
00:09:55,550 --> 00:09:58,457
op basis van welke van deze ik heb gekozen.

203
00:09:58,457 --> 00:10:00,040
Dus dat is eigenlijk alles wat er is AJAX.

204
00:10:00,040 --> 00:10:04,090
Het stelt ons in staat om deze asynchrone maken
verzoeken, updates van een pagina.

205
00:10:04,090 --> 00:10:06,450
Zonder
Vernieuw de hele pagina,

206
00:10:06,450 --> 00:10:08,520
we gaan naar nieuwe krijgen
inhoud ervan door

207
00:10:08,520 --> 00:10:11,170
een nieuwe frisse verzoek naar de server.

208
00:10:11,170 --> 00:10:13,420
En dus onze pagina's kunnen worden
heel wat meer dynamiek.

209
00:10:13,420 --> 00:10:15,128
>> En naarmate we meer
en meer geavanceerde, u

210
00:10:15,128 --> 00:10:17,700
misschien dingen zoals krijgen
laten we zeggen, uw e-mail inbox,

211
00:10:17,700 --> 00:10:19,850
waar je niet hoeft niets te doen.

212
00:10:19,850 --> 00:10:22,560
Je hoeft niet naar een klik
drop-down menu of klik op om het even wat,

213
00:10:22,560 --> 00:10:25,920
en alle van een plotselinge, uw nieuwste
e-mail verschijnt aan de top.

214
00:10:25,920 --> 00:10:27,840
Dat is ook slechts een Ajax-verzoek.

215
00:10:27,840 --> 00:10:30,460
Ajax vraagt ​​uw
server, de e-mailserver,

216
00:10:30,460 --> 00:10:33,360
te sturen over alle informatie
over je laatste e-mails,

217
00:10:33,360 --> 00:10:38,110
en het veranderen van wat je ziet op de
scherm om uw nieuwste set van e-mails zijn.

218
00:10:38,110 --> 00:10:41,080
En als je een nieuwe in
er zijn, dan is de inhoud van de div

219
00:10:41,080 --> 00:10:44,580
verandert reflecteren
de bijgewerkte inhoud.

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

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

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