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

2
00:00:00,500 --> 00:00:04,810
[Música tocando]

3
00:00:04,810 --> 00:00:06,940
>> Doug LLOYD: Entón unha
tipo de noción de que

4
00:00:06,940 --> 00:00:12,120
tipo de cae por iniciativa da
JavaScript é unha cousa chamada AJAX.

5
00:00:12,120 --> 00:00:15,310
Ata este punto, a nosa
interacción con JavaScript

6
00:00:15,310 --> 00:00:17,727
foi limitada a empurrar un
botón e algo acontece.

7
00:00:17,727 --> 00:00:19,560
E especialmente, o
algo que pasa

8
00:00:19,560 --> 00:00:22,950
Son os nosos sitios ollar e sentir os cambios.

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

10
00:00:23,450 --> 00:00:26,540
Como, en particular, no
documento de vídeo modelo de obxecto,

11
00:00:26,540 --> 00:00:29,060
Eu mudei a cor de fondo.

12
00:00:29,060 --> 00:00:33,240
Pero cando eu fixen iso, eu non teño
facer os solicitudes extras especiais.

13
00:00:33,240 --> 00:00:36,800
Non teño que pedir que
servidor enviar-me unha nova páxina.

14
00:00:36,800 --> 00:00:39,620
Só mudei o que eu xa tiña.

15
00:00:39,620 --> 00:00:42,245
Non teño que actualizar miña páxina,
e as cousas sempre cambiou,

16
00:00:42,245 --> 00:00:43,760
entón iso é gran.

17
00:00:43,760 --> 00:00:48,400
Pero hai sempre algúns
interacción do usuario manual implicado.

18
00:00:48,400 --> 00:00:53,140
AJAX é unha técnica legal que permite
nós para actualizar o contido dunha páxina,

19
00:00:53,140 --> 00:00:55,750
e non só o aspecto e
sentir, sen recargar.

20
00:00:55,750 --> 00:00:58,610
>> E por especificamente cando
dicir actualizar o contido dunha páxina,

21
00:00:58,610 --> 00:01:01,990
Eu non estou dicindo que reescribir
a páxina usando JavaScript.

22
00:01:01,990 --> 00:01:06,560
Eu digo que, en realidade, solicitar
máis información desde o servidor

23
00:01:06,560 --> 00:01:08,640
sen a nosa páxina de ter que volver cargar.

24
00:01:08,640 --> 00:01:10,850
>> Agora que tipo de un pouco de
unha técnica máis avanzada

25
00:01:10,850 --> 00:01:11,950
que imos falar
sobre este vídeo.

26
00:01:11,950 --> 00:01:13,720
Nós imos ter algunha interacción.

27
00:01:13,720 --> 00:01:17,750
Pero cando o facemos, eu vou ser
facer peticións ao servidor web.

28
00:01:17,750 --> 00:01:21,140
Neste caso, só o que está
correr o meu servidor web Apache.

29
00:01:21,140 --> 00:01:25,010
Eu vou estar facendo adicional
solicitudes mentres eu estou visitando unha páxina web,

30
00:01:25,010 --> 00:01:26,890
pero a miña páxina non será actualizada.

31
00:01:26,890 --> 00:01:30,000
>> El só vai
de forma asíncrona actualizar miña páxina.

32
00:01:30,000 --> 00:01:31,840
E iso é, de feito,
AJAX que representa,

33
00:01:31,840 --> 00:01:35,400
é asynchronous JavaScript e XML.

34
00:01:35,400 --> 00:01:37,910
XML é outro tipo de cita
linguaxe, e pode clasificar de

35
00:01:37,910 --> 00:01:39,680
pense nisto como HTML.

36
00:01:39,680 --> 00:01:42,990
Non é así o mesmo, pero
é basicamente unha linguaxe de reserva.

37
00:01:42,990 --> 00:01:47,770
Polo tanto, é un asíncrono
JavaScript e unha linguaxe de reserva.

38
00:01:47,770 --> 00:01:50,590
>> Polo tanto, a fin de utilizar este
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
non é unha linguaxe de programación separado.

40
00:01:52,230 --> 00:01:55,300
É só unha especie de
conxunto de techniques-- nós

41
00:01:55,300 --> 00:01:57,870
que crear un especial
Obxecto JavaScript, que

42
00:01:57,870 --> 00:02:00,689
chámase un XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Agora, é moi fácil de facer.

44
00:02:01,980 --> 00:02:04,550
Nós só dicir var, calquera que sexa
queremos chamar este obxecto,

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

