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

2
00:00:00,500 --> 00:00:04,810
[MUSIC JOC]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Deci încă o
un fel de noțiune care

4
00:00:06,940 --> 00:00:12,120
un fel de cădere sub umbrela
JavaScript este ceva numit AJAX.

5
00:00:12,120 --> 00:00:15,310
Până la acest punct, ne
interacțiunea cu JavaScript

6
00:00:15,310 --> 00:00:17,727
a fost limitat la o împinge
buton și se întâmplă ceva.

7
00:00:17,727 --> 00:00:19,560
Și precis,
ceva ce se întâmplă

8
00:00:19,560 --> 00:00:22,950
este site-ul nostru arata si se simt schimbări.

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

10
00:00:23,450 --> 00:00:26,540
Ca și în special, în
Document Object Model videoclip,

11
00:00:26,540 --> 00:00:29,060
Am schimbat culoarea de fundal.

12
00:00:29,060 --> 00:00:33,240
Dar când am făcut asta, nu am avut
de a face orice solicitări suplimentare speciale.

13
00:00:33,240 --> 00:00:36,800
Nu am avut de a solicita ca
serverul trimite-mi o nouă pagină.

14
00:00:36,800 --> 00:00:39,620
Am schimbat deja ceea ce am avut.

15
00:00:39,620 --> 00:00:42,245
Nu am avut să reîncărcați pagina mea,
și lucrurile au schimbat cu siguranta,

16
00:00:42,245 --> 00:00:43,760
așa că e minunat.

17
00:00:43,760 --> 00:00:48,400
Dar nu e cu siguranta unele
interacțiunea manualul de utilizare în cauză.

18
00:00:48,400 --> 00:00:53,140
AJAX este o tehnica care permite rece
ne pentru a actualiza conținutul unei pagini,

19
00:00:53,140 --> 00:00:55,750
și nu doar aspectul și
simt, fără reîncărcare.

20
00:00:55,750 --> 00:00:58,610
>> Și în mod special atunci când am
spune actualizarea conținutul unei pagini,

21
00:00:58,610 --> 00:01:01,990
Nu spun am rescrie
pagina folosind JavaScript.

22
00:01:01,990 --> 00:01:06,560
Spun am de fapt cere
mai multe informații de la server

23
00:01:06,560 --> 00:01:08,640
fără a avea pagina noastră pentru a reîncărca.

24
00:01:08,640 --> 00:01:10,850
>> Acum, că un fel de un pic de
o tehnică mai avansată

25
00:01:10,850 --> 00:01:11,950
că vom vorbi
despre în acest film.

26
00:01:11,950 --> 00:01:13,720
Vom avea unele interacțiune.

27
00:01:13,720 --> 00:01:17,750
Dar când o vom face, am de gând să fie
ceea ce face cereri serverul de web.

28
00:01:17,750 --> 00:01:21,140
În acest caz, doar ceea ce este
rulează serverul meu de web Apache.

29
00:01:21,140 --> 00:01:25,010
Am de gând să fie de luare suplimentare
solicitări în timp ce eu sunt vizita o pagină web,

30
00:01:25,010 --> 00:01:26,890
dar pagina mea nu se va actualiza.

31
00:01:26,890 --> 00:01:30,000
>> E doar de gând să
actualiza asincron pagina mea.

32
00:01:30,000 --> 00:01:31,840
Și asta e, de fapt,
care vine de la AJAX,

33
00:01:31,840 --> 00:01:35,400
este Asynchronous JavaScript si XML.

34
00:01:35,400 --> 00:01:37,910
XML este un alt tip de marcaj
limbă, și vă pot sorta de

35
00:01:37,910 --> 00:01:39,680
cred că de ea la fel ca HTML.

36
00:01:39,680 --> 00:01:42,990
Nu e chiar același lucru, dar
este practic doar un limbaj de marcare.

37
00:01:42,990 --> 00:01:47,770
Deci, este o asincron
JavaScript și un limbaj de marcare.

