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

2
00:00:00,500 --> 00:00:04,810
[Zenelejátszási]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Tehát még egy
fajta elképzelés, hogy

4
00:00:06,940 --> 00:00:12,120
fajta esik égisze alatt
A JavaScript úgynevezett AJAX.

5
00:00:12,120 --> 00:00:15,310
Eddig a pontig, mi
kölcsönhatás JavaScript

6
00:00:15,310 --> 00:00:17,727
arra korlátozódott, hogy álljon egy
gombot, és valami történik.

7
00:00:17,727 --> 00:00:19,560
És pontosabban, a
valami, ami történik

8
00:00:19,560 --> 00:00:22,950
a mi weboldalak megjelenését változások.

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

10
00:00:23,450 --> 00:00:26,540
Mint különösen a
Document Object Model videó,

11
00:00:26,540 --> 00:00:29,060
Megváltoztattam a háttér színét.

12
00:00:29,060 --> 00:00:33,240
De ha ezt tettem, nem volt
tennie különleges extra kéréseket.

13
00:00:33,240 --> 00:00:36,800
Nem kellett kérni, hogy
A szerver küld nekem egy új oldalt.

14
00:00:36,800 --> 00:00:39,620
Most megváltozott, amit már.

15
00:00:39,620 --> 00:00:42,245
Nem kell újratölteni az oldalam,
és a dolgok határozottan megváltozott,

16
00:00:42,245 --> 00:00:43,760
így ez nagyszerű.

17
00:00:43,760 --> 00:00:48,400
De van határozottan néhány
manuális felhasználói beavatkozás részt.

18
00:00:48,400 --> 00:00:53,140
AJAX egy klassz technika, amely lehetővé teszi
számunkra, hogy frissíteni egy oldal tartalmát,

19
00:00:53,140 --> 00:00:55,750
és nem csak a megjelenését és
úgy érzi, újratöltés nélkül.

20
00:00:55,750 --> 00:00:58,610
>> És pontosan mikor
mondjuk frissítése egy oldal tartalmát,

21
00:00:58,610 --> 00:01:01,990
Nem azt mondom, átírjuk
Az oldal JavaScript segítségével.

22
00:01:01,990 --> 00:01:06,560
Azt mondom, hogy valójában kérni
További információkat a szerver

23
00:01:06,560 --> 00:01:08,640
anélkül oldalunkat, hogy újra.

24
00:01:08,640 --> 00:01:10,850
>> Most, hogy a fajta egy kicsit
egy fejlettebb technika

25
00:01:10,850 --> 00:01:11,950
hogy fogunk beszélni
kb ez a videó.

26
00:01:11,950 --> 00:01:13,720
Fogunk egy kis interakció.

27
00:01:13,720 --> 00:01:17,750
De ha ezt tesszük, megyek is
kérjen a web szerver.

28
00:01:17,750 --> 00:01:21,140
Ebben az esetben, csak mi
fut az Apache webszerver.

29
00:01:21,140 --> 00:01:25,010
Megyek is, hogy további
kéréseket, míg én meglátogatta a weboldalt,

30
00:01:25,010 --> 00:01:26,890
de az oldalamon nem fog frissülni.

31
00:01:26,890 --> 00:01:30,000
>> Ez csak fog
aszinkron frissítse az oldalamat.

32
00:01:30,000 --> 00:01:31,840
És ez, sőt,
amely AJAX jelentése,

33
00:01:31,840 --> 00:01:35,400
az aszinkron JavaScript és XML.

34
00:01:35,400 --> 00:01:37,910
XML egy másik fajta jelölés
nyelvet, és tudod rendezni a

35
00:01:37,910 --> 00:01:39,680
gondolok rá, mint a HTML.

36
00:01:39,680 --> 00:01:42,990
Ez nem egészen ugyanaz, de
ez alapvetően csak egy leíró nyelv.

