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

2
00:00:00,500 --> 00:00:04,810
[TÓNLIST spila]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Svo eitt
konar hugmynd að

4
00:00:06,940 --> 00:00:12,120
konar fellur undir regnhlíf
JavaScript er eitthvað sem kallast AJAX.

5
00:00:12,120 --> 00:00:15,310
Fram til þessa, okkar
samskipti með JavaScript

6
00:00:15,310 --> 00:00:17,727
hefur verið takmörkuð að ýta a
hnappinn og eitthvað gerist.

7
00:00:17,727 --> 00:00:19,560
Og sérstaklega, en
eitthvað sem gerist

8
00:00:19,560 --> 00:00:22,950
er vefsíður okkar útlit og feel breytingar.

9
00:00:22,950 --> 00:00:23,450
Ekki satt?

10
00:00:23,450 --> 00:00:26,540
Eins og í einkum í
skjal mótmæla líkan video,

11
00:00:26,540 --> 00:00:29,060
Ég var að breyta bakgrunnslit.

12
00:00:29,060 --> 00:00:33,240
En þegar ég gerði það, gerði ég ekki hafa
að gera einhverjar sérstakar auka beiðnir.

13
00:00:33,240 --> 00:00:36,800
Ég vissi ekki að fara fram á að
miðlara senda mér nýja síðu.

14
00:00:36,800 --> 00:00:39,620
Ég var að breyta því sem ég hafði nú þegar.

15
00:00:39,620 --> 00:00:42,245
Ég vissi ekki að endurhlaða síðuna mína,
og það breyttist örugglega,

16
00:00:42,245 --> 00:00:43,760
svo það er frábært.

17
00:00:43,760 --> 00:00:48,400
En það er örugglega einhver
handbók notandi víxlverkun að ræða.

18
00:00:48,400 --> 00:00:53,140
AJAX er kaldur tækni sem gerir
okkur til að uppfæra efni síðunnar,

19
00:00:53,140 --> 00:00:55,750
og ekki bara útlit og
finnst, án þess að endurhlaða.

20
00:00:55,750 --> 00:00:58,610
>> Og með því að sérstaklega þegar ég
segir að uppfæra efni síðunnar,

21
00:00:58,610 --> 00:01:01,990
Ég er ekki að segja að við umrita
síðan nota JavaScript.

22
00:01:01,990 --> 00:01:06,560
Ég er að segja við beiðni raun
Frekari upplýsingar frá miðlara

23
00:01:06,560 --> 00:01:08,640
án síðu okkar þurfa að endurhlaða.

24
00:01:08,640 --> 00:01:10,850
>> Nú þessi tegund af smá
a fleiri háþróaður tækni

25
00:01:10,850 --> 00:01:11,950
sem við erum að fara að tala
um í þessu myndbandi.

26
00:01:11,950 --> 00:01:13,720
Við erum að fara að hafa samskipti.

27
00:01:13,720 --> 00:01:17,750
En þegar við gerum það, ég ætla að vera
gera beiðnir til the vefur framreiðslumaður.

28
00:01:17,750 --> 00:01:21,140
Í þessu tilfelli, bara hvað er
gangi minn Apache vefur framreiðslumaður.

29
00:01:21,140 --> 00:01:25,010
Ég ætla að vera að gera frekari
beiðnir á meðan ég er að heimsækja vefsíðu,

30
00:01:25,010 --> 00:01:26,890
en mín síða mun ekki endurnýja.

31
00:01:26,890 --> 00:01:30,000
>> Það er bara að fara að
asynchronously uppfæra síðuna mína.

32
00:01:30,000 --> 00:01:31,840
Og það er í raun,
sem AJAX stendur fyrir,

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

34
00:01:35,400 --> 00:01:37,910
XML er annars konar rithætti
tungumál, og þú getur raða á

35
00:01:37,910 --> 00:01:39,680
hugsa um það eins og HTML.

36
00:01:39,680 --> 00:01:42,990
Það er ekki alveg það sama, en
það er í rauninni bara Markup Language.