38
00:01:47,770 --> 00:01:50,590
>> Deci, în scopul de a utiliza acest
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
nu este un limbaj de programare separată.

40
00:01:52,230 --> 00:01:55,300
E doar un fel de
set de techniques-- ne

41
00:01:55,300 --> 00:01:57,870
nevoie pentru a crea un speciale
Obiect JavaScript, care

42
00:01:57,870 --> 00:02:00,689
se numește un XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Acum, e foarte ușor să faci acest lucru.

44
00:02:01,980 --> 00:02:04,550
Doar spunem var, indiferent de
vrem să numim acest obiect,

45
00:02:04,550 --> 00:02:07,030
este egal cu noi XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
Și acum am obținut acum
un fel de AJAX obiect,

47
00:02:11,050 --> 00:02:14,370
sau un XMLHttpRequest
obiect, ceea ce va permite

48
00:02:14,370 --> 00:02:18,360
ne pentru a actualiza în mod asincron pagina noastră.

49
00:02:18,360 --> 00:02:23,100
>> După ce am ajuns la această nouă
obiect, acest XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
trebuie să facem ceva pentru a acesteia
comportament onreadystatechange.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
Comportamentul este de fapt doar

52
00:02:30,360 --> 00:02:34,080
atunci când face o cerere
la o pagină web, pagina

53
00:02:34,080 --> 00:02:35,880
trece printr-o serie de etape.

54
00:02:35,880 --> 00:02:37,370
În primul rând, o cerere nu a fost trimis.

55
00:02:37,370 --> 00:02:39,860
Apoi, cererea a fost
trimis, dar nu a acționat asupra.

56
00:02:39,860 --> 00:02:41,580
Apoi, cererea a primit răspuns.

57
00:02:41,580 --> 00:02:43,680
Apoi cererea este
fiind trimis înapoi la tine.

58
00:02:43,680 --> 00:02:46,930
>> Apoi, cererea este
complet încărcate în pagina ta.

59
00:02:46,930 --> 00:02:48,640
Acestea sunt diferite state.

60
00:02:48,640 --> 00:02:53,890
Și așa trebuie să stabilim nostru
nou obiect XMLHttpRequest

61
00:02:53,890 --> 00:02:58,740
pentru a schimba atunci când a gata modificările de stat.

62
00:02:58,740 --> 00:03:01,925
Si de obicei, vom face acest lucru prin
definind o funcție anonim, care

63
00:03:01,925 --> 00:03:04,490
suntem familiarizați cu de la
JavaScript acum, că

64
00:03:04,490 --> 00:03:09,840
este numit atunci când a gata modificările de stat.

65
00:03:09,840 --> 00:03:11,340
Este într-adevăr nu mai mult decât atât.

66
00:03:11,340 --> 00:03:14,340
Noi doar va fi definirea unui
Funcția anonimă, un fel de ceea ce

67
00:03:14,340 --> 00:03:16,440
făceam în
JavaScript, unde ne-ar

68
00:03:16,440 --> 00:03:18,750
au o funcție anonim
răspunde la un clic pe,

69
00:03:18,750 --> 00:03:23,230
sau atunci când am fost a face o hartă a
diverse obiecte într-o matrice.

70
00:03:23,230 --> 00:03:25,220
>> Ceva sa întâmplat când
ceva a fost făcut clic.

71
00:03:25,220 --> 00:03:28,810
În acest caz, e doar ceva este
se întâmplă în cazul în care starea de pagina noastră

72
00:03:28,810 --> 00:03:30,160
modificări.

73
00:03:30,160 --> 00:03:32,730
Există alte două proprietăți
care sunt un fel de-- nu sunt

74
00:03:32,730 --> 00:03:35,524
singurele proprietăți care sunt
inerente XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
dar sunt destul de importante cele.

76
00:03:36,940 --> 00:03:39,815
Exista ceva numit readyState,
care, după cum puteți ghici, probabil,,

