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

2
00:00:00,500 --> 00:00:04,810
[Predvaja glasba]

3
00:00:04,810 --> 00:00:06,940
>> Doug LLOYD: Torej še ena
nekako idejo, da

4
00:00:06,940 --> 00:00:12,120
nekako sodi pod okrilje
JavaScript je nekaj, kar se imenuje AJAX.

5
00:00:12,120 --> 00:00:15,310
Do te točke, naši
interakcije z JavaScript

6
00:00:15,310 --> 00:00:17,727
je bila omejena na potiskanje
gumb in se nekaj zgodi.

7
00:00:17,727 --> 00:00:19,560
In natančneje,
nekaj, kar se zgodi

8
00:00:19,560 --> 00:00:22,950
je naše spletne strani, videz in občutek spremembe.

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

10
00:00:23,450 --> 00:00:26,540
Kot zlasti v
Dokument objektni model video,

11
00:00:26,540 --> 00:00:29,060
Sem spremenil barvo ozadja.

12
00:00:29,060 --> 00:00:33,240
Toda, ko sem, da nisem imel
storiti vse posebne dodatne zahteve.

13
00:00:33,240 --> 00:00:36,800
Nisem imel, da zahteva
strežnik mi poslali novo stran.

14
00:00:36,800 --> 00:00:39,620
Pravkar sem se spremenila, kar sem že imel.

15
00:00:39,620 --> 00:00:42,245
Nisem imel, da osvežite svojo stran,
in stvari zagotovo spremenilo,

16
00:00:42,245 --> 00:00:43,760
tako da je super.

17
00:00:43,760 --> 00:00:48,400
Ampak tam je definitivno nekaj
Navodilo interakcija uporabniku.

18
00:00:48,400 --> 00:00:53,140
AJAX je kul tehnika, ki omogoča,
nam posodobiti vsebino strani,

19
00:00:53,140 --> 00:00:55,750
in ne samo videz in
počutim, brez ponovnega nakladanja.

20
00:00:55,750 --> 00:00:58,610
>> In še posebej, ko sem
pravijo, posodabljanje vsebine strani je,

21
00:00:58,610 --> 00:01:01,990
Ne pravim, da smo znova
stran uporablja JavaScript.

22
00:01:01,990 --> 00:01:06,560
Pravim, da smo dejansko zahteva
več informacij od strežnika

23
00:01:06,560 --> 00:01:08,640
brez naše strani imajo, da osvežite.

24
00:01:08,640 --> 00:01:10,850
>> Zdaj pa, da nekako malo
bolj napredna tehnika

25
00:01:10,850 --> 00:01:11,950
da bomo govorili
približno v tem videu.

26
00:01:11,950 --> 00:01:13,720
Bomo imeli nekaj interakcije.

27
00:01:13,720 --> 00:01:17,750
Toda, ko smo storili, bom, da bo
vlaganje prošenj za spletni strežnik.

28
00:01:17,750 --> 00:01:21,140
V tem primeru, le kaj
teče moj Apache spletni strežnik.

29
00:01:21,140 --> 00:01:25,010
Grem, da se kar dodatno
zahteve, medtem ko sem na obisku spletne strani,

30
00:01:25,010 --> 00:01:26,890
ampak moja stran ne bo osvežil.

31
00:01:26,890 --> 00:01:30,000
>> To je le, da bo
asinhrono posodobiti mojo stran.

32
00:01:30,000 --> 00:01:31,840
In to je v resnici,
ki AJAX pomeni,

33
00:01:31,840 --> 00:01:35,400
je Asinhroni JavaScript in XML.

34
00:01:35,400 --> 00:01:37,910
XML je ena vrsta markup
jezik, in jih lahko razvrstite po

35
00:01:37,910 --> 00:01:39,680
si o njej mislijo tako kot HTML.

36
00:01:39,680 --> 00:01:42,990
To ni čisto ista stvar, vendar
to je v bistvu samo označevalni jezik.

37
00:01:42,990 --> 00:01:47,770
Torej, to je asinhrona
JavaScript in označevalni jezik.

38
00:01:47,770 --> 00:01:50,590
>> Torej, da bi uporabljali to
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
ni samostojen programski jezik.

40
00:01:52,230 --> 00:01:55,300
To je samo neke vrste
niz techniques-- mi

41
00:01:55,300 --> 00:01:57,870
morali ustvariti poseben
JavaScript objekt, ki

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

43
00:02:00,689 --> 00:02:01,980
Zdaj, to je zelo enostavno, da to storijo.

44
00:02:01,980 --> 00:02:04,550
Pravkar smo rekli, var, ne glede na
želimo poklicati tega cilja,

