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

2
00:00:00,500 --> 00:00:04,810
[REPRODUCCIÓ DE MÚSICA]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Així que un més
tipus de noció que

4
00:00:06,940 --> 00:00:12,120
tipus de caigudes sota el paraigua de
JavaScript és una cosa que es diu AJAX.

5
00:00:12,120 --> 00:00:15,310
Fins a aquest punt, la nostra
interacció amb JavaScript

6
00:00:15,310 --> 00:00:17,727
s'ha limitat a empènyer una
botó i alguna cosa passa.

7
00:00:17,727 --> 00:00:19,560
I concretament, la
cosa que passa

8
00:00:19,560 --> 00:00:22,950
és dels llocs veuen i se senten els canvis.

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

10
00:00:23,450 --> 00:00:26,540
Igual que en particular, en el
document de model d'objectes de vídeo,

11
00:00:26,540 --> 00:00:29,060
He canviat el color de fons.

12
00:00:29,060 --> 00:00:33,240
Però quan ho vaig fer, jo no tenia
fer alguna petició especial.

13
00:00:33,240 --> 00:00:36,800
Jo no he de demanar que
el servidor m'envia una nova pàgina.

14
00:00:36,800 --> 00:00:39,620
Acabo de canviar el que ja tenia.

15
00:00:39,620 --> 00:00:42,245
Jo no he de recarregar la meva pàgina,
i les coses van canviar definitivament,

16
00:00:42,245 --> 00:00:43,760
així que això és genial.

17
00:00:43,760 --> 00:00:48,400
Però definitivament hi ha alguns
la interacció de l'usuari Manual involucrat.

18
00:00:48,400 --> 00:00:53,140
AJAX és una tècnica fresca que permet
amb nosaltres per modificar el contingut d'una pàgina,

19
00:00:53,140 --> 00:00:55,750
i no només l'aspecte i
sentir, sense recarregar.

20
00:00:55,750 --> 00:00:58,610
>> I per específicament quan
dir l'actualització de contingut d'una pàgina,

21
00:00:58,610 --> 00:01:01,990
No estic dient que reescrivim
la pàgina utilitzant JavaScript.

22
00:01:01,990 --> 00:01:06,560
Estic dient que en realitat demanem
més informació des del servidor

23
00:01:06,560 --> 00:01:08,640
sense la nostra pàgina d'haver de recarregar.

24
00:01:08,640 --> 00:01:10,850
>> Ara aquest tipus d'una mica de
una tècnica més avançada

25
00:01:10,850 --> 00:01:11,950
que parlarem
sobre aquest vídeo.

26
00:01:11,950 --> 00:01:13,720
Tindrem una mica d'interacció.

27
00:01:13,720 --> 00:01:17,750
Però quan ho fem, jo ​​seré
fer peticions al servidor web.

28
00:01:17,750 --> 00:01:21,140
En aquest cas, només el que és
córrer el meu servidor web Apache.

29
00:01:21,140 --> 00:01:25,010
Vaig a estar fent addicional
peticions mentre estic visitant una pàgina web,

30
00:01:25,010 --> 00:01:26,890
però la meva pàgina no s'actualitzarà.

31
00:01:26,890 --> 00:01:30,000
>> És només va a
actualitzar de forma asíncrona meva pàgina.

32
00:01:30,000 --> 00:01:31,840
I això és, de fet,
AJAX que significa,

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

34
00:01:35,400 --> 00:01:37,910
XML és un altre tipus de marques
idioma, i es pot ordenar de

35
00:01:37,910 --> 00:01:39,680
pensar en ell com HTML.

36
00:01:39,680 --> 00:01:42,990
No és exactament el mateix, però
és bàsicament un llenguatge de marques.

37
00:01:42,990 --> 00:01:47,770
Així que és un asíncron
JavaScript i un llenguatge de marques.

38
00:01:47,770 --> 00:01:50,590
>> Així que per tal d'utilitzar aquest
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
no és un llenguatge de programació independent.

40
00:01:52,230 --> 00:01:55,300
És només una mena de
conjunt de techniques-- ens

41
00:01:55,300 --> 00:01:57,870
necessitarà crear un especial
Objecte JavaScript, el que

42
00:01:57,870 --> 00:02:00,689
s'anomena XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Ara, és molt fàcil de fer això.

44
00:02:01,980 --> 00:02:04,550
Ens limitem a dir var, qualsevol que sigui
volem cridar a aquest objecte,

45
00:02:04,550 --> 00:02:07,030
és igual a nou XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
I ara que ja hem obtingut
una mena d'AJAX d'objecte,