77
00:03:39,815 --> 00:03:41,750
este legată de onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
Este de fapt, vă spune
ceea ce este readyState.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, 4 și sunt
posibilitățile de acolo,

80
00:03:46,289 --> 00:03:48,080
și ei un fel de aproximativ
corespund cu ceea ce

81
00:03:48,080 --> 00:03:50,030
Tocmai vorbeam despre acum o secundă.

82
00:03:50,030 --> 00:03:53,100
>> Și atunci statutul, care
sperăm dacă totul a mers bine,

83
00:03:53,100 --> 00:03:56,710
este 200, care este prescurtarea
pentru, desigur, OK,

84
00:03:56,710 --> 00:03:58,330
care suntem familiarizați cu de la HTTP.

85
00:03:58,330 --> 00:04:03,735
Deci suntem în speranța că statul nostru gata
este de patru, și statutul nostru este de 200.

86
00:04:03,735 --> 00:04:07,940
Și dacă statul nostru gata
este de patru, iar răspunsul

87
00:04:07,940 --> 00:04:11,490
este gata pentru a fi pus pe
pagină, iar starea este de 200,

88
00:04:11,490 --> 00:04:13,580
am fost în stare să facă
totul cu succes,

89
00:04:13,580 --> 00:04:17,209
Acum putem asincron
actualiza pagina noastra

90
00:04:17,209 --> 00:04:21,730
fără a fi nevoie să reîncărcați
întregul conținut al acestuia.

91
00:04:21,730 --> 00:04:27,710
>> După ce am definit ceea ce se întâmplă
la comportamentul onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
și am verificat că readyState
este de 4 și de stare este de 200,

93
00:04:31,020 --> 00:04:33,900
atunci tot ce trebuie să facem este
deschide un asincron

94
00:04:33,900 --> 00:04:38,530
cerere, care este doar face
un HTTP GET, în general, cerere.

95
00:04:38,530 --> 00:04:41,950
Doar o faci programare,
în loc de prin intermediul browser-ul nostru.

96
00:04:41,950 --> 00:04:43,786
Și apoi ne-am trimite această cerere.

97
00:04:43,786 --> 00:04:45,660
Deci, ce face acest lucru, poate
arata ca in context?

98
00:04:45,660 --> 00:04:49,790
Deci, aici este o funcție care
se ocupă cu cererile AJAX.

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

100
00:04:50,290 --> 00:04:52,430
Și am zis în mod arbitrar
se acceptă un argument.

101
00:04:52,430 --> 00:04:55,550
Și aceasta un fel de
schelet generală aici.

102
00:04:55,550 --> 00:05:00,890
La început, ne
ne un nou obiect XMLHttpRequest.

103
00:05:00,890 --> 00:05:03,830
Apoi, am nevoie pentru a seta
comportament onreadystatechange.

104
00:05:03,830 --> 00:05:06,970
Și așa am de gând să spun
atunci când se schimbă readyState,

105
00:05:06,970 --> 00:05:10,110
Vreau să apelați această funcție.

106
00:05:10,110 --> 00:05:12,570
>> Care este de gând să solicita
întrebare, în cazul în care readyState

107
00:05:12,570 --> 00:05:17,240
este de 4, în cazul în care sa schimbat readyState
să fie 4, iar starea a fost de 200,

108
00:05:17,240 --> 00:05:20,799
asa ca am avut o cerere de succes, am
vrei să faci ceva la pagina.

109
00:05:20,799 --> 00:05:22,590
Și vom arunca o privire
la un exemplu de ceea ce

110
00:05:22,590 --> 00:05:25,010
că ceva ar putea fi într-o secundă.

111
00:05:25,010 --> 00:05:27,830
Deci, acum am definit
funcția mea anonim,

112
00:05:27,830 --> 00:05:31,340
funcția mea de răspuns ori de câte ori
modificările readyState.

113
00:05:31,340 --> 00:05:37,120
>> Deci am nevoie doar pentru a deschide un
solicita, folosind metoda deschisă.