37
00:01:42,990 --> 00:01:47,770
Svo það ósamstilltur
JavaScript og Markup Language.

38
00:01:47,770 --> 00:01:50,590
>> Svo í því skyni að nota þetta
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
er ekki sérstakt forritunarmál.

40
00:01:52,230 --> 00:01:55,300
Það er bara svona a
setja techniques-- vér

41
00:01:55,300 --> 00:01:57,870
þarf að búa til sérstakt
JavaScript hlut, sem

42
00:01:57,870 --> 00:02:00,689
er kallað XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Nú, það er mjög auðvelt að gera þetta.

44
00:02:01,980 --> 00:02:04,550
Við segjum bara Var, hvað
við viljum kalla þennan hlut,

45
00:02:04,550 --> 00:02:07,030
jafngildir nýja XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
Og nú höfum við nú fengið
Ajax konar hlut,

47
00:02:11,050 --> 00:02:14,370
eða XMLHttpRequest
hlut, sem mun leyfa

48
00:02:14,370 --> 00:02:18,360
okkur að asynchronously uppfært síðuna okkar.

49
00:02:18,360 --> 00:02:23,100
>> Eftir að við höfum fengið þetta nýja
mótmæla, þetta XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
við verðum að gera eitthvað til að þess
onreadystatechange hegðun.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
hegðun er í raun bara

52
00:02:30,360 --> 00:02:34,080
þegar þú leggja fram beiðni
á vefsíðu, síðan

53
00:02:34,080 --> 00:02:35,880
fer í gegnum a tala af skrefum.

54
00:02:35,880 --> 00:02:37,370
First, beiðni hefur ekki verið send.

55
00:02:37,370 --> 00:02:39,860
Þá beiðnin hefur verið
send, en ekki brugðist við.

56
00:02:39,860 --> 00:02:41,580
Þá beiðni hefur verið brugðist við.

57
00:02:41,580 --> 00:02:43,680
Þá er óskað
send aftur til þín.

58
00:02:43,680 --> 00:02:46,930
>> Þá, beiðni er
fullhlaðin í síðuna þína.

59
00:02:46,930 --> 00:02:48,640
Þeir eru mismunandi ríki.

60
00:02:48,640 --> 00:02:53,890
Og svo þurfum við að setja okkar
Ný XMLHttpRequest mótmæla

61
00:02:53,890 --> 00:02:58,740
til að breyta þegar Tilbúin breytingar ástand.

62
00:02:58,740 --> 00:03:01,925
Og venjulega, við gerum þetta með
skilgreina nafnlaus virka, sem

63
00:03:01,925 --> 00:03:04,490
við erum kunnugir frá
JavaScript nú, að

64
00:03:04,490 --> 00:03:09,840
er kallað þegar Tilbúin breytingar ástand.

65
00:03:09,840 --> 00:03:11,340
Það er í raun ekki mikið meira en það.

66
00:03:11,340 --> 00:03:14,340
Við erum bara að fara að vera að skilgreina
nafnlaus aðgerð, tegund af eins og hvað

67
00:03:14,340 --> 00:03:16,440
við vorum að gera í
JavaScript, þar sem við myndum

68
00:03:16,440 --> 00:03:18,750
hafa nafnlaus virka
bregðast við á smell,

69
00:03:18,750 --> 00:03:23,230
eða þegar við vorum að gera kort af
ýmsir hlutir í fylki.

70
00:03:23,230 --> 00:03:25,220
>> Eitthvað gerðist þegar
eitthvað var smellt.

71
00:03:25,220 --> 00:03:28,810
Í þessu tilfelli, það er bara eitthvað sem er
gerast þegar ríkið á síðu okkar

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

73
00:03:30,160 --> 00:03:32,730
Það eru tvær aðrar eignir
sem eru eins konar of-- þeir eru ekki

74
00:03:32,730 --> 00:03:35,524
aðeins eignir sem eru
felst að XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
en þeir eru nokkuð mikilvæg sjálfur.