47
00:02:11,050 --> 00:02:14,370
o XMLHttpRequest
objecte, el que permetrà

48
00:02:14,370 --> 00:02:18,360
amb nosaltres per modificar de forma asíncrona nostra pàgina.

49
00:02:18,360 --> 00:02:23,100
>> Després d'haver aconseguit aquest nou
objecte, aquest XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
hem de fer alguna cosa per a la seva
comportament onreadystatechange.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
comportament és realment només

52
00:02:30,360 --> 00:02:34,080
quan vostè fa una petició
a una pàgina web, la pàgina

53
00:02:34,080 --> 00:02:35,880
passa a través d'una sèrie de passos.

54
00:02:35,880 --> 00:02:37,370
En primer lloc, una petició no ha estat enviat.

55
00:02:37,370 --> 00:02:39,860
Després, la sol·licitud ha estat
enviat, però no actuar en conseqüència.

56
00:02:39,860 --> 00:02:41,580
A continuació, la sol·licitud ha estat actuar en conseqüència.

57
00:02:41,580 --> 00:02:43,680
Llavors la petició és
de ser enviat de nou a vostè.

58
00:02:43,680 --> 00:02:46,930
>> Llavors, la sol·licitud es
totalment carregada a la seva pàgina.

59
00:02:46,930 --> 00:02:48,640
Aquests són els diferents estats.

60
00:02:48,640 --> 00:02:53,890
I així hem de fixar la nostra
nou objecte XMLHttpRequest

61
00:02:53,890 --> 00:02:58,740
canviar quan canvia l'estat Llista.

62
00:02:58,740 --> 00:03:01,925
I en general, ho fem per
definir una funció anònima, que

63
00:03:01,925 --> 00:03:04,490
estem familiaritzats amb d'
JavaScript ara, que

64
00:03:04,490 --> 00:03:09,840
es diu quan canvia l'estat Llista.

65
00:03:09,840 --> 00:03:11,340
En realitat no és molt més que això.

66
00:03:11,340 --> 00:03:14,340
Només anem a definir una
funció anònima, alguna cosa així com el que

67
00:03:14,340 --> 00:03:16,440
que estàvem fent en
JavaScript, on ens faria

68
00:03:16,440 --> 00:03:18,750
tenen una funció anònima
respondre a una de clic,

69
00:03:18,750 --> 00:03:23,230
o quan estàvem fent un mapa de
els diversos objectes en una matriu.

70
00:03:23,230 --> 00:03:25,220
>> Alguna cosa va passar quan
alguna cosa s'ha fet clic.

71
00:03:25,220 --> 00:03:28,810
En aquest cas, és només una cosa és
succeeix quan l'estat de la nostra pàgina

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

73
00:03:30,160 --> 00:03:32,730
Hi ha altres dues propietats
que són una espècie de-- no ho són

74
00:03:32,730 --> 00:03:35,524
les úniques propietats que són
inherent a XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
però són els prou importants.

76
00:03:36,940 --> 00:03:39,815
Hi ha alguna cosa que es diu readyState,
que com es pot endevinar,

77
00:03:39,815 --> 00:03:41,750
està relacionat amb onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
En realitat, li diu
el que el readyState és.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, i 4 són
les possibilitats allà,

80
00:03:46,289 --> 00:03:48,080
i quin tipus de més o menys
corresponen al que

81
00:03:48,080 --> 00:03:50,030
Estava parlant fa aproximadament un segon.

82
00:03:50,030 --> 00:03:53,100
>> I llavors d'estat, que
espero que si tot ha anat bé,

83
00:03:53,100 --> 00:03:56,710
és 200, que és l'abreviatura
per, per descomptat, està bé,

84
00:03:56,710 --> 00:03:58,330
que estem familiaritzats amb http.

85
00:03:58,330 --> 00:04:03,735
Així que estem esperant que el nostre estat a punt
és de quatre, i el nostre estat és 200.

86
00:04:03,735 --> 00:04:07,940
I si el nostre estat a punt
és de quatre, i la resposta

87
00:04:07,940 --> 00:04:11,490
ja es podrà posat sobre la
pàgina, i l'estat és de 200,

88
00:04:11,490 --> 00:04:13,580
hem estat capaços de fer
tot amb èxit,

89
00:04:13,580 --> 00:04:17,209
ara podem asíncrona
actualitzar la nostra pàgina

90
00:04:17,209 --> 00:04:21,730
sense haver de recarregar
tot el contingut de la mateixa.