114
00:05:37,120 --> 00:05:39,160
Și apoi, am trimis această cerere.

115
00:05:39,160 --> 00:05:41,980
Și haideți să aruncăm o privire la
un exemplu mai concret

116
00:05:41,980 --> 00:05:46,290
de ce AJAX poate face pe paginile noastre web.

117
00:05:46,290 --> 00:05:49,740
Așa că am aici o foarte simplu
pagină numită home.html.

118
00:05:49,740 --> 00:05:53,620
Și am o informație merge
aici și un fel de meniu drop-down.

119
00:05:53,620 --> 00:05:55,390
>> Și vom revedea aceasta într-o secundă.

120
00:05:55,390 --> 00:05:59,150
Dar cred că ar trebui să o acum
uita-te la codul sursă actuale.

121
00:05:59,150 --> 00:06:01,080
Și așa, am de gând să deschidă home.html.

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

123
00:06:03,490 --> 00:06:04,740
Și vom vedea ce se întâmplă.

124
00:06:04,740 --> 00:06:08,240
Deci, până la foarte de sus de aici, am
unii JavaScript lucruri pe care se întâmplă.

125
00:06:08,240 --> 00:06:12,470
>> Și aici, eu se pare că au
un div a cărui identitate este infodiv,

126
00:06:12,470 --> 00:06:15,290
și unele informații
este de gând să meargă acolo.

127
00:06:15,290 --> 00:06:16,374
Și apoi am acest formular.

128
00:06:16,374 --> 00:06:18,081
Și în interiorul acestei
formă, am ceva

129
00:06:18,081 --> 00:06:20,200
numit Select, care
este doar un meniu drop-down

130
00:06:20,200 --> 00:06:22,150
cu un buchet de diferite opțiuni.

131
00:06:22,150 --> 00:06:26,150
Și se pare că, atunci când, care se schimbă, atunci când
opțiunea care a fost selectat are

132
00:06:26,150 --> 00:06:30,600
schimbat, am de gând pentru a apela
o funcție cs50Info,

133
00:06:30,600 --> 00:06:33,190
și apoi am de gând să
trece în this.value,

134
00:06:33,190 --> 00:06:35,740
în cazul în care aceasta se referă la
ce opțiune a fost selectat,

135
00:06:35,740 --> 00:06:39,820
și valoare nu este una dintre acestea aici, opțiunea
Valoarea = este egal cu gol, "Blumberg,"

136
00:06:39,820 --> 00:06:42,610
"Bowden," "canal", și "Malan."

137
00:06:42,610 --> 00:06:45,090
>> Deci, ceea ce ar putea de fapt
se întâmplă aici atunci când fac acest lucru?

138
00:06:45,090 --> 00:06:48,800
Ei bine, haideți să aruncăm o
uita-te la blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Se pare ca este doar o
fragment de unele HTML.

141
00:06:53,924 --> 00:06:56,090
Și, de fapt, ceea ce sper
se va întâmpla aici

142
00:06:56,090 --> 00:07:00,020
este am de gând să fie în măsură să conectați
acest cod HTML direct în pagina mea de web

143
00:07:00,020 --> 00:07:02,970
fără a fi nevoie să reîncărcați
pagina, astfel încât atunci când

144
00:07:02,970 --> 00:07:07,510
Aleg Hannah din meniul drop-down
meniu, informații despre Hannah,

145
00:07:07,510 --> 00:07:11,100
în special, aceste informații
aici, în blumberg.html,

146
00:07:11,100 --> 00:07:12,574
este ceea ce apare pe pagina.

147
00:07:12,574 --> 00:07:13,740
Și nu am să refresh.

148
00:07:13,740 --> 00:07:16,842
Și dacă am ales altcineva,
Informații lor ar apărea.

149
00:07:16,842 --> 00:07:17,550
Cum pot face acest lucru?