76
00:03:36,940 --> 00:03:39,815
Það er eitthvað sem kallast readyState,
sem eins og þú geta sennilega giska,

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

78
00:03:41,750 --> 00:03:44,250
Það segir í raun þér
hvað readyState er.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, og 4 eru
möguleikarnir þar,

80
00:03:46,289 --> 00:03:48,080
og þeir svoleiðis u.þ.b.
í samræmi við það

81
00:03:48,080 --> 00:03:50,030
Ég var bara að tala um annað síðan.

82
00:03:50,030 --> 00:03:53,100
>> Og þá stöðu, sem
vonandi ef allt gekk OK,

83
00:03:53,100 --> 00:03:56,710
er 200, sem er stutt
fyrir, að sjálfsögðu, OK,

84
00:03:56,710 --> 00:03:58,330
sem við erum kunnugir frá HTTP.

85
00:03:58,330 --> 00:04:03,735
Þannig að við erum að vona að tilbúin ástand okkar
er fjögur og staða okkar er 200.

86
00:04:03,735 --> 00:04:07,940
Og ef tilbúinn ríki okkar
er fjögur, og viðbrögð

87
00:04:07,940 --> 00:04:11,490
er tilbúinn til að setja á
síðu og staðan er 200,

88
00:04:11,490 --> 00:04:13,580
við gátum að gera
allt með góðum árangri,

89
00:04:13,580 --> 00:04:17,209
nú getum við asynchronously
uppfæra síðuna okkar

90
00:04:17,209 --> 00:04:21,730
án þess að þurfa að endurhlaða
allt efni hennar.

91
00:04:21,730 --> 00:04:27,710
>> Eftir að við höfum skilgreint hvað gerist
til onreadystatechange hegðun,

92
00:04:27,710 --> 00:04:31,020
og við höfum athugað að readyState
er 4 og staðan er 200,

93
00:04:31,020 --> 00:04:33,900
þá er allt sem við þurfum að gera
opna ósamstilltur

94
00:04:33,900 --> 00:04:38,530
beiðni, sem er bara að gera
An Http GET almennt beiðni.

95
00:04:38,530 --> 00:04:41,950
Bara að gera það kerfisbundið,
í stað þess að í vafra okkar.

96
00:04:41,950 --> 00:04:43,786
Og þá erum við að senda þá beiðni.

97
00:04:43,786 --> 00:04:45,660
Svo hvað þýðir þetta kannski
líta út eins og í samhengi?

98
00:04:45,660 --> 00:04:49,790
Svo hér er fall sem
fjallar AJAX beiðnir.

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

100
00:04:50,290 --> 00:04:52,430
Og ég hef geðþótta sagt
það tekur rifrildi.

101
00:04:52,430 --> 00:04:55,550
Og þetta eins konar a
Almennt beinagrind hér.

102
00:04:55,550 --> 00:05:00,890
Í upphafi, fáum við
okkur ný XMLHttpRequest mótmæla.

103
00:05:00,890 --> 00:05:03,830
Þá þarf ég að stilla
onreadystatechange hegðun.

104
00:05:03,830 --> 00:05:06,970
Og svo ég ætla að segja
þegar readyState breytingar,

105
00:05:06,970 --> 00:05:10,110
Ég vil að þú að kalla þessa aðgerð.

106
00:05:10,110 --> 00:05:12,570
>> Sem er að fara að spyrja
spurning, ef readyState

107
00:05:12,570 --> 00:05:17,240
er 4, ef readyState hefur breyst
að vera 4, og stöðu var 200,

108
00:05:17,240 --> 00:05:20,799
þannig að við þurftum vel beiðni, ég
langar að gera eitthvað við síðuna.

109
00:05:20,799 --> 00:05:22,590
Og við munum taka a líta
á dæmi um það

110
00:05:22,590 --> 00:05:25,010
að eitthvað gæti verið í annað.

111
00:05:25,010 --> 00:05:27,830
Svo, nú hef ég skilgreint
nafnlaus virka minn,