91
00:04:21,730 --> 00:04:27,710
>> Després hem definit el que succeeix
al comportament onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
i hem comprovat que readyState
és 4 i l'estat és de 200,

93
00:04:31,020 --> 00:04:33,900
llavors tot el que hem de fer és
obrir una asíncrona

94
00:04:33,900 --> 00:04:38,530
sol·licitud, que s'acaba de fer
1 HTTP GET general petició.

95
00:04:38,530 --> 00:04:41,950
Només fer-ho mitjançant programació,
en lloc de a través del nostre navegador web.

96
00:04:41,950 --> 00:04:43,786
I llavors vam enviar aquesta sol·licitud.

97
00:04:43,786 --> 00:04:45,660
Llavors, què fa això potser
assemblar-se en el seu context?

98
00:04:45,660 --> 00:04:49,790
Així que aquí hi ha una funció que
s'ocupa de les peticions AJAX.

99
00:04:49,790 --> 00:04:50,290
D'ACORD?

100
00:04:50,290 --> 00:04:52,430
I jo he dit de manera arbitrària
accepta un argument.

101
00:04:52,430 --> 00:04:55,550
I això una mena de
esquelet en general aquí.

102
00:04:55,550 --> 00:05:00,890
Al començament, obtenim
nosaltres mateixos un nou objecte XMLHttpRequest.

103
00:05:00,890 --> 00:05:03,830
Llavors, he de establir el
comportament onreadystatechange.

104
00:05:03,830 --> 00:05:06,970
I pel que vaig a dir
quan els canvis readyState,

105
00:05:06,970 --> 00:05:10,110
Vull que crida a aquesta funció.

106
00:05:10,110 --> 00:05:12,570
>> Què va a demanar a la
pregunta, si el readyState

107
00:05:12,570 --> 00:05:17,240
és 4, si el readyState ha canviat
a ser 4, i l'estat era 200,

108
00:05:17,240 --> 00:05:20,799
així que vam tenir una sol·licitud reeixida, em
voler fer alguna cosa a la pàgina.

109
00:05:20,799 --> 00:05:22,590
I anem a fer una ullada
un exemple del que

110
00:05:22,590 --> 00:05:25,010
que alguna cosa podria estar en un segon.

111
00:05:25,010 --> 00:05:27,830
Així que, ara que he definit
la meva funció anònima,

112
00:05:27,830 --> 00:05:31,340
la meva funció de resposta de sempre
els canvis readyState.

113
00:05:31,340 --> 00:05:37,120
>> Així que només cal obrir un
sol·licitar, mitjançant el mètode Open.

114
00:05:37,120 --> 00:05:39,160
I després, li envio la sol·licitud.

115
00:05:39,160 --> 00:05:41,980
I anem a fer una ullada a
un exemple més concret

116
00:05:41,980 --> 00:05:46,290
del que AJAX pot fer en les nostres pàgines web.

117
00:05:46,290 --> 00:05:49,740
Així que tinc aquí una molt simple
Pàgina diu home.html.

118
00:05:49,740 --> 00:05:53,620
I tinc una informació va
aquí i una mena de menú desplegable.

119
00:05:53,620 --> 00:05:55,390
>> I anem a tornar a aquest en un segon.

120
00:05:55,390 --> 00:05:59,150
Però crec que ara hem de prendre una
mirar el codi font real.

121
00:05:59,150 --> 00:06:01,080
I així, vaig a obrir home.html.

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

123
00:06:03,490 --> 00:06:04,740
I anem a veure el que està passant.

124
00:06:04,740 --> 00:06:08,240
Així que fins al capdamunt aquí, tinc
algunes coses de JavaScript que està passant.

125
00:06:08,240 --> 00:06:12,470
>> I aquí, pel que sembla tinc
un div el ID és infodiv,

126
00:06:12,470 --> 00:06:15,290
i alguna informació
va a anar-hi.

127
00:06:15,290 --> 00:06:16,374
I després tinc aquest formulari.

128
00:06:16,374 --> 00:06:18,081
I dins d'aquest
forma, tinc alguna cosa

129
00:06:18,081 --> 00:06:20,200
anomenat Select, que
és només un menú desplegable

130
00:06:20,200 --> 00:06:22,150
amb un munt d'opcions diferents.

131
00:06:22,150 --> 00:06:26,150
I pel que sembla, quan això canvia, quan
l'opció que s'ha seleccionat té

132
00:06:26,150 --> 00:06:30,600
canviat, vaig a trucar a
alguna funció cs50Info,

133
00:06:30,600 --> 00:06:33,190
i després em vaig a
Va esdevenir en this.value,