150
00:07:17,550 --> 00:07:20,290
Din nou, acest lucru necesită
ne de a utiliza unele AJAX.

151
00:07:20,290 --> 00:07:22,540
Și astfel, vom deschide ajax.js.

152
00:07:22,540 --> 00:07:25,550
Și aici este acea funcție, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Dacă numele nu este nimic, mă întorc.

154
00:07:27,410 --> 00:07:31,450
Eu nu am de gând să fac nimic dacă
opțiunea gol a fost ales.

155
00:07:31,450 --> 00:07:35,420
În caz contrar, am de gând să
a crea un nou XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
Și apoi am de gând să spun, în cazul în care
Schimbări readyState, apelați această funcție.

157
00:07:39,020 --> 00:07:43,630
>> Și dacă este readyState
4 și starea este 200,

158
00:07:43,630 --> 00:07:45,740
aici e un pic
de jQuery pe linia 13.

159
00:07:45,740 --> 00:07:50,450
Dar tot ce fac este de a spune,
schimba conținutul infodiv

160
00:07:50,450 --> 00:07:57,820
să fie orice m-am întors ca un
răspuns din HttpRequest meu.

161
00:07:57,820 --> 00:07:59,590
>> Ce este HttpRequest meu?

162
00:07:59,590 --> 00:08:02,020
Ei bine, ce-i drept
aici, pe linia 18 și 19.

163
00:08:02,020 --> 00:08:08,550
Line 18, mă pregătesc de fapt
o cerere de nume + .html GET.

164
00:08:08,550 --> 00:08:11,170
Și din nou, numele aici este
argumentul care a fost

165
00:08:11,170 --> 00:08:14,280
a trecut în ca parametru de cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Deci, practic, eu sunt asociate în cuiva
nume, care a fost ca set de opțiuni

167
00:08:18,460 --> 00:08:22,980
că am văzut în
meniul vertical în formă.

168
00:08:22,980 --> 00:08:24,450
Primesc acest nume.

169
00:08:24,450 --> 00:08:29,530
Iar eu spun că te-ar plăcea să
Vă rugăm să obțină pentru mine că file.html,

170
00:08:29,530 --> 00:08:31,020
și apoi trimiteți cererea.

171
00:08:31,020 --> 00:08:34,820
>> Și astfel încât onreadystatechange se întâmplă
a asculta și de așteptare și de așteptare

172
00:08:34,820 --> 00:08:39,460
și de așteptare, până la readyState
este de 4, iar starea este de 200.

173
00:08:39,460 --> 00:08:44,970
Deci, este gata pentru a fi servit,
și cererea a fost de succes.

174
00:08:44,970 --> 00:08:49,500
Și apoi, dacă este, o să
schimba conținutul infodiv

175
00:08:49,500 --> 00:08:53,030
pentru a fi textul de răspuns pe care m-am întors.

176
00:08:53,030 --> 00:08:54,930
>> Deci, hai sa vedem cum acest
s-ar putea lucra efectiv.

177
00:08:54,930 --> 00:08:58,860
Deci, vom peste cap de la browser-ul meu
fereastră, și ne vom uita aici.

178
00:08:58,860 --> 00:09:01,359
Deci, haideți să aruncăm o privire la
ce se întâmplă aici, în AJAX.

179
00:09:01,359 --> 00:09:03,400
Așa că vom alege pe cineva
din meniul drop-down.

180
00:09:03,400 --> 00:09:06,079
Deci, în acest caz, să
doar alege Hannah.

181
00:09:06,079 --> 00:09:08,120
Și observați că lui Hannah
informații sa schimbat,

182
00:09:08,120 --> 00:09:11,030
dar nu am avut any-- meu
Pagina nu a reîncărca în întregime.

183
00:09:11,030 --> 00:09:12,190
Lucruri rămas.

184
00:09:12,190 --> 00:09:13,320
Cele mai multe din lucrurile rămas.

185
00:09:13,320 --> 00:09:14,320
AJAX de testare nu sa schimbat.