112
00:05:27,830 --> 00:05:31,340
svar virka minn þegar
að readyState breytingar.

113
00:05:31,340 --> 00:05:37,120
>> Svo þá þarf ég bara að opna a
óska, með opnu.

114
00:05:37,120 --> 00:05:39,160
Og þá, ég sendi þá beiðni.

115
00:05:39,160 --> 00:05:41,980
Og við skulum taka a líta á
meira steypu dæmi

116
00:05:41,980 --> 00:05:46,290
af hverju AJAX getur gert á vefsíðum okkar.

117
00:05:46,290 --> 00:05:49,740
Þannig að ég hef hér mjög einfalt
síðu sem heitir heim.html.

118
00:05:49,740 --> 00:05:53,620
Og ég hef fengið upplýsinga fer
hér og einhvers konar fellivalmyndinni.

119
00:05:53,620 --> 00:05:55,390
>> Og við munum rifja þetta í eina sekúndu.

120
00:05:55,390 --> 00:05:59,150
En ég held að við ættum nú að taka
líta á the raunverulegur uppspretta merkjamál.

121
00:05:59,150 --> 00:06:01,080
Og svo ætla ég að fara að opna heim.html.

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

123
00:06:03,490 --> 00:06:04,740
Og við munum sjá hvað er að gerast.

124
00:06:04,740 --> 00:06:08,240
Svo upp á mjög toppur hér, ég hef
sumir JavaScript efni sem er að gerast.

125
00:06:08,240 --> 00:06:12,470
>> Og hér, ég hef greinilega
a div sem ID er infodiv,

126
00:06:12,470 --> 00:06:15,290
og sumir upplýsingar
er að fara að fara þangað.

127
00:06:15,290 --> 00:06:16,374
Og þá hef ég þetta eyðublað.

128
00:06:16,374 --> 00:06:18,081
Og inni þetta
form, ég hef eitthvað

129
00:06:18,081 --> 00:06:20,200
kallað Select, sem
er bara fellilistanum

130
00:06:20,200 --> 00:06:22,150
með fullt af mismunandi valkosti.

131
00:06:22,150 --> 00:06:26,150
Og virðist þegar það breytist, þegar
valkostur sem hefur verið valinn er

132
00:06:26,150 --> 00:06:30,600
breytt, ég ætla að hringja
sumir virka cs50Info,

133
00:06:30,600 --> 00:06:33,190
og þá er ég að fara að
fara í this.value,

134
00:06:33,190 --> 00:06:35,740
þar er átt við
sem kostur var valinn,

135
00:06:35,740 --> 00:06:39,820
og gildi er einn af þessum hér, valkostur
gildi = jafngildir tóm, "Blumberg,"

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

137
00:06:42,610 --> 00:06:45,090
>> Svo gæti það í raun
gerast hér þegar ég að gera þetta?

138
00:06:45,090 --> 00:06:48,800
Jæja, við skulum taka a
líta á blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Lítur út eins og það er bara
bút af einhverju Html.

141
00:06:53,924 --> 00:06:56,090
Og í raun, hvað er ég að vonast
er að fara að gerast hér

142
00:06:56,090 --> 00:07:00,020
er ég að fara að vera fær um að stinga
þetta Html beint á vefinn minn

143
00:07:00,020 --> 00:07:02,970
án þess að þurfa að endurhlaða
síðan, þannig að þegar

144
00:07:02,970 --> 00:07:07,510
Ég vel Hönnu frá the falla-dúnn
menu, upplýsingar um Hönnu,

145
00:07:07,510 --> 00:07:11,100
Einkum þetta upplýsingar
hér í blumberg.html,

146
00:07:11,100 --> 00:07:12,574
er það sem sýnir sig á síðunni.

147
00:07:12,574 --> 00:07:13,740
Og ég þarf ekki að uppfæra.

148
00:07:13,740 --> 00:07:16,842
Og ef ég valdi einhver annar,
upplýsingar þeirra myndi mæta.

