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

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

3
00:00:04,810 --> 00:00:06,940
>> DOUG Lloyd: Niin yksi
eräänlainen ajatus, että

4
00:00:06,940 --> 00:00:12,120
tavallaan kuuluu alaisuudessa
JavaScript on jotain kutsutaan AJAX.

5
00:00:12,120 --> 00:00:15,310
Tähän saakka, meidän
vuorovaikutus JavaScript

6
00:00:15,310 --> 00:00:17,727
on rajoitettu työntää
-painiketta ja jotain tapahtuu.

7
00:00:17,727 --> 00:00:19,560
Ja erityisesti,
tapahdu

8
00:00:19,560 --> 00:00:22,950
on meidän sivustot näyttävät ja tuntuvat muutokset.

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

10
00:00:23,450 --> 00:00:26,540
Kuten erityisesti
Document Object Model video,

11
00:00:26,540 --> 00:00:29,060
Vaihdoin taustan väri.

12
00:00:29,060 --> 00:00:33,240
Mutta kun tein, että minulla ei ollut
tehdä mitään erityisiä ylimääräisiä pyyntöjä.

13
00:00:33,240 --> 00:00:36,800
En tarvitse pyytää
palvelin lähettää minulle uusi sivu.

14
00:00:36,800 --> 00:00:39,620
Muutin juuri mitä olen jo ollut.

15
00:00:39,620 --> 00:00:42,245
En tarvitse ladata sivuni
ja asiat varmasti muuttuneet,

16
00:00:42,245 --> 00:00:43,760
niin se on hienoa.

17
00:00:43,760 --> 00:00:48,400
Mutta on varmasti joitakin
manuaali käyttäjän toimia mukana.

18
00:00:48,400 --> 00:00:53,140
AJAX on viileä tekniikka, jonka avulla
meitä päivittää sivun sisältöä,

19
00:00:53,140 --> 00:00:55,750
eikä vain katsoa ja
tuntuu, ilman lastin purkua.

20
00:00:55,750 --> 00:00:58,610
>> Ja erityisesti, kun
sanoa päivittää sivun sisältöä,

21
00:00:58,610 --> 00:01:01,990
En sano me kirjoittaa
sivun JavaScriptin avulla.

22
00:01:01,990 --> 00:01:06,560
Sanon me itse pyytää
Lisätietoja palvelimelta

23
00:01:06,560 --> 00:01:08,640
ilman meidän sivu tarvitse ladata.

24
00:01:08,640 --> 00:01:10,850
>> Nyt tällaista vähän
kehittyneempi tekniikka

25
00:01:10,850 --> 00:01:11,950
että me aiomme puhua
Tietoja tämän videon.

26
00:01:11,950 --> 00:01:13,720
Aiomme olla vuorovaikutusta.

27
00:01:13,720 --> 00:01:17,750
Mutta kun teemme, aion olla
jolloin pyyntöjä web-palvelimelle.

28
00:01:17,750 --> 00:01:21,140
Tässä tapauksessa, mitä on
käynnissä minun Apache www-palvelin.

29
00:01:21,140 --> 00:01:25,010
Aion tekevän lisää
pyynnöt kun olen vierailulla Web-sivun,

30
00:01:25,010 --> 00:01:26,890
mutta sivuni eivät päivity.

31
00:01:26,890 --> 00:01:30,000
>> Se on vain menossa
asynkronisesti päivitän sivu.

32
00:01:30,000 --> 00:01:31,840
Ja se on, itse asiassa,
joka AJAX on lyhenne sanoista,

33
00:01:31,840 --> 00:01:35,400
on Asynchronous JavaScript ja XML.

34
00:01:35,400 --> 00:01:37,910
XML on toisenlainen markup
kieli, ja voit lajitella ja

35
00:01:37,910 --> 00:01:39,680
ajatella sitä aivan kuin HTML.

36
00:01:39,680 --> 00:01:42,990
Se ei ole aivan sama asia, mutta
se on pohjimmiltaan vain markup language.