45
00:02:04,550 --> 00:02:07,030
enaka novo XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
In zdaj smo zdaj pridobil
AJAX vrste objekta,

47
00:02:11,050 --> 00:02:14,370
ali XMLHttpRequest
predmet, ki bo omogočal

48
00:02:14,370 --> 00:02:18,360
nam asinhrono posodobiti našo spletno stran.

49
00:02:18,360 --> 00:02:23,100
>> Potem ko smo gotten to novo
predmet, to XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
moramo nekaj storiti, da njegovi
onreadystatechange vedenje.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
vedenje je res samo

52
00:02:30,360 --> 00:02:34,080
ko vložijo zahtevo
na spletno stran, stran

53
00:02:34,080 --> 00:02:35,880
gre skozi več korakov.

54
00:02:35,880 --> 00:02:37,370
Najprej je zahteva ni bila poslana.

55
00:02:37,370 --> 00:02:39,860
Nato je prošnja bila
poslano, vendar ni ravnal.

56
00:02:39,860 --> 00:02:41,580
Potem je bila zahteva ravnal.

57
00:02:41,580 --> 00:02:43,680
Nato je zahteva
se pošlje nazaj k tebi.

58
00:02:43,680 --> 00:02:46,930
>> Nato je zahteva
polno naložen na vaši strani.

59
00:02:46,930 --> 00:02:48,640
Tisti, ki so različne države.

60
00:02:48,640 --> 00:02:53,890
In zato moramo, da naše
novo XMLHttpRequest objekt

61
00:02:53,890 --> 00:02:58,740
da se spremenijo, ko stanje pripravljenosti spremembe.

62
00:02:58,740 --> 00:03:01,925
In ponavadi smo to naredili s
opredeljevanju anonimni funkcijo, ki

63
00:03:01,925 --> 00:03:04,490
da smo seznanjeni z od
JavaScript sedaj, da

64
00:03:04,490 --> 00:03:09,840
se sproži ob stanju pripravljenosti spremembe.

65
00:03:09,840 --> 00:03:11,340
To je res ni veliko več kot to.

66
00:03:11,340 --> 00:03:14,340
Mi smo le, da bo treba opredelitvi
Funkcija anonimna, nekako všeč, kar

67
00:03:14,340 --> 00:03:16,440
smo počeli v
JavaScript, kjer bi

68
00:03:16,440 --> 00:03:18,750
imajo anonimne funkcijo
odzvati na on klik,

69
00:03:18,750 --> 00:03:23,230
ali pa, ko smo počeli zemljevid
različni predmeti v array.

70
00:03:23,230 --> 00:03:25,220
>> Nekaj ​​se je zgodilo, ko
kaj je kliknil.

71
00:03:25,220 --> 00:03:28,810
V tem primeru, to je samo nekaj, kar je
dogaja, ko se je stanje naše strani

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

73
00:03:30,160 --> 00:03:32,730
Obstajata dve drugi lastnosti
da so nekako of-- oni ne

74
00:03:32,730 --> 00:03:35,524
edine lastnosti, ki so
inherentna XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
ampak oni so zelo pomembne.

76
00:03:36,940 --> 00:03:39,815
Nekaj ​​je pozval readyState,
ki, kot si verjetno lahko uganiti,

77
00:03:39,815 --> 00:03:41,750
je povezana z onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
To dejansko vam pove
kaj readyState je.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, in 4
možnosti tam,

80
00:03:46,289 --> 00:03:48,080
in so nekako v grobem
ustreza temu, kar

81
00:03:48,080 --> 00:03:50,030
Pravkar sem govoril o drugi nazaj.

82
00:03:50,030 --> 00:03:53,100
>> In potem stanje, ki
upajmo, da če je šlo vse v redu,

83
00:03:53,100 --> 00:03:56,710
200, ki je kratka
za, seveda, v redu,

84
00:03:56,710 --> 00:03:58,330
ki smo seznanjeni z od Http.

85
00:03:58,330 --> 00:04:03,735
Tako smo v upanju, da je naša država pripravljena
je štiri, in naš status je 200.

86
00:04:03,735 --> 00:04:07,940
In če naši stanju pripravljenosti
je štiri, in odziv

87
00:04:07,940 --> 00:04:11,490
je pripravljen, da se dajo na
Stran, stanje je 200,

88
00:04:11,490 --> 00:04:13,580
smo uspeli narediti
vse uspešno,

89
00:04:13,580 --> 00:04:17,209
Zdaj bomo lahko asinhrono
posodobiti našo stran

90
00:04:17,209 --> 00:04:21,730
ne da bi osvežite
celotna vsebina tega.