149
00:07:16,842 --> 00:07:17,550
Hvernig á ég að gera þetta?

150
00:07:17,550 --> 00:07:20,290
Aftur, þetta krefst
okkur að nota sumir AJAX.

151
00:07:20,290 --> 00:07:22,540
Og svo munum við opna ajax.js.

152
00:07:22,540 --> 00:07:25,550
Og hér er að virka, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Ef nafn er ekkert, aftur ég.

154
00:07:27,410 --> 00:07:31,450
Ég ætla ekki að gera neitt ef
tóm valkostur hefur verið valinn.

155
00:07:31,450 --> 00:07:35,420
Annars ætla ég að
búa til nýja XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
Og þá er ég að fara að segja, þegar
readyState breytingar, kalla þessa aðgerð.

157
00:07:39,020 --> 00:07:43,630
>> Og ef readyState er
4 og staðan er 200,

158
00:07:43,630 --> 00:07:45,740
hér er smá
jQuery á línu 13.

159
00:07:45,740 --> 00:07:50,450
En allt sem ég er að gera er að segja,
breyta innihaldi infodiv

160
00:07:50,450 --> 00:07:57,820
að vera allt sem ég fékk til baka eins og a
svar frá HttpRequest mínum.

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

162
00:07:59,590 --> 00:08:02,020
Jæja, það er rétt
hér á línu 18 og 19.

163
00:08:02,020 --> 00:08:08,550
Line 18, ég er í rauninni að undirbúa
a GET beiðni um nafn + .html.

164
00:08:08,550 --> 00:08:11,170
Og aftur, nafn hér er
rök sem var

165
00:08:11,170 --> 00:08:14,280
samþykkt í sem viðfang cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Svo í rauninni, ég liggur í einhver er
nafn, sem var að setja af valkostum

167
00:08:18,460 --> 00:08:22,980
sem við sáum í
fellivalmynd í formi.

168
00:08:22,980 --> 00:08:24,450
Ég fæ því nafni.

169
00:08:24,450 --> 00:08:29,530
Og ég er að segja að ég vildi eins og þú að
vinsamlegast fá mér að file.html,

170
00:08:29,530 --> 00:08:31,020
og þá senda þá beiðni.

171
00:08:31,020 --> 00:08:34,820
>> Og svo að onreadystatechange er að fara
að vera að hlusta og bíða og bíða

172
00:08:34,820 --> 00:08:39,460
og bíða þar til readyState
er 4, og staðan er 200.

173
00:08:39,460 --> 00:08:44,970
Svo það er tilbúið til að láta þjóna sér,
og beiðnin tókst.

174
00:08:44,970 --> 00:08:49,500
Og þá ef það er, það er að fara að
breyta innihaldi infodiv

175
00:08:49,500 --> 00:08:53,030
að vera svar texta sem ég fékk til baka.

176
00:08:53,030 --> 00:08:54,930
>> Þannig að við skulum sjá hvernig þetta
gæti raunverulega vinnu.

177
00:08:54,930 --> 00:08:58,860
Þannig að við munum fara yfir til vafranum mínum
glugga, og við munum líta hér.

178
00:08:58,860 --> 00:09:01,359
Svo skulum taka a líta á
hvað er að gerast hér í AJAX.

179
00:09:01,359 --> 00:09:03,400
Þannig að við munum velja einhvern
frá the falla-dúnn matseðill.

180
00:09:03,400 --> 00:09:06,079
Þannig að í þessu tilfelli, við skulum
bara velja Hönnu.

181
00:09:06,079 --> 00:09:08,120
Og takið eftir að Hanna er
upplýsingar hafi breyst,

182
00:09:08,120 --> 00:09:11,030
en ég hafði ekki any-- minn
síðu ekki alveg endurhlaða.

183
00:09:11,030 --> 00:09:12,190
The efni var.

184
00:09:12,190 --> 00:09:13,320
Flest efni gist.

185
00:09:13,320 --> 00:09:14,320
AJAX Test breyttist ekki.