37
00:01:42,990 --> 00:01:47,770
Szóval ez egy aszinkron
JavaScript és a jelölőnyelv.

38
00:01:47,770 --> 00:01:50,590
>> Így annak érdekében, hogy ezt a
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
nem önálló programozási nyelv.

40
00:01:52,230 --> 00:01:55,300
Ez csak amolyan
sor techniques-- vagyunk

41
00:01:55,300 --> 00:01:57,870
létre kell hozni egy külön
JavaScript objektum, amely

42
00:01:57,870 --> 00:02:00,689
nevezzük XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Most, hogy nagyon könnyű ezt.

44
00:02:01,980 --> 00:02:04,550
Mi csak annyit, var, bármi
akarunk hívni ezt az objektumot,

45
00:02:04,550 --> 00:02:07,030
megegyezik az új XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
És most már megszerzett
AJAX fajta tárgy,

47
00:02:11,050 --> 00:02:14,370
vagy XMLHttpRequest
objektum, amely lehetővé teszi,

48
00:02:14,370 --> 00:02:18,360
számunkra, hogy aszinkron módon frissíti oldalunkat.

49
00:02:18,360 --> 00:02:23,100
>> Miután mi ütött ez az új
objektumot, ez XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
tennünk kell valamit, hogy a
onreadystatechange viselkedését.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
viselkedés tényleg csak

52
00:02:30,360 --> 00:02:34,080
ha olyan kérelmet
hogy egy internetes oldalon, a lap

53
00:02:34,080 --> 00:02:35,880
megy keresztül egy lépések számát.

54
00:02:35,880 --> 00:02:37,370
Először is, a kérelmet nem lett elküldve.

55
00:02:37,370 --> 00:02:39,860
Ezután a kérelmet
elküldött, de nem cselekszenek.

56
00:02:39,860 --> 00:02:41,580
Akkor a kérelem alapján cselekedett.

57
00:02:41,580 --> 00:02:43,680
Ezután a kérés
küldik vissza hozzád.

58
00:02:43,680 --> 00:02:46,930
>> Ezután, a kérés
teljesen betöltődött az oldal.

59
00:02:46,930 --> 00:02:48,640
Ezek különböző államokban.

60
00:02:48,640 --> 00:02:53,890
És ezért meg kell állítani a
új XMLHttpRequest objektumot

61
00:02:53,890 --> 00:02:58,740
változtatni, ha a kész állapotot változásokat.

62
00:02:58,740 --> 00:03:01,925
És általában, mi ezt a
meghatároz egy névtelen függvényt, amely

63
00:03:01,925 --> 00:03:04,490
vagyunk tisztában re
JavaScript most, hogy

64
00:03:04,490 --> 00:03:09,840
nevezzük, amikor a kész állapotot változásokat.

65
00:03:09,840 --> 00:03:11,340
Ez tényleg nem sokkal több annál.

66
00:03:11,340 --> 00:03:14,340
Mi csak lesz meghatározó a
névtelen függvényt, fajta, mint mi

67
00:03:14,340 --> 00:03:16,440
csinálunk itt
JavaScript, ahol mi magunk

68
00:03:16,440 --> 00:03:18,750
Van egy névtelen függvényt
reagálni egy kattintásra,

69
00:03:18,750 --> 00:03:23,230
vagy ha csinálunk egy térképet
A különböző tárgyak egy tömbben.

70
00:03:23,230 --> 00:03:25,220
>> Valami történt, amikor
valami kattant.

71
00:03:25,220 --> 00:03:28,810
Ebben az esetben ez csak valami
történik, ha az állam a mi oldal

72
00:03:28,810 --> 00:03:30,160
változásokat.

73
00:03:30,160 --> 00:03:32,730
Van még két másik ingatlan
amelyek egyfajta of-- ők nem

74
00:03:32,730 --> 00:03:35,524
az egyetlen olyan tulajdonságok, amelyek
rejlő XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
de ők elég fontos is.