37
00:01:42,990 --> 00:01:47,770
Joten se asynkronista
JavaScript ja markup language.

38
00:01:47,770 --> 00:01:50,590
>> Joten jotta käyttää tätä
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
ei ole erillinen ohjelmointikieli.

40
00:01:52,230 --> 00:01:55,300
Se on vain eräänlainen
joukko techniques-- me

41
00:01:55,300 --> 00:01:57,870
täytyy luoda erityinen
JavaScript esine, joka

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

43
00:02:00,689 --> 00:02:01,980
Nyt, se on erittäin helppo tehdä tämän.

44
00:02:01,980 --> 00:02:04,550
Me vain sanoa var riippumatta
haluamme kutsua tätä objektia,

45
00:02:04,550 --> 00:02:07,030
vastaa uusi XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
Ja nyt olemme nyt saatu
AJAX eräänlainen esine,

47
00:02:11,050 --> 00:02:14,370
tai XMLHttpRequest
objekti, jonka avulla

48
00:02:14,370 --> 00:02:18,360
meitä asynkronisesti päivittää sivu.

49
00:02:18,360 --> 00:02:23,100
>> Kun olemme saaneet tämän uuden
esine, tämä XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
meidän on tehtävä jotain sen
onreadystatechange käyttäytymistä.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
käytös on oikeastaan ​​vain

52
00:02:30,360 --> 00:02:34,080
kun teet pyyntö
Web-sivulle, sivu

53
00:02:34,080 --> 00:02:35,880
menee läpi useita vaiheita.

54
00:02:35,880 --> 00:02:37,370
Ensinnäkin, pyyntöä ei ole lähetetty.

55
00:02:37,370 --> 00:02:39,860
Sitten, pyyntö on
lähetetty, mutta ei vastattu.

56
00:02:39,860 --> 00:02:41,580
Sitten pyyntö on vastattu.

57
00:02:41,580 --> 00:02:43,680
Sitten pyyntö on
lähetetään takaisin sinulle.

58
00:02:43,680 --> 00:02:46,930
>> Sitten, pyyntö on
täysin ladattu sivullesi.

59
00:02:46,930 --> 00:02:48,640
Ne ovat eri valtioissa.

60
00:02:48,640 --> 00:02:53,890
Ja niin meidän on asetettava meidän
uusi XMLHttpRequest esine

61
00:02:53,890 --> 00:02:58,740
vaihtaa kun valmiustilaan muutoksia.

62
00:02:58,740 --> 00:03:01,925
Ja tyypillisesti, me tehdä tämän
määritellään anonyymi toiminto, joka

63
00:03:01,925 --> 00:03:04,490
olemme tuttuja
JavaScript nyt, että

64
00:03:04,490 --> 00:03:09,840
kutsutaan, kun valmis tilan muutoksia.

65
00:03:09,840 --> 00:03:11,340
Se todellakaan ole paljon enemmän.

66
00:03:11,340 --> 00:03:14,340
Olemme juuri menossa olla määriteltäessä
anonyymi funktio, tavallaan kuin mitä

67
00:03:14,340 --> 00:03:16,440
olimme tekemässä
JavaScript, missä olisimme

68
00:03:16,440 --> 00:03:18,750
on nimetön funktio
vastata click,

69
00:03:18,750 --> 00:03:23,230
tai kun olimme tekemässä kartta
erilaisia ​​esineitä array.

70
00:03:23,230 --> 00:03:25,220
>> Jotain tapahtui, kun
jotain napsautetaan.

71
00:03:25,220 --> 00:03:28,810
Tässä tapauksessa se on vain jotain on
tapahtuu kun tila meidän sivu

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

73
00:03:30,160 --> 00:03:32,730
On olemassa kaksi muuta kiinteistöä
jotka tavallaan of-- ne eivät ole

74
00:03:32,730 --> 00:03:35,524
Vain ominaisuuksia, jotka ovat
ominaista XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
mutta ne ovat melko tärkeitä.