91
00:04:21,730 --> 00:04:27,710
>> Potem ko smo opredelili, kaj se zgodi
na obnašanje onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
in smo preverili, da readyState
je 4 in stanje je 200,

93
00:04:31,020 --> 00:04:33,900
potem vse, kar morate storiti je,
odpirajo asinhroni

94
00:04:33,900 --> 00:04:38,530
Zahteva, ki je ravno tako
HTTP splošno GET zahtevo.

95
00:04:38,530 --> 00:04:41,950
Samo to počne načrtno,
namesto prek našega spletnega brskalnika.

96
00:04:41,950 --> 00:04:43,786
In potem smo poslali to zahtevo.

97
00:04:43,786 --> 00:04:45,660
Torej, kaj je to morda
izgledal v kontekstu?

98
00:04:45,660 --> 00:04:49,790
Torej, tukaj je funkcija, ki
ukvarja z AJAX prijav.

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

100
00:04:50,290 --> 00:04:52,430
In sem samovoljno rekel
sprejema argumenta.

101
00:04:52,430 --> 00:04:55,550
In to neke vrste
splošno okostje tukaj.

102
00:04:55,550 --> 00:05:00,890
Na samem začetku smo dobili
sami novo XMLHttpRequest objekt.

103
00:05:00,890 --> 00:05:03,830
Potem, moram nastaviti
onreadystatechange vedenje.

104
00:05:03,830 --> 00:05:06,970
In tako bom rekel,
ko spremembe readyState,

105
00:05:06,970 --> 00:05:10,110
Želim vam, da pokličete to funkcijo.

106
00:05:10,110 --> 00:05:12,570
>> Ki se bo vprašati
Vprašanje, če readyState

107
00:05:12,570 --> 00:05:17,240
4, če je readyState spremenila
biti 4, stanje je bilo 200,

108
00:05:17,240 --> 00:05:20,799
tako da smo imeli uspešno zahtevo, I
želeli narediti nekaj na stran.

109
00:05:20,799 --> 00:05:22,590
In mi bomo ogledali
na primer, kaj

110
00:05:22,590 --> 00:05:25,010
da nekaj lahko v sekundi.

111
00:05:25,010 --> 00:05:27,830
Torej, zdaj sem definirana
moj anonimni funkcija,

112
00:05:27,830 --> 00:05:31,340
moj odgovor funkcija kadarkoli
Spremembe readyState.

113
00:05:31,340 --> 00:05:37,120
>> Torej, potem pa moram samo še odpreti
zahteva, z uporabo odprte metode.

114
00:05:37,120 --> 00:05:39,160
In potem sem poslati to zahtevo.

115
00:05:39,160 --> 00:05:41,980
In dajmo si oglejte
bolj konkreten primer

116
00:05:41,980 --> 00:05:46,290
česa AJAX lahko storite na naših spletnih straneh.

117
00:05:46,290 --> 00:05:49,740
Torej, tukaj imam zelo preprost
Stran se imenuje home.html.

118
00:05:49,740 --> 00:05:53,620
In imam informacija gre
tu in neke vrste spustnem meniju.

119
00:05:53,620 --> 00:05:55,390
>> In bomo to ponovno v eni sekundi.

120
00:05:55,390 --> 00:05:59,150
Ampak mislim, da se moramo zdaj traja
poglej dejanske izvorne kode.

121
00:05:59,150 --> 00:06:01,080
In tako, bom odpreti home.html.

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

123
00:06:03,490 --> 00:06:04,740
In bomo videli, kaj se dogaja.

124
00:06:04,740 --> 00:06:08,240
Tako se na samem vrhu tukaj, imam
nekateri JavaScript stvari, ki se dogaja.

125
00:06:08,240 --> 00:06:12,470
>> In tukaj sem očitno imela
div, katere ID je infodiv,

126
00:06:12,470 --> 00:06:15,290
in nekaj informacij
se dogaja, da gredo tja.

127
00:06:15,290 --> 00:06:16,374
In potem moram ta obrazec.

128
00:06:16,374 --> 00:06:18,081
In znotraj tega
oblika, imam nekaj

129
00:06:18,081 --> 00:06:20,200
imenuje Select, ki
je samo spustni meni

130
00:06:20,200 --> 00:06:22,150
s kopico različnih možnosti.

131
00:06:22,150 --> 00:06:26,150
In očitno, ko se to spremeni, ko
možnost, da je bil izbran ima

132
00:06:26,150 --> 00:06:30,600
spremenila, bom poklical
nekatere funkcije cs50Info,

133
00:06:30,600 --> 00:06:33,190
in potem bom
prenese v this.value,