134
00:06:33,190 --> 00:06:35,740
on això es refereix a
quina opció va ser seleccionada,

135
00:06:35,740 --> 00:06:39,820
i el valor és un d'ells aquí, l'opció
valor = iguals buit ", Blumberg,"

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

137
00:06:42,610 --> 00:06:45,090
>> Llavors, què podria realitat
passar aquí quan faig això?

138
00:06:45,090 --> 00:06:48,800
Bé, anem a fer una
mira blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Sembla que és només un
fragment d'alguna cosa d'HTML.

141
00:06:53,924 --> 00:06:56,090
I de fet, ho estic esperant
que passarà aquí

142
00:06:56,090 --> 00:07:00,020
és que em vaig a ser capaç de connectar
Aquest HTML directament a la pàgina web

143
00:07:00,020 --> 00:07:02,970
sense haver de recarregar
a la pàgina, de manera que quan

144
00:07:02,970 --> 00:07:07,510
Trio Hannah des del desplegable
menú, informació sobre Hannah,

145
00:07:07,510 --> 00:07:11,100
En particular, aquesta informació
aquí a blumberg.html,

146
00:07:11,100 --> 00:07:12,574
és el que apareix a la pàgina.

147
00:07:12,574 --> 00:07:13,740
I jo no he de refrescar.

148
00:07:13,740 --> 00:07:16,842
I si jo em poso a algú més,
la seva informació es presentava.

149
00:07:16,842 --> 00:07:17,550
Com puc fer això?

150
00:07:17,550 --> 00:07:20,290
Un cop més, això requereix
que usem alguns AJAX.

151
00:07:20,290 --> 00:07:22,540
I així, ens obrim ajax.js.

152
00:07:22,540 --> 00:07:25,550
I aquí és aquesta funció, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Si el nom no és res, que jo torni.

154
00:07:27,410 --> 00:07:31,450
Jo no faré res si
l'opció de buit ha estat elegit.

155
00:07:31,450 --> 00:07:35,420
Altrament, vaig a
crear un nou XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
I llavors jo vaig a dir, quan el
canvis readyState, criden a aquesta funció.

157
00:07:39,020 --> 00:07:43,630
>> I si el readyState és
4 i l'estat és 200,

158
00:07:43,630 --> 00:07:45,740
aquí està una mica
de jQuery en la línia 13.

159
00:07:45,740 --> 00:07:50,450
Però tot el que estic fent és a dir,
canviar el contingut de infodiv

160
00:07:50,450 --> 00:07:57,820
per ser el vaig tornar com
resposta de la meva HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Quin és el meu HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Bé, això és correcte
aquí a la línia 18 i 19.

163
00:08:02,020 --> 00:08:08,550
Línia 18, estic bàsicament preparar
una petició GET per al nom + .html.

164
00:08:08,550 --> 00:08:11,170
I de nou, el nom que aquí és
l'argument que era

165
00:08:11,170 --> 00:08:14,280
passat com un paràmetre per cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Així que, bàsicament, estic passant en algú de
nom, que era el conjunt d'opcions

167
00:08:18,460 --> 00:08:22,980
que vam veure al
al menú desplegable en el formulari.

168
00:08:22,980 --> 00:08:24,450
M'estic posant aquest nom.

169
00:08:24,450 --> 00:08:29,530
I jo estic dient que t'agradaria
si us plau obtingui per a mi que file.html,

170
00:08:29,530 --> 00:08:31,020
i després enviar aquesta sol·licitud.

171
00:08:31,020 --> 00:08:34,820
>> I perquè onreadystatechange va
estar escoltant i esperant i esperant

172
00:08:34,820 --> 00:08:39,460
i esperant, fins que el readyState
és 4, i l'estat és de 200.

173
00:08:39,460 --> 00:08:44,970
Perquè estigui a punt per ser servit,
i la sol·licitud s'ha realitzat correctament.

174
00:08:44,970 --> 00:08:49,500
I després, si ho és, que va a
canviar el contingut de infodiv

175
00:08:49,500 --> 00:08:53,030
sent el text de resposta que em van donar l'esquena.

176
00:08:53,030 --> 00:08:54,930
>> Així que anem a veure com això
realment podria funcionar.

177
00:08:54,930 --> 00:08:58,860
Així que ens dirigim a la meva navegador
finestra, i anem a veure aquí.

178
00:08:58,860 --> 00:09:01,359
Així que donem una ullada a
¿Què està passant aquí a AJAX.

179
00:09:01,359 --> 00:09:03,400
Així que anem a triar a algú
al menú desplegable.