76
00:03:36,940 --> 00:03:39,815
Siinä on jotain kutsutaan readyState,
joka kuten arvata saattaa,

77
00:03:39,815 --> 00:03:41,750
on liittyvät onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
Se todella kertoo
mitä readyState on.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, ja 4 ovat
mahdollisuuksia on,

80
00:03:46,289 --> 00:03:48,080
ja he tavallaan karkeasti
vastaa sitä, mitä

81
00:03:48,080 --> 00:03:50,030
Olin juuri puhu toinen sitten.

82
00:03:50,030 --> 00:03:53,100
>> Ja sitten asema, joka
toivottavasti jos kaikki meni OK,

83
00:03:53,100 --> 00:03:56,710
on 200, joka on lyhyt
varten, tietenkin, OK,

84
00:03:56,710 --> 00:03:58,330
joka olemme tuttuja Http.

85
00:03:58,330 --> 00:04:03,735
Joten me toivomme, että meidän valmiustilaan
on neljä, ja asemamme on 200.

86
00:04:03,735 --> 00:04:07,940
Ja jos meidän valmiustilaan
on neljä, ja vastaus

87
00:04:07,940 --> 00:04:11,490
on valmis laittaa
sivu, ja tila on 200,

88
00:04:11,490 --> 00:04:13,580
pystyimme tekemään
kaikki onnistui,

89
00:04:13,580 --> 00:04:17,209
Nyt voimme asynkronisesti
päivittää sivu

90
00:04:17,209 --> 00:04:21,730
ilman ladata
koko sisältö sitä.

91
00:04:21,730 --> 00:04:27,710
>> Kun olemme määritelty, mitä tapahtuu
että onreadystatechange käyttäytymistä,

92
00:04:27,710 --> 00:04:31,020
ja olemme tarkistanut, että readyState
on 4 ja tila on 200,

93
00:04:31,020 --> 00:04:33,900
niin kaikki meidän täytyy tehdä on
avata asynkronisen

94
00:04:33,900 --> 00:04:38,530
pyyntö, joka on vain tehdä
Http yleensä saada pyynnöstä.

95
00:04:38,530 --> 00:04:41,950
Vain tee sitä ohjelmallisesti,
sijasta kautta web-selaimella.

96
00:04:41,950 --> 00:04:43,786
Ja sitten lähetämme että pyyntö.

97
00:04:43,786 --> 00:04:45,660
Mitä tämä ehkä
näyttävät yhteydessä?

98
00:04:45,660 --> 00:04:49,790
Joten tässä on toiminto, joka
käsitellään AJAX pyyntöjä.

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

100
00:04:50,290 --> 00:04:52,430
Ja olen mielivaltaisesti sanonut
se hyväksyy väitteen.

101
00:04:52,430 --> 00:04:55,550
Ja tämä eräänlainen
yleinen luuranko täällä.

102
00:04:55,550 --> 00:05:00,890
Vuoden alusta, saamme
itsellemme uusi XMLHttpRequest objekti.

103
00:05:00,890 --> 00:05:03,830
Sitten minun täytyy asettaa
onreadystatechange käyttäytymistä.

104
00:05:03,830 --> 00:05:06,970
Ja niin aion sanoa
kun readyState muutoksia,

105
00:05:06,970 --> 00:05:10,110
Haluan sinun soittaa tätä toimintoa.

106
00:05:10,110 --> 00:05:12,570
>> Joka aikoo pyytää
kysymys, jos readyState

107
00:05:12,570 --> 00:05:17,240
on 4, jos readyState on muuttunut
olla 4, ja tila oli 200,

108
00:05:17,240 --> 00:05:20,799
joten meillä oli onnistunut pyynnön, I
haluavat tehdä jotain sivulle.

109
00:05:20,799 --> 00:05:22,590
Ja me katsomaan
klo esimerkki siitä, mitä

110
00:05:22,590 --> 00:05:25,010
että jotain saattaa olla toinen.

111
00:05:25,010 --> 00:05:27,830
Niin, nyt olen määritellyt
minun anonyymi toiminto,