134
00:06:33,190 --> 00:06:35,740
kjer se to nanaša na
katera možnost je bila izbrana,

135
00:06:35,740 --> 00:06:39,820
in vrednost je eden od teh tod možnost
vrednost = enaka prazna, "Blumberg,"

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

137
00:06:42,610 --> 00:06:45,090
>> Torej, kaj lahko dejansko
tukaj zgodilo, ko sem to naredil?

138
00:06:45,090 --> 00:06:48,800
No, vzemimo
poglej blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Izgleda, da je samo
odrezek nekega HTML.

141
00:06:53,924 --> 00:06:56,090
In v resnici, kaj sem v upanju,
se bo zgodilo tukaj

142
00:06:56,090 --> 00:07:00,020
se bom lahko priključite
Ta HTML neposredno v moji spletni strani

143
00:07:00,020 --> 00:07:02,970
ne da bi osvežite
stran, tako da kadar

144
00:07:02,970 --> 00:07:07,510
Izberem Hannah iz spustnega menija
Meni, informacije o Hannah,

145
00:07:07,510 --> 00:07:11,100
zlasti, te informacije
tukaj v blumberg.html,

146
00:07:11,100 --> 00:07:12,574
je tisto, kar se pojavi na strani.

147
00:07:12,574 --> 00:07:13,740
In mi ne bi bilo treba osvežiti.

148
00:07:13,740 --> 00:07:16,842
In če sem izbral nekoga drugega,
njihove informacije bi prikazal.

149
00:07:16,842 --> 00:07:17,550
Kako to storiti?

150
00:07:17,550 --> 00:07:20,290
Tudi to zahteva
nam, da uporabite nekaj AJAX.

151
00:07:20,290 --> 00:07:22,540
In tako bomo odprli ajax.js.

152
00:07:22,540 --> 00:07:25,550
In tukaj je, da funkcija, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Če ime ni nič, sem se vrnil.

154
00:07:27,410 --> 00:07:31,450
Ne bom storiti ničesar, če
prazna možnost je bila izbrana.

155
00:07:31,450 --> 00:07:35,420
V nasprotnem primeru bom
ustvariti nov XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
In potem bom povedal, ko se je
readyState spremembe, pokličite to funkcijo.

157
00:07:39,020 --> 00:07:43,630
>> In če readyState je
4 in stanje je 200,

158
00:07:43,630 --> 00:07:45,740
tukaj je malo
od jQuery na linijo 13.

159
00:07:45,740 --> 00:07:50,450
Toda vse delam, je rekel,
spremenite vsebino infodiv

160
00:07:50,450 --> 00:07:57,820
da bi karkoli sem se vrnil kot
Odziv iz moje HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Kaj je moj HttpRequest?

162
00:07:59,590 --> 00:08:02,020
No, to je pravica
tukaj na liniji 18 in 19.

163
00:08:02,020 --> 00:08:08,550
Line 18, jaz sem v bistvu pripravljamo
GET zahtevo za ime + .html.

164
00:08:08,550 --> 00:08:11,170
In spet, ime je tu
trditev, da je bila

165
00:08:11,170 --> 00:08:14,280
sprejet kot parameter cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Torej v bistvu, sem mimo v nekdo
ime, ki je bil, da je nabor možnosti

167
00:08:18,460 --> 00:08:22,980
da smo videli v
drop-down menija v obliki.

168
00:08:22,980 --> 00:08:24,450
Dobivam to ime.

169
00:08:24,450 --> 00:08:29,530
In jaz sem rekel, jaz bi vas rad
prosim dobijo za mene, da file.html,

170
00:08:29,530 --> 00:08:31,020
in nato pošljete to zahtevo.

171
00:08:31,020 --> 00:08:34,820
>> In da onreadystatechange se dogaja
da je poslušanje in čaka in čaka

172
00:08:34,820 --> 00:08:39,460
in čaka, dokler readyState
4, in je stanje 200.

173
00:08:39,460 --> 00:08:44,970
Tako da je pripravljen, da bi mu stregli,
in prošnja je bila uspešna.

174
00:08:44,970 --> 00:08:49,500
In potem, če je to, da se bo
spremenite vsebino infodiv

175
00:08:49,500 --> 00:08:53,030
da je besedilo odgovora, da sem se vrnil.

176
00:08:53,030 --> 00:08:54,930
>> Torej, da vidimo, kako to
lahko dejansko delajo.

177
00:08:54,930 --> 00:08:58,860
Torej bomo čez glavo, da moj brskalnik
okno, in bomo poglej tukaj.