46
00:02:07,030 --> 00:02:11,050
E agora nós xa obtido
un tipo de obxecto AJAX,

47
00:02:11,050 --> 00:02:14,370
ou un XMLHttpRequest
obxecto, o que permitirá

48
00:02:14,370 --> 00:02:18,360
nós para actualizar a páxina de xeito asíncrono.

49
00:02:18,360 --> 00:02:23,100
>> Despois de ter obtido esta nova
obxecto, este XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
temos que facer algo para o seu
comportamento onreadystatechange.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
comportamento é realmente só

52
00:02:30,360 --> 00:02:34,080
cando fai unha solicitude
para unha páxina web, a páxina

53
00:02:34,080 --> 00:02:35,880
pasa por unha serie de etapas.

54
00:02:35,880 --> 00:02:37,370
En primeiro lugar, unha proposta non se enviou.

55
00:02:37,370 --> 00:02:39,860
A continuación, a solicitude foi
enviado, pero non atendido.

56
00:02:39,860 --> 00:02:41,580
A continuación, a petición foi atendida.

57
00:02:41,580 --> 00:02:43,680
A continuación, a solicitude é
cargar de volta para ti.

58
00:02:43,680 --> 00:02:46,930
>> A continuación, a solicitude é
totalmente cargado na súa páxina.

59
00:02:46,930 --> 00:02:48,640
Estes son estados diferentes.

60
00:02:48,640 --> 00:02:53,890
E por iso necesitamos definir nosa
novo obxecto XMLHttpRequest

61
00:02:53,890 --> 00:02:58,740
para cambiar cando os cambios de estado de listo.

62
00:02:58,740 --> 00:03:01,925
E normalmente, facemos isto por
definición dunha función anónima, o que

63
00:03:01,925 --> 00:03:04,490
estamos familiarizados coa dende
JavaScript agora, que

64
00:03:04,490 --> 00:03:09,840
chámase cando os cambios de estado de listo.

65
00:03:09,840 --> 00:03:11,340
Non é realmente moito máis que iso.

66
00:03:11,340 --> 00:03:14,340
Nós só estamos indo a ser a definición dunha
función anónima, unha especie de gustar do que

67
00:03:14,340 --> 00:03:16,440
que estabamos facendo en
JavaScript, onde iríamos

68
00:03:16,440 --> 00:03:18,750
ten unha función anónima
responder a un click en,

69
00:03:18,750 --> 00:03:23,230
ou cando estabamos facendo un mapa de
os distintos obxectos nunha matriz.

70
00:03:23,230 --> 00:03:25,220
>> Algo aconteceu cando
algo foi premendo.

71
00:03:25,220 --> 00:03:28,810
Neste caso, é só algo que é
pasando cando o estado da nosa páxina

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

73
00:03:30,160 --> 00:03:32,730
Existen outras dúas propiedades
que son tipo de-- non son

74
00:03:32,730 --> 00:03:35,524
as únicas propiedades que son
inherente ao XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
pero son queridos bastante importantes.

76
00:03:36,940 --> 00:03:39,815
Hai algo chamado readyState,
que, como probablemente pode adiviñar,

77
00:03:39,815 --> 00:03:41,750
é relacionada coa OnReadyStateChange.

78
00:03:41,750 --> 00:03:44,250
De feito, dille
o que o readyState é.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, e 4 son
as posibilidades alí,

80
00:03:46,289 --> 00:03:48,080
e tipo de aproximadamente
corresponde ao que

81
00:03:48,080 --> 00:03:50,030
Eu só estaba a falar de un segundo atrás.

82
00:03:50,030 --> 00:03:53,100
>> E despois de estado, que
espero que se todo foi ben,

83
00:03:53,100 --> 00:03:56,710
é de 200, que é curto
para, por suposto, OK,

84
00:03:56,710 --> 00:03:58,330
que estamos familiarizados coa partir Http.

85
00:03:58,330 --> 00:04:03,735
Entón, nós estamos esperando que o noso estado de prontidão
é catro, eo noso estado é de 200.

86
00:04:03,735 --> 00:04:07,940
E se o noso estado de prontidão
é de catro, ea resposta

87
00:04:07,940 --> 00:04:11,490
Está preparado para ser colocadas no
páxina, eo estado é 200,

88
00:04:11,490 --> 00:04:13,580
fomos capaces de facer
todo con éxito,

89
00:04:13,580 --> 00:04:17,209
agora podemos de forma asíncrona
actualizar a páxina