76
00:03:36,940 --> 00:03:39,815
Van egy úgynevezett readyState,
amely, mint akkor talán hiszem,

77
00:03:39,815 --> 00:03:41,750
a kapcsolódó onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
Ez valójában azt mondja,
mi a readyState van.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, és 4
A lehetőségek vannak,

80
00:03:46,289 --> 00:03:48,080
és ők egyfajta durván
megfelelnek annak, amit

81
00:03:48,080 --> 00:03:50,030
Én csak beszélek egy másodperccel ezelőtt.

82
00:03:50,030 --> 00:03:53,100
>> És akkor a státust, amelyet
remélhetőleg, ha minden simán ment OK,

83
00:03:53,100 --> 00:03:56,710
200, ami rövid
A természetesen OK,

84
00:03:56,710 --> 00:03:58,330
ami vagyunk tisztában a http.

85
00:03:58,330 --> 00:04:03,735
Így reméljük, hogy a mi kész állapotban
négy, és a mi állapot 200.

86
00:04:03,735 --> 00:04:07,940
És ha a kész állapot
négy, és a válasz

87
00:04:07,940 --> 00:04:11,490
készen kell helyezni a
oldal, és az állapota 200,

88
00:04:11,490 --> 00:04:13,580
tudtuk tenni
mindent sikeresen,

89
00:04:13,580 --> 00:04:17,209
Most már tudjuk aszinkron
frissíteni oldalunkat

90
00:04:17,209 --> 00:04:21,730
anélkül, hogy újra
A teljes tartalmát is.

91
00:04:21,730 --> 00:04:27,710
>> Miután mi már meghatározott, mi történik
A onreadystatechange viselkedés,

92
00:04:27,710 --> 00:04:31,020
és mi már ellenőrizte, hogy readyState
4, és az állapot 200,

93
00:04:31,020 --> 00:04:33,900
akkor minden meg kell tennie,
nyit egy aszinkron

94
00:04:33,900 --> 00:04:38,530
kérést, amely csak hogy
Egy HTTP általában kap kérést.

95
00:04:38,530 --> 00:04:41,950
Csak csinálja programból,
ahelyett, hogy a web böngésző.

96
00:04:41,950 --> 00:04:43,786
És akkor küldünk a kérést.

97
00:04:43,786 --> 00:04:45,660
Mit is jelent ez talán
néznek ki, mint a kontextusban?

98
00:04:45,660 --> 00:04:49,790
Tehát itt egy függvényt, amely
foglalkozik AJAX kérések.

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

100
00:04:50,290 --> 00:04:52,430
És én önkényesen mondta
elfogadja az érvet.

101
00:04:52,430 --> 00:04:55,550
És ez egyfajta
általános csontváz itt.

102
00:04:55,550 --> 00:05:00,890
A kezdet kezdetén, megkapjuk
magunknak egy új XMLHttpRequest objektumot.

103
00:05:00,890 --> 00:05:03,830
Aztán be kell állítani a
onreadystatechange viselkedését.

104
00:05:03,830 --> 00:05:06,970
És így fogok mondani
amikor a readyState változások,

105
00:05:06,970 --> 00:05:10,110
Azt akarom, hogy ezt a funkciót.

106
00:05:10,110 --> 00:05:12,570
>> Melyik fogja kérni a
kérdés, ha a readyState

107
00:05:12,570 --> 00:05:17,240
4, ha a readyState megváltozott
hogy a 4. és az állapot 200 volt,

108
00:05:17,240 --> 00:05:20,799
így volt egy sikeres kérés, én
akar tenni valamit, hogy az oldalon.

109
00:05:20,799 --> 00:05:22,590
És akkor vess egy pillantást
egy példa arra, mi

110
00:05:22,590 --> 00:05:25,010
hogy valami lehet a második.

111
00:05:25,010 --> 00:05:27,830
Tehát, most már definiált
én névtelen függvényt,