112
00:05:27,830 --> 00:05:31,340
vastaukseni toiminto aina
readyState muutokset.

113
00:05:31,340 --> 00:05:37,120
>> Joten sitten tarvitsee vain avata
pyytää, käyttäen avointa.

114
00:05:37,120 --> 00:05:39,160
Ja sitten, minä lähetän tämän pyynnön.

115
00:05:39,160 --> 00:05:41,980
Ja lähdetään katsomaan
konkreettisempaa esimerkki

116
00:05:41,980 --> 00:05:46,290
mitä AJAX voi tehdä www-sivuja.

117
00:05:46,290 --> 00:05:49,740
Joten minulla on täällä hyvin yksinkertainen
sivun nimeltä home.html.

118
00:05:49,740 --> 00:05:53,620
Ja minulla tiedot menee
täällä ja jonkinlainen pudotusvalikosta.

119
00:05:53,620 --> 00:05:55,390
>> Ja me palata tähän sekunnin.

120
00:05:55,390 --> 00:05:59,150
Mutta mielestäni meidän pitäisi nyt ottaa
katsokaa todellinen lähdekoodia.

121
00:05:59,150 --> 00:06:01,080
Ja niin, aion avata home.html.

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

123
00:06:03,490 --> 00:06:04,740
Ja näemme, mitä tapahtuu.

124
00:06:04,740 --> 00:06:08,240
Joten ylös huipulla täällä, minulla on
JavaScript-tavaraa, joka on meneillään.

125
00:06:08,240 --> 00:06:12,470
>> Ja täällä, ilmeisesti
div jonka tunnus on infodiv,

126
00:06:12,470 --> 00:06:15,290
ja joitakin tietoja
ei mene sinne.

127
00:06:15,290 --> 00:06:16,374
Ja sitten on tämä lomake.

128
00:06:16,374 --> 00:06:18,081
Ja sisäosat
muodossa, minulla on jotain

129
00:06:18,081 --> 00:06:20,200
kutsutaan Valitse, joka
on vain pudotusvalikosta

130
00:06:20,200 --> 00:06:22,150
kasan eri vaihtoehtoja.

131
00:06:22,150 --> 00:06:26,150
Ja ilmeisesti kun se muuttuu, kun
vaihtoehto, joka on valittu on

132
00:06:26,150 --> 00:06:30,600
muuttunut, aion soittaa
jonkin toiminnon cs50Info,

133
00:06:30,600 --> 00:06:33,190
ja sitten aion
kulkea this.value,

134
00:06:33,190 --> 00:06:35,740
jos tämä viittaa
mikä vaihtoehto valittiin,

135
00:06:35,740 --> 00:06:39,820
ja arvo on yksi näistä täällä, vaihtoehto
arvo = vastaa tyhjä, "Blumberg,"

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

137
00:06:42,610 --> 00:06:45,090
>> Niin mitä voisi todella
tapahdu täällä kun teen tämän?

138
00:06:45,090 --> 00:06:48,800
No, otetaan
katsokaa blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Näyttää se vain
pätkä joidenkin HTML.

141
00:06:53,924 --> 00:06:56,090
Ja itse asiassa, mitä toivon
tulee tapahtumaan täällä

142
00:06:56,090 --> 00:07:00,020
on Aion pystyä plug
tämä Html suoraan minun verkkosivu

143
00:07:00,020 --> 00:07:02,970
ilman ladata
sivu, siten, että kun

144
00:07:02,970 --> 00:07:07,510
Valitsen Hannah päässä avattavasta
valikosta tietoa Hannah,

145
00:07:07,510 --> 00:07:11,100
erityisesti tämä tieto
täällä blumberg.html,

146
00:07:11,100 --> 00:07:12,574
on mitä näkyy sivulla.

147
00:07:12,574 --> 00:07:13,740
Ja minulla ei tarvitse päivittää.

148
00:07:13,740 --> 00:07:16,842
Ja jos minä valitsin joku muu,
niiden tiedot olisivat näy.