186
00:09:14,320 --> 00:09:16,700
The hnappur sjálft, þetta
fellivalmynd breyttist ekki.

187
00:09:16,700 --> 00:09:18,260
En upplýsingar þar gerði breytingu.

188
00:09:18,260 --> 00:09:20,218
Og eftir því hversu
fljótt tölva færist mínir,

189
00:09:20,218 --> 00:09:24,430
þú í raun gætir séð að efni
hverfur og þá birtist aftur mjög

190
00:09:24,430 --> 00:09:24,930
fljótt.

191
00:09:24,930 --> 00:09:27,320
Það er efni að vera
eytt úr infodiv,

192
00:09:27,320 --> 00:09:29,940
og síðan skipt út fyrir
Ný ósamstilltur beiðni.

193
00:09:29,940 --> 00:09:34,410
>> Þannig að ef ég skipta henni að segja,
Rob-- og aftur, taka a líta,

194
00:09:34,410 --> 00:09:38,379
og kannski að við munum sjá það í raun
hverfa og birtast aftur fljótt.

195
00:09:38,379 --> 00:09:38,920
Þú sérð það?

196
00:09:38,920 --> 00:09:41,400
Hvernig það smella bara í burtu,
og þá er það fylla?

197
00:09:41,400 --> 00:09:43,640
Það er AJAX beiðni
konar sér stað.

198
00:09:43,640 --> 00:09:46,060
Og svo eftir að
manneskja sem ég velja, ég er

199
00:09:46,060 --> 00:09:50,690
gera aðra ósamstilltur
Beiðni í aðra skrá

200
00:09:50,690 --> 00:09:52,730
sem ég hef á vefþjóninum mínum.

201
00:09:52,730 --> 00:09:55,550
Og innihald minn
infodiv erum að uppfæra,

202
00:09:55,550 --> 00:09:58,457
byggt á sem þessir sem ég hef valið.

203
00:09:58,457 --> 00:10:00,040
Svo er það í raun allt sem er til AJAX.

204
00:10:00,040 --> 00:10:04,090
Það gerir okkur kleift að gera þessar ósamstilltur
beiðnir, uppfærslur á síðu.

205
00:10:04,090 --> 00:10:06,450
Án þess að þurfa að
uppfæra alla síðuna,

206
00:10:06,450 --> 00:10:08,520
við erum að fara að fá nýja
efni frá henni með því að gera

207
00:10:08,520 --> 00:10:11,170
ný ferskt beiðni til the framreiðslumaður.

208
00:10:11,170 --> 00:10:13,420
Og svo, síður okkar geta orðið
töluvert meira dynamic.

209
00:10:13,420 --> 00:10:15,128
>> Og eins og við fá meira
og fleiri háþróaður, þér

210
00:10:15,128 --> 00:10:17,700
gæti fengið hluti eins
segjum innhólfinu,

211
00:10:17,700 --> 00:10:19,850
þar sem þú þarft ekki að gera neitt.

212
00:10:19,850 --> 00:10:22,560
Þú þarft ekki að smella á
fellivalmynd eða smella neitt,

213
00:10:22,560 --> 00:10:25,920
og allt í einu, nýjasta þitt
Netfangið sýning upp á toppinn.

214
00:10:25,920 --> 00:10:27,840
Það er líka bara Ajax beiðni.

215
00:10:27,840 --> 00:10:30,460
Ajax er að biðja þín
miðlara, the email framreiðslumaður,

216
00:10:30,460 --> 00:10:33,360
að senda yfir allar upplýsingar
um nýjustu tölvupóstinn þinn,

217
00:10:33,360 --> 00:10:38,110
og breyta því sem þú sérð á
skjár til að vera nýjasta þitt af tölvupósti.

218
00:10:38,110 --> 00:10:41,080
Og ef þú ert með nýjan í
þar, þá innihald þess div

219
00:10:41,080 --> 00:10:44,580
breytist í samræmi við
uppfærð efni.

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

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

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