112
00:05:27,830 --> 00:05:31,340
a válaszom függvényt, valahányszor
readyState változásokat.

113
00:05:31,340 --> 00:05:37,120
>> Így aztán csak meg kell nyitni egy
kérheti, nyitott módszerét.

114
00:05:37,120 --> 00:05:39,160
És akkor én elküldöm ezt a kérést.

115
00:05:39,160 --> 00:05:41,980
És vessünk egy pillantást
egy konkrét példa

116
00:05:41,980 --> 00:05:46,290
A mi AJAX tehet weboldalunkon.

117
00:05:46,290 --> 00:05:49,740
Szóval van itt egy nagyon egyszerű
Oldal nevű home.html.

118
00:05:49,740 --> 00:05:53,620
És van egy olyan információs megy
Itt és valamiféle legördülő menüből.

119
00:05:53,620 --> 00:05:55,390
>> És akkor újra ezt az egy másodperc alatt.

120
00:05:55,390 --> 00:05:59,150
De azt hiszem, most, hogy egy
nézd meg a tényleges forráskódot.

121
00:05:59,150 --> 00:06:01,080
És így fogok nyitni home.html.

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

123
00:06:03,490 --> 00:06:04,740
És majd meglátjuk, mi történik.

124
00:06:04,740 --> 00:06:08,240
Így akár a legtetején van, azt kell
Egyes JavaScript cucc, ami folyik.

125
00:06:08,240 --> 00:06:12,470
>> És itt, én látszólag
div akinek azonosító infodiv,

126
00:06:12,470 --> 00:06:15,290
és néhány információ
fog menni.

127
00:06:15,290 --> 00:06:16,374
És akkor én ezt az űrlapot.

128
00:06:16,374 --> 00:06:18,081
És belsejét ezen
formában, van valami

129
00:06:18,081 --> 00:06:20,200
úgynevezett Select, amely
csak egy legördülő menüből

130
00:06:20,200 --> 00:06:22,150
egy csomó különböző lehetőségeket.

131
00:06:22,150 --> 00:06:26,150
És úgy tűnik, ha ez megváltozik, ha
a lehetőséget, hogy már kiválasztott rendelkezik

132
00:06:26,150 --> 00:06:30,600
megváltozott, azt fogom hívni
Néhány funkció cs50Info,

133
00:06:30,600 --> 00:06:33,190
majd megyek
át a this.value,

134
00:06:33,190 --> 00:06:35,740
ahol ez a kifejezés
hogy melyik lehetőséget választotta,

135
00:06:35,740 --> 00:06:39,820
és értéke az egyik ilyen van, az opció
value = egyenlő üres, "Blumberg,"

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

137
00:06:42,610 --> 00:06:45,090
>> Tehát mi is valójában
itt történik, ha ezt csinálom?

138
00:06:45,090 --> 00:06:48,800
Nos, vessünk egy
nézd meg blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Úgy néz ki, hogy ez csak egy
részlet a HTML kódot.

141
00:06:53,924 --> 00:06:56,090
És valóban, mi remélem
fog történni itt

142
00:06:56,090 --> 00:07:00,020
A fogom tudni, hogy dugja
Ez a HTML közvetlenül a weboldalamon

143
00:07:00,020 --> 00:07:02,970
anélkül, hogy újra
az oldalt, úgy, hogy amikor

144
00:07:02,970 --> 00:07:07,510
Úgy döntök, Hannah a legördülő
menüben, információkat Hannah,

145
00:07:07,510 --> 00:07:11,100
különösen, ez az információ
itt blumberg.html,

146
00:07:11,100 --> 00:07:12,574
az, ami megjelenik az oldalon.

147
00:07:12,574 --> 00:07:13,740
És nem kell frissíteni.

148
00:07:13,740 --> 00:07:16,842
És ha én választottam valaki más,
az információ fog megjelenni.