149
00:07:16,842 --> 00:07:17,550
Miten voin tehdä tämän?

150
00:07:17,550 --> 00:07:20,290
Tämäkin edellyttää
voimme käyttää joitakin AJAX.

151
00:07:20,290 --> 00:07:22,540
Ja niin, me avata ajax.js.

152
00:07:22,540 --> 00:07:25,550
Ja tässä on juuri se, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Jos nimi ei ole mitään, palaan.

154
00:07:27,410 --> 00:07:31,450
En aio tehdä mitään, jos
tyhjä vaihtoehto on valittu.

155
00:07:31,450 --> 00:07:35,420
Muuten, aion
Luo uusi XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
Ja sitten aion sanoa, kun
readyState muutoksia, kutsua tätä toimintoa.

157
00:07:39,020 --> 00:07:43,630
>> Ja jos readyState on
4 ja tila on 200,

158
00:07:43,630 --> 00:07:45,740
tässä on hieman
jQuery verkossa 13.

159
00:07:45,740 --> 00:07:50,450
Mutta kaikki mulla sanoo,
muuttaa sisältöä infodiv

160
00:07:50,450 --> 00:07:57,820
olla mitä sain takaisin
vastaus minun HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Mikä on minun HttpRequest?

162
00:07:59,590 --> 00:08:02,020
No, se on oikea
täällä line 18 ja 19.

163
00:08:02,020 --> 00:08:08,550
Linja 18, olen periaatteessa valmistelee
GET pyyntö nimi + .html.

164
00:08:08,550 --> 00:08:11,170
Ja vielä, nimi tässä
väitettä, jonka mukaan oli

165
00:08:11,170 --> 00:08:14,280
hyväksyttiin parametrina cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Joten periaatteessa, olen ohimennen jonkun
nimi, joka oli että joukko vaihtoehtoja

167
00:08:18,460 --> 00:08:22,980
että näimme
avattavasta valikosta muodossa.

168
00:08:22,980 --> 00:08:24,450
Saan että nimi.

169
00:08:24,450 --> 00:08:29,530
Ja sanon minä haluaisin teidän
hanki minulle että file.html,

170
00:08:29,530 --> 00:08:31,020
ja sitten lähettää tämän pyynnön.

171
00:08:31,020 --> 00:08:34,820
>> Ja jotta onreadystatechange on menossa
kuuntelevan ja odottaa ja odottaa

172
00:08:34,820 --> 00:08:39,460
ja odottaa, kunnes readyState
on 4, ja tila on 200.

173
00:08:39,460 --> 00:08:44,970
Joten se on valmis palveltavaksi,
ja pyyntö oli onnistunut.

174
00:08:44,970 --> 00:08:49,500
Ja sitten jos se on, se tulee
muuttaa sisältöä infodiv

175
00:08:49,500 --> 00:08:53,030
olla vastaus tekstiä että sain takaisin.

176
00:08:53,030 --> 00:08:54,930
>> Joten miten tämä
saattaisi todella toimivat.

177
00:08:54,930 --> 00:08:58,860
Niin me pään yli selain
ikkuna, ja tutustumme täällä.

178
00:08:58,860 --> 00:09:01,359
Joten katsomaan
mitä tapahtuu täällä AJAX.

179
00:09:01,359 --> 00:09:03,400
Joten me valita joku
alkaen pudotusvalikosta.

180
00:09:03,400 --> 00:09:06,079
Joten tässä tapauksessa, katsotaanpa
vain valita Hannah.

181
00:09:06,079 --> 00:09:08,120
Ja huomaa, että Hannahin
tiedot ovat muuttuneet,

182
00:09:08,120 --> 00:09:11,030
mutta minulla ei ollut any-- minun
sivu ei ole täysin lataa.

183
00:09:11,030 --> 00:09:12,190
Tavaraa jäi.

184
00:09:12,190 --> 00:09:13,320
Useimmat tavaraa jäi.

185
00:09:13,320 --> 00:09:14,320
AJAX Testi ei muuttunut.