180
00:09:03,400 --> 00:09:06,079
Així que en aquest cas, anem a
acaba de triar Hannah.

181
00:09:06,079 --> 00:09:08,120
I fixeu-vos que Hannah
informació ha canviat,

182
00:09:08,120 --> 00:09:11,030
però jo no tenia el meu any--
pàgina no enterament recarregar.

183
00:09:11,030 --> 00:09:12,190
Les coses es va quedar.

184
00:09:12,190 --> 00:09:13,320
La majoria de les coses es van quedar.

185
00:09:13,320 --> 00:09:14,320
Prova AJAX no va canviar.

186
00:09:14,320 --> 00:09:16,700
El botó de si mateix, aquest
menú desplegable no va canviar.

187
00:09:16,700 --> 00:09:18,260
Però la informació no va fer el canvi.

188
00:09:18,260 --> 00:09:20,218
I depenent de com
ràpidament el meu ordinador es mou,

189
00:09:20,218 --> 00:09:24,430
en realitat es pot veure que el contingut
desapareix i després reapareix realment

190
00:09:24,430 --> 00:09:24,930
ràpidament.

191
00:09:24,930 --> 00:09:27,320
Aquest és el contingut de ser
esborrat de infodiv,

192
00:09:27,320 --> 00:09:29,940
i després reemplaçat amb una
nova sol·licitud asíncrona.

193
00:09:29,940 --> 00:09:34,410
>> Així que si em canvi a ser dir,
Rob-- i una altra, mirin,

194
00:09:34,410 --> 00:09:38,379
i potser anem a veure el que realment
desaparèixer i reaparèixer ràpidament.

195
00:09:38,379 --> 00:09:38,920
Vostè veu això?

196
00:09:38,920 --> 00:09:41,400
Com acaba de fer esclatar de distància,
i després es va tornar a omplir?

197
00:09:41,400 --> 00:09:43,640
Aquesta és la petició AJAX
tipus de produir-se.

198
00:09:43,640 --> 00:09:46,060
I així, en funció de la
persona trio, jo sóc

199
00:09:46,060 --> 00:09:50,690
fer una asíncron diferent
sol·licitud a un fitxer diferent

200
00:09:50,690 --> 00:09:52,730
que tinc al meu servidor.

201
00:09:52,730 --> 00:09:55,550
I el contingut del meu
infodiv estan actualitzant,

202
00:09:55,550 --> 00:09:58,457
basat en quin d'aquests que he triat.

203
00:09:58,457 --> 00:10:00,040
Així que això és realment tot el que cal AJAX.

204
00:10:00,040 --> 00:10:04,090
Se'ns permet fer aquestes asíncron
peticions, canvis a una pàgina.

205
00:10:04,090 --> 00:10:06,450
Sense haver de
actualitzar la pàgina sencera,

206
00:10:06,450 --> 00:10:08,520
anem a obtenir nova
contingut de la informació fent

207
00:10:08,520 --> 00:10:11,170
una nova nova sol·licitud al servidor.

208
00:10:11,170 --> 00:10:13,420
I per això, les nostres pàgines poden arribar a ser
una mica més dinàmic.

209
00:10:13,420 --> 00:10:15,128
>> I a mesura que més
i més avançat,

210
00:10:15,128 --> 00:10:17,700
podria fer les coses com
per exemple, la safata d'entrada de correu electrònic,

211
00:10:17,700 --> 00:10:19,850
en el qual no has de fer res.

212
00:10:19,850 --> 00:10:22,560
No ha de fer clic en un
menú desplegable o feu clic a qualsevol cosa,

213
00:10:22,560 --> 00:10:25,920
i, de sobte, la seva més recent
correu electrònic apareix a la part superior.

214
00:10:25,920 --> 00:10:27,840
Això també és només una petició Ajax.

215
00:10:27,840 --> 00:10:30,460
Ajax està sol·licitant el seu
servidor, el servidor de correu electrònic,

216
00:10:30,460 --> 00:10:33,360
per enviar a través de tota la informació
sobre els seus últims correus electrònics,

217
00:10:33,360 --> 00:10:38,110
i el canvi del que es veu a la
pantalla per ser el seu joc més recent de missatges de correu electrònic.

218
00:10:38,110 --> 00:10:41,080
I si vostè té una nova en
allà, llavors el contingut d'aquest div

219
00:10:41,080 --> 00:10:44,580
canviarà per reflectir
el contingut actualitzat.

220
00:10:44,580 --> 00:10:45,480
Sóc Doug Lloyd.

221
00:10:45,480 --> 00:10:47,500
Això és CS50.

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