149
00:07:16,842 --> 00:07:17,550
Hogyan tudom ezt megtenni?

150
00:07:17,550 --> 00:07:20,290
Ismét, ez megköveteli
számunkra, hogy használja AJAX.

151
00:07:20,290 --> 00:07:22,540
És így fogunk nyitni ajax.js.

152
00:07:22,540 --> 00:07:25,550
És itt van ez a funkció, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Ha név nem más, visszatérek.

154
00:07:27,410 --> 00:07:31,450
Nem fogok csinálni semmit, ha
az üres opciót választották.

155
00:07:31,450 --> 00:07:35,420
Egyébként, én megyek
hozzon létre egy új XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
És akkor fogok mondani, ha a
readyState változások, hívja ezt a funkciót.

157
00:07:39,020 --> 00:07:43,630
>> És ha a readyState van
A 4. és az állapot 200,

158
00:07:43,630 --> 00:07:45,740
itt egy kicsit
jQuery on line 13.

159
00:07:45,740 --> 00:07:50,450
De minden, amit csinálok azt mondja,
tartalmának megváltoztatására infodiv

160
00:07:50,450 --> 00:07:57,820
hogy bármit kaptam vissza, mint egy
válasz az én HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Mi az én HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Nos, ez így van
itt a sorban a 18. és 19..

163
00:08:02,020 --> 00:08:08,550
18. sor, én alapvetően készül
A GET kérelmet név + .html.

164
00:08:08,550 --> 00:08:11,170
És ismét, név itt
Az az érv, hogy a volt

165
00:08:11,170 --> 00:08:14,280
telt, mint a paraméter cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Tehát alapvetően én elhaladó valaki
Íme, amely az volt, hogy az opciókat

167
00:08:18,460 --> 00:08:22,980
hogy láttuk a
legördülő menüből formájában.

168
00:08:22,980 --> 00:08:24,450
Kezdek ezt a nevet.

169
00:08:24,450 --> 00:08:29,530
És mondok én szeretném, ha
Kérjük szerezzen számomra, hogy file.html,

170
00:08:29,530 --> 00:08:31,020
majd küldje a kérést.

171
00:08:31,020 --> 00:08:34,820
>> És így onreadystatechange megy
hogy hallgat, és vártam és vártam

172
00:08:34,820 --> 00:08:39,460
és várja, amíg a readyState
4, és az állapota 200.

173
00:08:39,460 --> 00:08:44,970
Tehát készen kell kézbesíteni,
és a kérelem sikeres volt.

174
00:08:44,970 --> 00:08:49,500
És akkor, ha az, hogy fog
tartalmának megváltoztatására infodiv

175
00:08:49,500 --> 00:08:53,030
hogy a válasz szövegét, hogy kaptam vissza.

176
00:08:53,030 --> 00:08:54,930
>> Nézzük, hogy ez hogyan
talán valóban működik.

177
00:08:54,930 --> 00:08:58,860
Szóval majd feje fölött a böngészőm
ablak, és mi meg itt.

178
00:08:58,860 --> 00:09:01,359
Szóval vessünk egy pillantást
mi folyik itt, AJAX.

179
00:09:01,359 --> 00:09:03,400
Tehát azt fogjuk választani valakit
A legördülő menüből.

180
00:09:03,400 --> 00:09:06,079
Tehát ebben az esetben, hadd
csak válassza ki Hannah.

181
00:09:06,079 --> 00:09:08,120
És észre, hogy Hannah
információ megváltozott,

182
00:09:08,120 --> 00:09:11,030
de nem volt any-- én
oldal nem teljesen újratölteni.

183
00:09:11,030 --> 00:09:12,190
A cucc maradt.

184
00:09:12,190 --> 00:09:13,320
A legtöbb dolog maradt.

185
00:09:13,320 --> 00:09:14,320
AJAX Teszt nem változott.