186
00:09:14,320 --> 00:09:16,700
Painike itse, tämä
avattava valikko ei muuttunut.

187
00:09:16,700 --> 00:09:18,260
Mutta tiedot siellä teki muutoksen.

188
00:09:18,260 --> 00:09:20,218
Ja riippuen siitä, kuinka
nopeasti minun tietokone liikkuu,

189
00:09:20,218 --> 00:09:24,430
voit itse voisi nähdä, että sisältö
katoaa ja sitten ilmestyy todella

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

191
00:09:24,930 --> 00:09:27,320
Se sisältö on
poistettu infodiv,

192
00:09:27,320 --> 00:09:29,940
ja sitten korvattu
uusi asynkroninen pyynnöstä.

193
00:09:29,940 --> 00:09:34,410
>> Joten jos vaihdan sitä voidaan sanoa,
Rob-- ja uudelleen, katsomaan,

194
00:09:34,410 --> 00:09:38,379
ja ehkä näemme se todellisuudessa
katoaa ja tulee uudelleen nopeasti.

195
00:09:38,379 --> 00:09:38,920
Näetkö tuon?

196
00:09:38,920 --> 00:09:41,400
Miten se vain piipahti pois,
ja sitten se täytetään?

197
00:09:41,400 --> 00:09:43,640
Se AJAX pyyntö
sellainen tapahtuu.

198
00:09:43,640 --> 00:09:46,060
Ja niin riippuen
henkilö päätän, olen

199
00:09:46,060 --> 00:09:50,690
tehden eri asynkroninen
pyyntö eri tiedostoon

200
00:09:50,690 --> 00:09:52,730
että olen minun palvelimelle.

201
00:09:52,730 --> 00:09:55,550
Ja sisältö minun
infodiv päivität,

202
00:09:55,550 --> 00:09:58,457
jonka perusteella nämä olen valinnut.

203
00:09:58,457 --> 00:10:00,040
Niin se on todella kaikki on AJAX.

204
00:10:00,040 --> 00:10:04,090
Sen avulla voimme tehdä nämä asynkroninen
pyynnöt, päivitykset sivulle.

205
00:10:04,090 --> 00:10:06,450
Ilman
päivitä koko sivun,

206
00:10:06,450 --> 00:10:08,520
aiomme saada uusia
sisältöä siitä tekemällä

207
00:10:08,520 --> 00:10:11,170
uusi tuore pyynnön palvelimelle.

208
00:10:11,170 --> 00:10:13,420
Ja niin, meidän sivut voivat tulla
hieman enemmän dynaaminen.

209
00:10:13,420 --> 00:10:15,128
>> Ja kun saamme lisää
ja kehittyneempiä, voit

210
00:10:15,128 --> 00:10:17,700
saattaa saada asioita, kuten
vaikkapa sähköpostiisi,

211
00:10:17,700 --> 00:10:19,850
jossa sinun ei tarvitse tehdä mitään.

212
00:10:19,850 --> 00:10:22,560
Sinun ei tarvitse napsauttaa
-valikosta tai valitse jotain,

213
00:10:22,560 --> 00:10:25,920
ja yhtäkkiä, teidän uusin
sähköposti näkyy yläreunassa.

214
00:10:25,920 --> 00:10:27,840
Se on myös vain Ajax pyynnöstä.

215
00:10:27,840 --> 00:10:30,460
Ajax pyytää teidän
palvelin, sähköpostipalvelin,

216
00:10:30,460 --> 00:10:33,360
lähettää yli kaikki tiedot
noin uusimmat sähköpostit,

217
00:10:33,360 --> 00:10:38,110
ja muuttuvat mitä näet
näyttö on teidän uusin joukko sähköposteja.

218
00:10:38,110 --> 00:10:41,080
Ja jos sinulla on uusi yksi
siellä, niin sisältö että div

219
00:10:41,080 --> 00:10:44,580
muuttuvat sen
päivitetyn sisällön.

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

221
00:10:45,480 --> 00:10:47,500
Tämä on CS50.

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