90
00:04:17,209 --> 00:04:21,730
sen ter que recargar
todo o contido do mesmo.

91
00:04:21,730 --> 00:04:27,710
>> Despois de termos definido o que pasa
para o comportamento onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
e temos comprobado que readyState
é 4 eo estado é de 200,

93
00:04:31,020 --> 00:04:33,900
entón todo o que necesitamos facer é
abrir un asíncrono

94
00:04:33,900 --> 00:04:38,530
solicitude, que non é máis que facer
un HTTP GET solicitude xeral.

95
00:04:38,530 --> 00:04:41,950
Basta facelo a través de programación,
en vez de a través do noso navegador web.

96
00:04:41,950 --> 00:04:43,786
E, despois, enviar esta proposta.

97
00:04:43,786 --> 00:04:45,660
Entón, o que fai posible que
parecer no contexto?

98
00:04:45,660 --> 00:04:49,790
Entón aquí está unha función que
trata sobre solicitudes de AJAX.

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

100
00:04:50,290 --> 00:04:52,430
E eu dixen arbitrariamente
el acepta un argumento.

101
00:04:52,430 --> 00:04:55,550
E esta unha especie de
esqueleto xeral aquí.

102
00:04:55,550 --> 00:05:00,890
En principio, estivemos
nós mesmos un novo obxecto XMLHttpRequest.

103
00:05:00,890 --> 00:05:03,830
Entón, eu teño que o
comportamento onreadystatechange.

104
00:05:03,830 --> 00:05:06,970
E así eu vou dicir
cando os cambios ReadyState,

105
00:05:06,970 --> 00:05:10,110
Quero que chamar esa función.

106
00:05:10,110 --> 00:05:12,570
>> Que vai pedir ao
pregunta, se o readyState

107
00:05:12,570 --> 00:05:17,240
4 é, se o readyState cambiou
ser 4, eo estado era de 200,

108
00:05:17,240 --> 00:05:20,799
por iso, tivemos unha solicitude exitoso, I
quero facer algo para a páxina.

109
00:05:20,799 --> 00:05:22,590
E nós imos dar un ollo
nun exemplo do que

110
00:05:22,590 --> 00:05:25,010
que algo pode estar nun segundo.

111
00:05:25,010 --> 00:05:27,830
Así, pois, agora teño definido
miña función anónima,

112
00:05:27,830 --> 00:05:31,340
miña función de resposta cada vez que
os cambios ReadyState.

113
00:05:31,340 --> 00:05:37,120
>> Entón eu só precisa abrir unha
solicitar, mediante o método Open.

114
00:05:37,120 --> 00:05:39,160
E entón, eu enviar esta proposta.

115
00:05:39,160 --> 00:05:41,980
E imos dar un ollo
un exemplo máis concreto

116
00:05:41,980 --> 00:05:46,290
AJAX que pode facer nas nosas páxinas web.

117
00:05:46,290 --> 00:05:49,740
Entón, eu teño aquí unha forma moi simple
páxina chamada home.html.

118
00:05:49,740 --> 00:05:53,620
E eu teño unha información vai
aquí e algún tipo de menú desplegable.

119
00:05:53,620 --> 00:05:55,390
>> E nós imos revisar iso nun segundo.

120
00:05:55,390 --> 00:05:59,150
Pero creo que agora debe ter un
mirar o código fonte real.

121
00:05:59,150 --> 00:06:01,080
E así, eu vou abrir home.html.

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

123
00:06:03,490 --> 00:06:04,740
E imos ver o que está a suceder.

124
00:06:04,740 --> 00:06:08,240
Así, se na parte superior aquí, teño
algunhas cousas JavaScript que está pasando.

125
00:06:08,240 --> 00:06:12,470
>> E aquí, eu parecer teñen
unha div cuxa ID é infodiv,

126
00:06:12,470 --> 00:06:15,290
e unha información
está a ir máis alá.

127
00:06:15,290 --> 00:06:16,374
E entón eu teño este formulario.

128
00:06:16,374 --> 00:06:18,081
E dentro deste
caso, eu teño algo

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

130
00:06:20,200 --> 00:06:22,150
con unha morea de opcións distintas.

131
00:06:22,150 --> 00:06:26,150
E, ao parecer, cando iso non cambiar, cando
a opción que foi seleccionada ten

132
00:06:26,150 --> 00:06:30,600
cambiado, eu vou chamar
algunha función cs50Info,

133
00:06:30,600 --> 00:06:33,190
e entón eu vou
pasar this.value,