186
00:09:14,320 --> 00:09:16,700
Butonul în sine, acest
meniul vertical nu sa schimbat.

187
00:09:16,700 --> 00:09:18,260
Dar informațiile nu sa schimbat.

188
00:09:18,260 --> 00:09:20,218
Și în funcție de modul
rapid miscari calculatorul meu,

189
00:09:20,218 --> 00:09:24,430
de fapt tu s-ar putea vedea că conținutul
dispare și apoi reapare într-adevăr

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

191
00:09:24,930 --> 00:09:27,320
Asta e conținutul fiind
elimină din infodiv,

192
00:09:27,320 --> 00:09:29,940
și apoi înlocuit cu un
nouă cerere asincron.

193
00:09:29,940 --> 00:09:34,410
>> Deci, dacă am trece să fie spus,
Rob-- și din nou, să ia o privire,

194
00:09:34,410 --> 00:09:38,379
și poate vom vedea de fapt
dispar și reapar rapid.

195
00:09:38,379 --> 00:09:38,920
Vezi asta?

196
00:09:38,920 --> 00:09:41,400
Cum mi-a venit doar departe,
și apoi reumplut?

197
00:09:41,400 --> 00:09:43,640
Asta e cererea AJAX
un fel de a lua loc.

198
00:09:43,640 --> 00:09:46,060
Și astfel, în funcție de
persoană aleg, eu sunt

199
00:09:46,060 --> 00:09:50,690
a face o asincron diferit
cerere unui alt fișier

200
00:09:50,690 --> 00:09:52,730
că am pe serverul meu.

201
00:09:52,730 --> 00:09:55,550
Și conținutul meu
infodiv sunt actualizarea,

202
00:09:55,550 --> 00:09:58,457
bazate pe care dintre acestea le-am ales.

203
00:09:58,457 --> 00:10:00,040
Așa că într-adevăr tot ce e de AJAX.

204
00:10:00,040 --> 00:10:04,090
Ea ne permite de a face aceste asincron
cereri, actualizări o pagină.

205
00:10:04,090 --> 00:10:06,450
Fără a fi nevoie să
refresh întreaga pagină,

206
00:10:06,450 --> 00:10:08,520
vom obține noi
conținut de la ea de a face

207
00:10:08,520 --> 00:10:11,170
o nouă cerere în stare proaspătă către server.

208
00:10:11,170 --> 00:10:13,420
Și astfel, paginile noastre pot deveni
destul de un pic mai dinamică.

209
00:10:13,420 --> 00:10:15,128
>> Și, după cum am obține mai mult
și mai avansate, tu

210
00:10:15,128 --> 00:10:17,700
s-ar putea obține lucruri, cum ar fi
să zicem, email-ul,

211
00:10:17,700 --> 00:10:19,850
în cazul în care nu trebuie să faci nimic.

212
00:10:19,850 --> 00:10:22,560
Nu trebuie să faceți clic pe un
meniul vertical sau faceți clic pe nimic,

213
00:10:22,560 --> 00:10:25,920
și dintr-o dată, cele mai noi tău
e-mail apare în partea de sus.

214
00:10:25,920 --> 00:10:27,840
Asta e, de asemenea, doar o cerere de Ajax.

215
00:10:27,840 --> 00:10:30,460
Ajax solicită ta
server, serverul de e-mail,

216
00:10:30,460 --> 00:10:33,360
pentru a trimite peste toate informațiile
despre cele mai recente e-mailuri,

217
00:10:33,360 --> 00:10:38,110
și schimbarea ce vedeți pe
ecran pentru a fi cele mai noi setul de e-mailuri.

218
00:10:38,110 --> 00:10:41,080
Și dacă aveți un nou
acolo, atunci conținutul care div

219
00:10:41,080 --> 00:10:44,580
se va schimba pentru a reflecta
conținutul actualizat.

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

221
00:10:45,480 --> 00:10:47,500
Acest lucru este CS50.

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