186
00:09:14,320 --> 00:09:16,700
A gomb Önmagában ez
legördülő menüben nem változott.

187
00:09:16,700 --> 00:09:18,260
De ott lévő adatokat is változott.

188
00:09:18,260 --> 00:09:20,218
És attól függően, hogy
Gyorsan a számítógépet mozog,

189
00:09:20,218 --> 00:09:24,430
hogy tényleg lehet látni, hogy a tartalmat
eltűnik, majd ismét megjelenik igazán

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

191
00:09:24,930 --> 00:09:27,320
Ez a tartalmakhoz
törölni infodiv,

192
00:09:27,320 --> 00:09:29,940
majd helyére egy
Új aszinkron kérést.

193
00:09:29,940 --> 00:09:34,410
>> Tehát, ha bekapcsolom, hogy azt mondják,
Rob-- és újra, hogy egy pillantást,

194
00:09:34,410 --> 00:09:38,379
és talán majd meglátjuk, hogy ténylegesen
eltűnnek, és újra gyorsan.

195
00:09:38,379 --> 00:09:38,920
Látod ezt?

196
00:09:38,920 --> 00:09:41,400
Hogy csak beugrott el,
és akkor újratölteni?

197
00:09:41,400 --> 00:09:43,640
Ez az AJAX kérés
fajta zajlik.

198
00:09:43,640 --> 00:09:46,060
És így attól függően,
személy úgy döntök, én vagyok

199
00:09:46,060 --> 00:09:50,690
így egy másik aszinkron
kérést egy másik fájl

200
00:09:50,690 --> 00:09:52,730
hogy én is az én szerver.

201
00:09:52,730 --> 00:09:55,550
És a tartalmát én
infodiv frissít,

202
00:09:55,550 --> 00:09:58,457
amelynek alapján ezek az általam kiválasztott.

203
00:09:58,457 --> 00:10:00,040
Szóval ez tényleg minden van AJAX.

204
00:10:00,040 --> 00:10:04,090
Ez lehetővé teszi számunkra, hogy ezek az aszinkron
kéri, frissítések egy oldalra.

205
00:10:04,090 --> 00:10:06,450
Anélkül, hogy
frissíteni kell az egész oldalt,

206
00:10:06,450 --> 00:10:08,520
megyünk, hogy az új
tartalmat is azáltal, hogy

207
00:10:08,520 --> 00:10:11,170
egy új, friss kérést a szerver.

208
00:10:11,170 --> 00:10:13,420
És igen, az oldalainkon válhat
egy kicsit dinamikusabb.

209
00:10:13,420 --> 00:10:15,128
>> És ahogy egyre több
és a fejlettebb, akkor

210
00:10:15,128 --> 00:10:17,700
lehet, hogy a dolgok, mint
mondjuk, a postafiókjában,

211
00:10:17,700 --> 00:10:19,850
ahol nem kell semmit sem tennie.

212
00:10:19,850 --> 00:10:22,560
Nem kell, hogy kattintson egy
legördülő menüből, vagy kattintson semmit,

213
00:10:22,560 --> 00:10:25,920
és hirtelen, a legújabb
e-mail felbukkan a tetején.

214
00:10:25,920 --> 00:10:27,840
Ez is csak egy Ajax kérés.

215
00:10:27,840 --> 00:10:30,460
Ajax kér a
szerver, az e-mail szerver,

216
00:10:30,460 --> 00:10:33,360
hogy küldje át az összes információt
az Ön legfrissebb e-maileket,

217
00:10:33,360 --> 00:10:38,110
és a változó, amit látsz a
képernyőn, hogy a legújabb beállított e-mailt.

218
00:10:38,110 --> 00:10:41,080
És ha van egy újat
ott, majd a tartalmát, hogy div

219
00:10:41,080 --> 00:10:44,580
tükrözni fogja az
A frissített tartalom.

220
00:10:44,580 --> 00:10:45,480
Én Doug Lloyd.

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

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