134
00:06:33,190 --> 00:06:35,740
onde este refírese a
cal opción foi seleccionada,

135
00:06:35,740 --> 00:06:39,820
e valor é unha desas aquí, a opción
value = coincide baleiro ", Blumberg,"

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

137
00:06:42,610 --> 00:06:45,090
>> Entón, o que realmente pode
pasar aquí cando fago iso?

138
00:06:45,090 --> 00:06:48,800
Ben, imos dar un
mirar para blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Parece que non é máis que un
tramo duns Html.

141
00:06:53,924 --> 00:06:56,090
E, de feito, o que eu estou esperando
que vai pasar aquí

142
00:06:56,090 --> 00:07:00,020
é que eu vou ser capaz de conectar
Este HTML directamente na miña páxina web

143
00:07:00,020 --> 00:07:02,970
sen ter que recargar
o principal, de tal xeito que cando

144
00:07:02,970 --> 00:07:07,510
Eu escollo Hannah do desplegable
menús, información sobre Hannah,

145
00:07:07,510 --> 00:07:11,100
En particular, esta información
aquí en blumberg.html,

146
00:07:11,100 --> 00:07:12,574
é o que aparece na páxina.

147
00:07:12,574 --> 00:07:13,740
E eu non teño para actualizar.

148
00:07:13,740 --> 00:07:16,842
E se eu escollese outra persoa,
información ía aparecer.

149
00:07:16,842 --> 00:07:17,550
Como podo facer iso?

150
00:07:17,550 --> 00:07:20,290
Unha vez máis, iso esixe
nos usar algún AJAX.

151
00:07:20,290 --> 00:07:22,540
E así, imos abrir ajax.js.

152
00:07:22,540 --> 00:07:25,550
E aquí é que a función, cs50Info.

153
00:07:25,550 --> 00:07:27,410
O nome non é nada, eu volver.

154
00:07:27,410 --> 00:07:31,450
Non vou facer nada se
a opción escollida foi baleiro.

155
00:07:31,450 --> 00:07:35,420
Se non, eu vou
crear un novo XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
E entón eu vou dicir, cando o
cambios ReadyState, chamar esa función.

157
00:07:39,020 --> 00:07:43,630
>> E se o readyState é
4 eo estado é de 200,

158
00:07:43,630 --> 00:07:45,740
aquí está un pouco
do jQuery na liña 13.

159
00:07:45,740 --> 00:07:50,450
Pero todo o que eu estou facendo está dicindo:
cambiar o contido da infodiv

160
00:07:50,450 --> 00:07:57,820
para ser o que eu volvín como un
resposta da miña HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Cal é a miña HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Ben, iso é certo
aquí na liña 18 e 19.

163
00:08:02,020 --> 00:08:08,550
Liña 18, eu estou basicamente preparación
Comezar unha solicitude de nome + .html.

164
00:08:08,550 --> 00:08:11,170
E unha vez máis, o nome aquí é
argumento de que era

165
00:08:11,170 --> 00:08:14,280
pasado como un parámetro para cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Entón, basicamente, eu estou pasando en alguén do
nome, que foi ese conxunto de opcións

167
00:08:18,460 --> 00:08:22,980
que vimos no
desplegable menú no formulario.

168
00:08:22,980 --> 00:08:24,450
Estou recibindo este nome.

169
00:08:24,450 --> 00:08:29,530
E eu digo que me gustaría que
por favor, alcanzádeme me que file.html,

170
00:08:29,530 --> 00:08:31,020
e, a continuación, enviar esta proposta.

171
00:08:31,020 --> 00:08:34,820
>> E así que vai onreadystatechange
estar escoitando e esperando e esperando

172
00:08:34,820 --> 00:08:39,460
e en espera, ata que o readyState
é 4, eo estado é de 200.

173
00:08:39,460 --> 00:08:44,970
Entón, está listo para ser servido,
ea solicitude foi exitosa.

174
00:08:44,970 --> 00:08:49,500
E, a continuación, de ser, que vai
cambiar o contido da infodiv

175
00:08:49,500 --> 00:08:53,030
para ser o texto de resposta que recibín de volta.

176
00:08:53,030 --> 00:08:54,930
>> Entón, imos ver como iso
realmente funcionar.

177
00:08:54,930 --> 00:08:58,860
Entón, imos cabeza para o meu navegador
fiestra, e veremos aquí.

178
00:08:58,860 --> 00:09:01,359
Entón, imos dar un ollo
o que está a suceder aquí en AJAX.