178
00:08:58,860 --> 00:09:01,359
Torej, dajmo si oglejte
kaj se dogaja tukaj v AJAX.

179
00:09:01,359 --> 00:09:03,400
Torej bomo izbrali nekoga,
iz spustnega menija.

180
00:09:03,400 --> 00:09:06,079
Torej, v tem primeru, kaj je
samo izbere Hannah.

181
00:09:06,079 --> 00:09:08,120
In obvestilo, da je Hannah je
Podatki se je spremenilo,

182
00:09:08,120 --> 00:09:11,030
vendar nisem imel any-- my
Stran je v celoti ne osvežite.

183
00:09:11,030 --> 00:09:12,190
Stvari ostal.

184
00:09:12,190 --> 00:09:13,320
Večina stvari je ostal.

185
00:09:13,320 --> 00:09:14,320
AJAX Testna ni spremenila.

186
00:09:14,320 --> 00:09:16,700
Gumb sama, to
spustnem meniju ni spremenilo.

187
00:09:16,700 --> 00:09:18,260
Ampak informacija je naredil spremembo.

188
00:09:18,260 --> 00:09:20,218
In glede na to, kako
hitro moji računalniški poteze,

189
00:09:20,218 --> 00:09:24,430
si dejansko lahko videli, da vsebino
izgine, nato pa se ponovno pojavi res

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

191
00:09:24,930 --> 00:09:27,320
To je vsebina pa
izbrisan iz infodiv,

192
00:09:27,320 --> 00:09:29,940
in nato nadomesti z
Nov asinhroni zahteva.

193
00:09:29,940 --> 00:09:34,410
>> Torej, če sem ga preklopite treba reči,
Rob-- in še enkrat, poglej,

194
00:09:34,410 --> 00:09:38,379
in morda bomo videli dejansko
izginejo in se hitro spet pojavijo.

195
00:09:38,379 --> 00:09:38,920
Vidiš, da je?

196
00:09:38,920 --> 00:09:41,400
Kako se je pravkar izstrelil stran,
in potem ponovno napolniti?

197
00:09:41,400 --> 00:09:43,640
Da je zahtevek AJAX
nekako poteka.

198
00:09:43,640 --> 00:09:46,060
In tako odvisno od
oseba, sem se odločil, da sem

199
00:09:46,060 --> 00:09:50,690
izdelavo drugačno asinhroni
Zahtevek za drugo datoteko

200
00:09:50,690 --> 00:09:52,730
da imam na mojem strežniku.

201
00:09:52,730 --> 00:09:55,550
In vsebina mojega
infodiv so posodabljanje,

202
00:09:55,550 --> 00:09:58,457
na podlagi katere od teh sem izbral.

203
00:09:58,457 --> 00:10:00,040
Tako, da je res vse, kar je za AJAX.

204
00:10:00,040 --> 00:10:04,090
To nam omogoča, da te asinhroni
zahteva, posodobitve strani.

205
00:10:04,090 --> 00:10:06,450
Ne da bi
osvežil celotno stran,

206
00:10:06,450 --> 00:10:08,520
bomo dobili novo
vsebina iz nje s tem,

207
00:10:08,520 --> 00:10:11,170
nov sveže zahtevek s strežnikom.

208
00:10:11,170 --> 00:10:13,420
In tako lahko naši strani postanejo
precej malo bolj dinamično.

209
00:10:13,420 --> 00:10:15,128
>> In kot smo dobili več
in bolj napreden, vas

210
00:10:15,128 --> 00:10:17,700
bi lahko dobil stvari, kot so
recimo, vaš e-poštni nabiralnik,

211
00:10:17,700 --> 00:10:19,850
kjer vam ni treba storiti ničesar.

212
00:10:19,850 --> 00:10:22,560
Nimate za klik
spustnem meniju ali kliknite ničesar,

213
00:10:22,560 --> 00:10:25,920
in kar naenkrat, vaš najnovejši
elektronske pošte pojavi na vrhu.

214
00:10:25,920 --> 00:10:27,840
To je tudi samo Ajax zahteva.

215
00:10:27,840 --> 00:10:30,460
Ajax je zahteval vaš
server, e-poštni strežnik,

216
00:10:30,460 --> 00:10:33,360
poslati preko vseh informacij
o vaših najnovejših e-pošte,

217
00:10:33,360 --> 00:10:38,110
in spreminja, kar vidite na
Zaslon naj bo vaš najnovejši nabor e-pošto.

218
00:10:38,110 --> 00:10:41,080
In če imate novo v
tam, potem vsebina te div

219
00:10:41,080 --> 00:10:44,580
se bo spremenila, da odraža
posodobljeno vsebino.

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

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

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