179
00:09:01,359 --> 00:09:03,400
Entón, nós imos escoller alguén
desde o menú desplegable.

180
00:09:03,400 --> 00:09:06,079
Polo tanto, neste caso, imos
basta escoller Hannah.

181
00:09:06,079 --> 00:09:08,120
E noten que Hannah de
información cambiou,

182
00:09:08,120 --> 00:09:11,030
pero eu non tiven o meu any--
A páxina non enteiramente actualizar.

183
00:09:11,030 --> 00:09:12,190
As cousas quedaron.

184
00:09:12,190 --> 00:09:13,320
A maioría das cousas quedaron.

185
00:09:13,320 --> 00:09:14,320
AJAX Proba non se alterou.

186
00:09:14,320 --> 00:09:16,700
O propio botón, este
desplegable menú non cambiou.

187
00:09:16,700 --> 00:09:18,260
Pero a información non se alterou.

188
00:09:18,260 --> 00:09:20,218
E dependendo de quão
rapidamente meus movementos de ordenador,

189
00:09:20,218 --> 00:09:24,430
realmente pode ver que o contido
desaparece e despois reaparece realmente

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

191
00:09:24,930 --> 00:09:27,320
Ese é o contido a ser
excluída do infodiv,

192
00:09:27,320 --> 00:09:29,940
e, a continuación, substituído cun
nova solicitude asíncrono.

193
00:09:29,940 --> 00:09:34,410
>> Entón, se eu mudalo para ser dicir,
Rob-- e unha vez máis, un ollo,

194
00:09:34,410 --> 00:09:38,379
e quizais nós imos velo realmente
desaparecen e reaparecen rapidamente.

195
00:09:38,379 --> 00:09:38,920
Ve iso?

196
00:09:38,920 --> 00:09:41,400
Como el só bateu para lonxe,
e, a continuación, volver a encher?

197
00:09:41,400 --> 00:09:43,640
Ese é a solicitude de AJAX
tipo de produciron.

198
00:09:43,640 --> 00:09:46,060
E así, dependendo da
persoa que eu escoller, eu son

199
00:09:46,060 --> 00:09:50,690
facendo unha asíncrono diferente
solicitude para un ficheiro diferente

200
00:09:50,690 --> 00:09:52,730
que eu teño no meu servidor.

201
00:09:52,730 --> 00:09:55,550
E o contido da miña
infodiv está a actualizar,

202
00:09:55,550 --> 00:09:58,457
a base do cal delas escollín.

203
00:09:58,457 --> 00:10:00,040
Entón iso é realmente todo o que hai para AJAX.

204
00:10:00,040 --> 00:10:04,090
El nos permite facer estas asíncrono
solicitudes, actualizacións a unha páxina.

205
00:10:04,090 --> 00:10:06,450
Sen ter que
actualizar a páxina enteira,

206
00:10:06,450 --> 00:10:08,520
nós estamos indo a obter novo
contido a partir del, facendo

207
00:10:08,520 --> 00:10:11,170
un novo nova petición ao servidor.

208
00:10:11,170 --> 00:10:13,420
E así, as nosas páxinas poden chegar a ser
un pouco máis dinámico.

209
00:10:13,420 --> 00:10:15,128
>> E como nós comezamos máis
e máis avanzado, vostede

210
00:10:15,128 --> 00:10:17,700
pode facer as cousas como
digamos, a súa caixa de entrada de correo electrónico,

211
00:10:17,700 --> 00:10:19,850
onde non ten que facer nada.

212
00:10:19,850 --> 00:10:22,560
Non ten que facer clic nun
desplegable menú ou premer en nada,

213
00:10:22,560 --> 00:10:25,920
e, de súpeto, o seu máis novo
correo electrónico aparece na parte superior.

214
00:10:25,920 --> 00:10:27,840
Isto tamén é só unha solicitude do Ajax.

215
00:10:27,840 --> 00:10:30,460
Ajax está solicitando o seu
servidor, servidor de correo electrónico,

216
00:10:30,460 --> 00:10:33,360
para enviar máis de toda a información
sobre os seus últimos correos electrónicos,

217
00:10:33,360 --> 00:10:38,110
e cambiar o que ves na
pantalla para ser o seu último conxunto de correos electrónicos.

218
00:10:38,110 --> 00:10:41,080
E se ten un novo en
alí, a continuación, o contido deste div

219
00:10:41,080 --> 00:10:44,580
será modificado para reflectir
o contido actualizado.

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

221
00:10:45,480 --> 00:10:47,500
Este é CS50.

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