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

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

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Así que uno más
tipo de noción de que

4
00:00:06,940 --> 00:00:12,120
tipo de caídas bajo el paraguas de
JavaScript es algo que se llama AJAX.

5
00:00:12,120 --> 00:00:15,310
Hasta este punto, nuestra
interacción con JavaScript

6
00:00:15,310 --> 00:00:17,727
se ha limitado a empujar una
botón y algo sucede.

7
00:00:17,727 --> 00:00:19,560
Y concretamente, la
algo que sucede

8
00:00:19,560 --> 00:00:22,950
es de los sitios ven y se sienten los cambios.

9
00:00:22,950 --> 00:00:23,450
¿Correcto?

10
00:00:23,450 --> 00:00:26,540
Al igual que en particular, en el
documento de modelo de objetos de vídeo,

11
00:00:26,540 --> 00:00:29,060
He cambiado el color de fondo.

12
00:00:29,060 --> 00:00:33,240
Pero cuando lo hice, yo no tenía
hacer alguna petición especial.

13
00:00:33,240 --> 00:00:36,800
Yo no tengo que pedir que
el servidor me envía una nueva página.

14
00:00:36,800 --> 00:00:39,620
Acabo de cambiar lo que ya tenía.

15
00:00:39,620 --> 00:00:42,245
Yo no tengo que recargar mi página,
y las cosas cambiaron definitivamente,

16
00:00:42,245 --> 00:00:43,760
así que eso es genial.

17
00:00:43,760 --> 00:00:48,400
Pero definitivamente hay algunos
la interacción del usuario Manual involucrado.

18
00:00:48,400 --> 00:00:53,140
AJAX es una técnica fresca que permite
con nosotros para modificar el contenido de una página,

19
00:00:53,140 --> 00:00:55,750
y no sólo el aspecto y
sentir, sin recargar.

20
00:00:55,750 --> 00:00:58,610
>> Y por específicamente cuando
decir la actualización de contenido de una página,

21
00:00:58,610 --> 00:01:01,990
No estoy diciendo que reescribimos
la página utilizando JavaScript.

22
00:01:01,990 --> 00:01:06,560
Estoy diciendo que en realidad pedimos
más información desde el servidor

23
00:01:06,560 --> 00:01:08,640
sin nuestra página de tener que recargar.

24
00:01:08,640 --> 00:01:10,850
>> Ahora ese tipo de un poco de
una técnica más avanzada

25
00:01:10,850 --> 00:01:11,950
que vamos a hablar
acerca de este video.

26
00:01:11,950 --> 00:01:13,720
Vamos a tener un poco de interacción.

27
00:01:13,720 --> 00:01:17,750
Pero cuando lo hacemos, yo voy a ser
hacer peticiones al servidor web.

28
00:01:17,750 --> 00:01:21,140
En este caso, sólo lo que es
correr mi servidor web Apache.

29
00:01:21,140 --> 00:01:25,010
Voy a estar haciendo adicional
peticiones mientras estoy visitando una página web,

30
00:01:25,010 --> 00:01:26,890
pero mi página no se actualizará.

31
00:01:26,890 --> 00:01:30,000
>> Es sólo va a
actualizar de forma asíncrona mi página.

32
00:01:30,000 --> 00:01:31,840
Y eso es, de hecho,
AJAX que significa,

33
00:01:31,840 --> 00:01:35,400
es Asynchronous JavaScript y XML.

34
00:01:35,400 --> 00:01:37,910
XML es otro tipo de marcas
idioma, y ​​se puede ordenar de

35
00:01:37,910 --> 00:01:39,680
pensar en él como HTML.

36
00:01:39,680 --> 00:01:42,990
No es exactamente lo mismo, pero
es básicamente un lenguaje de marcas.

37
00:01:42,990 --> 00:01:47,770
Así que es un asíncrono
JavaScript y un lenguaje de marcas.

38
00:01:47,770 --> 00:01:50,590
>> Así que con el fin de utilizar este
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
no es un lenguaje de programación independiente.

40
00:01:52,230 --> 00:01:55,300
Es sólo una especie de
conjunto de techniques-- nos

41
00:01:55,300 --> 00:01:57,870
necesitará crear un especial
Objeto JavaScript, lo que

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

43
00:02:00,689 --> 00:02:01,980
Ahora, es muy fácil de hacer esto.

44
00:02:01,980 --> 00:02:04,550
Nos limitamos a decir var, cualquiera que sea
queremos llamar a este objeto,

45
00:02:04,550 --> 00:02:07,030
es igual a nuevo XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
Y ahora que ya hemos obtenido
una especie de AJAX de objeto,

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

48
00:02:14,370 --> 00:02:18,360
con nosotros para modificar de forma asíncrona nuestra página.

49
00:02:18,360 --> 00:02:23,100
>> Después de haber conseguido este nuevo
objeto, este XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
tenemos que hacer algo para su
comportamiento onreadystatechange.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
comportamiento es realmente sólo

52
00:02:30,360 --> 00:02:34,080
cuando usted hace una petición
a una página web, la página

53
00:02:34,080 --> 00:02:35,880
pasa a través de una serie de pasos.

54
00:02:35,880 --> 00:02:37,370
En primer lugar, una petición no ha sido enviado.

55
00:02:37,370 --> 00:02:39,860
Luego, la solicitud ha sido
enviado, pero no actuar en consecuencia.

56
00:02:39,860 --> 00:02:41,580
A continuación, la solicitud ha sido actuar en consecuencia.

57
00:02:41,580 --> 00:02:43,680
Entonces la petición es
de ser enviado de nuevo a usted.

58
00:02:43,680 --> 00:02:46,930
>> Entonces, la solicitud se
totalmente cargada en su página.

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

60
00:02:48,640 --> 00:02:53,890
Y así tenemos que fijar nuestra
nuevo objeto XMLHttpRequest

61
00:02:53,890 --> 00:02:58,740
cambiar cuando cambia el estado Lista.

62
00:02:58,740 --> 00:03:01,925
Y por lo general, lo hacemos por
definir una función anónima, que

63
00:03:01,925 --> 00:03:04,490
estamos familiarizados con de
JavaScript ahora, que

64
00:03:04,490 --> 00:03:09,840
se llama cuando cambia el estado Lista.

65
00:03:09,840 --> 00:03:11,340
En realidad no es mucho más que eso.

66
00:03:11,340 --> 00:03:14,340
Sólo vamos a definir una
función anónima, algo así como lo que

67
00:03:14,340 --> 00:03:16,440
que estábamos haciendo en
JavaScript, donde nos haría

68
00:03:16,440 --> 00:03:18,750
tienen una función anónima
responder a una de clic,

69
00:03:18,750 --> 00:03:23,230
o cuando estábamos haciendo un mapa de
los diversos objetos en una matriz.

70
00:03:23,230 --> 00:03:25,220
>> Algo sucedió cuando
algo se ha hecho clic.

71
00:03:25,220 --> 00:03:28,810
En este caso, es sólo algo es
sucede cuando el estado de nuestra página

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

73
00:03:30,160 --> 00:03:32,730
Hay otras dos propiedades
que son una especie de-- no lo son

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

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

76
00:03:36,940 --> 00:03:39,815
Hay algo que se llama readyState,
que como se puede adivinar,

77
00:03:39,815 --> 00:03:41,750
está relacionado con onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
En realidad, le dice
lo que el readyState es.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, y 4 son
las posibilidades allí,

80
00:03:46,289 --> 00:03:48,080
y que tipo de más o menos
corresponden a lo que

81
00:03:48,080 --> 00:03:50,030
Estaba hablando hace aproximadamente un segundo.

82
00:03:50,030 --> 00:03:53,100
>> Y entonces de estado, que
espero que si todo ha ido bien,

83
00:03:53,100 --> 00:03:56,710
es 200, que es la abreviatura
para, por supuesto, está bien,

84
00:03:56,710 --> 00:03:58,330
que estamos familiarizados con http.

85
00:03:58,330 --> 00:04:03,735
Así que estamos esperando que nuestro estado listo
es de cuatro, y nuestro estado es 200.

86
00:04:03,735 --> 00:04:07,940
Y si nuestro estado listo
es de cuatro, y la respuesta

87
00:04:07,940 --> 00:04:11,490
está listo para ser puesto sobre la
página, y el estado es de 200,

88
00:04:11,490 --> 00:04:13,580
hemos sido capaces de hacer
todo con éxito,

89
00:04:13,580 --> 00:04:17,209
ahora podemos asíncrona
actualizar nuestra página

90
00:04:17,209 --> 00:04:21,730
sin tener que recargar
todo el contenido de la misma.

91
00:04:21,730 --> 00:04:27,710
>> Después hemos definido lo que sucede
al comportamiento onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
y hemos comprobado que readyState
es 4 y el estado es de 200,

93
00:04:31,020 --> 00:04:33,900
entonces todo lo que tenemos que hacer es
abrir una asíncrona

94
00:04:33,900 --> 00:04:38,530
solicitud, que se acaba de hacer
un HTTP GET general petición.

95
00:04:38,530 --> 00:04:41,950
Sólo hacerlo mediante programación,
en lugar de a través de nuestro navegador web.

96
00:04:41,950 --> 00:04:43,786
Y entonces enviamos esa solicitud.

97
00:04:43,786 --> 00:04:45,660
Entonces, ¿qué hace esto tal vez
parecerse en su contexto?

98
00:04:45,660 --> 00:04:49,790
Así que aquí está una función que
se ocupa de las peticiones AJAX.

99
00:04:49,790 --> 00:04:50,290
¿De acuerdo?

100
00:04:50,290 --> 00:04:52,430
Y yo he dicho de manera arbitraria
acepta un argumento.

101
00:04:52,430 --> 00:04:55,550
Y esto una especie de
esqueleto en general aquí.

102
00:04:55,550 --> 00:05:00,890
En el comienzo, obtenemos
nosotros mismos un nuevo objeto XMLHttpRequest.

103
00:05:00,890 --> 00:05:03,830
Entonces, tengo que establecer el
comportamiento onreadystatechange.

104
00:05:03,830 --> 00:05:06,970
Y por lo que voy a decir
cuando los cambios readyState,

105
00:05:06,970 --> 00:05:10,110
Quiero que llama a esta función.

106
00:05:10,110 --> 00:05:12,570
>> ¿Qué va a pedir a la
pregunta, si el readyState

107
00:05:12,570 --> 00:05:17,240
es 4, si el readyState ha cambiado
a ser 4, y el estado era 200,

108
00:05:17,240 --> 00:05:20,799
así que tuvimos una solicitud exitosa, me
querer hacer algo a la página.

109
00:05:20,799 --> 00:05:22,590
Y vamos a echar un vistazo
un ejemplo de lo que

110
00:05:22,590 --> 00:05:25,010
de que algo podría estar en un segundo.

111
00:05:25,010 --> 00:05:27,830
Así que, ahora que he definido
mi función anónima,

112
00:05:27,830 --> 00:05:31,340
mi función de respuesta de siempre
los cambios readyState.

113
00:05:31,340 --> 00:05:37,120
>> Así que sólo hay que abrir un
solicitar, mediante el método Open.

114
00:05:37,120 --> 00:05:39,160
Y luego, le envío la solicitud.

115
00:05:39,160 --> 00:05:41,980
Y vamos a echar un vistazo a
un ejemplo más concreto

116
00:05:41,980 --> 00:05:46,290
de lo AJAX puede hacer en nuestras páginas web.

117
00:05:46,290 --> 00:05:49,740
Así que tengo aquí una muy simple
Página llama home.html.

118
00:05:49,740 --> 00:05:53,620
Y tengo una información va
aquí y una especie de menú desplegable.

119
00:05:53,620 --> 00:05:55,390
>> Y vamos a volver a este en un segundo.

120
00:05:55,390 --> 00:05:59,150
Pero creo que ahora debemos tomar una
mirar el código fuente real.

121
00:05:59,150 --> 00:06:01,080
Y así, voy a abrir home.html.

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

123
00:06:03,490 --> 00:06:04,740
Y vamos a ver lo que está pasando.

124
00:06:04,740 --> 00:06:08,240
Así que hasta en lo más alto aquí, tengo
algunas cosas de JavaScript que está pasando.

125
00:06:08,240 --> 00:06:12,470
>> Y aquí, al parecer tengo
un div cuyo ID es infodiv,

126
00:06:12,470 --> 00:06:15,290
y alguna información
va a ir allí.

127
00:06:15,290 --> 00:06:16,374
Y luego tengo este formulario.

128
00:06:16,374 --> 00:06:18,081
Y dentro de este
forma, tengo algo

129
00:06:18,081 --> 00:06:20,200
llamado Select, que
es sólo un menú desplegable

130
00:06:20,200 --> 00:06:22,150
con un montón de opciones diferentes.

131
00:06:22,150 --> 00:06:26,150
Y al parecer, cuando eso cambia, cuando
la opción que se ha seleccionado tiene

132
00:06:26,150 --> 00:06:30,600
cambiado, voy a llamar a
alguna función cs50Info,

133
00:06:30,600 --> 00:06:33,190
y luego me voy a
Aconteció en this.value,

134
00:06:33,190 --> 00:06:35,740
donde esto se refiere a
qué opción fue seleccionada,

135
00:06:35,740 --> 00:06:39,820
y el valor es uno de ellos aquí, la opción
valor = iguales vacío ", Blumberg,"

136
00:06:39,820 --> 00:06:42,610
"Bowden", "chan" y "malan."

137
00:06:42,610 --> 00:06:45,090
>> Entonces, ¿qué podría realidad
pasar aquí cuando hago esto?

138
00:06:45,090 --> 00:06:48,800
Bueno, vamos a echar un
mira blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Parece que es sólo un
fragmento de algo de HTML.

141
00:06:53,924 --> 00:06:56,090
Y de hecho, lo estoy esperando
que va a pasar aquí

142
00:06:56,090 --> 00:07:00,020
es que me voy a ser capaz de conectar
Este HTML directamente en mi página web

143
00:07:00,020 --> 00:07:02,970
sin tener que recargar
a la página, de manera que cuando

144
00:07:02,970 --> 00:07:07,510
Elijo Hannah desde el desplegable
menú, 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
es lo que aparece en la página.

147
00:07:12,574 --> 00:07:13,740
Y yo no tengo que refrescar.

148
00:07:13,740 --> 00:07:16,842
Y si yo me pongo a alguien más,
su información se presentaba.

149
00:07:16,842 --> 00:07:17,550
¿Cómo puedo hacer esto?

150
00:07:17,550 --> 00:07:20,290
Una vez más, esto requiere
que usemos algunos AJAX.

151
00:07:20,290 --> 00:07:22,540
Y así, nos abrimos ajax.js.

152
00:07:22,540 --> 00:07:25,550
Y aquí es esa función, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Si el nombre no es nada, que yo vuelva.

154
00:07:27,410 --> 00:07:31,450
Yo no voy a hacer nada si
la opción de vacío ha sido elegido.

155
00:07:31,450 --> 00:07:35,420
De lo contrario, voy a
crear un nuevo XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
Y entonces yo voy a decir, cuando el
cambios readyState, llaman a esta función.

157
00:07:39,020 --> 00:07:43,630
>> Y si el readyState es
4 y el estado es 200,

158
00:07:43,630 --> 00:07:45,740
aquí está un poco
de jQuery en la línea 13.

159
00:07:45,740 --> 00:07:50,450
Pero todo lo que estoy haciendo es decir,
cambiar el contenido de infodiv

160
00:07:50,450 --> 00:07:57,820
para ser lo volví como
respuesta de mi HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> ¿Cuál es mi HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Bueno, eso es correcto
aquí en la línea 18 y 19.

163
00:08:02,020 --> 00:08:08,550
Línea 18, estoy básicamente preparar
una petición GET para el nombre + .html.

164
00:08:08,550 --> 00:08:11,170
Y de nuevo, el nombre que aquí es
el 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
>> Así que, básicamente, estoy pasando en alguien de
nombre, que era el conjunto de opciones

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

168
00:08:22,980 --> 00:08:24,450
Me estoy poniendo ese nombre.

169
00:08:24,450 --> 00:08:29,530
Y yo estoy diciendo que te gustaría
por favor obtenga para mí que file.html,

170
00:08:29,530 --> 00:08:31,020
y luego enviar esa solicitud.

171
00:08:31,020 --> 00:08:34,820
>> Y para que onreadystatechange va
estar escuchando y esperando y esperando

172
00:08:34,820 --> 00:08:39,460
y esperando, hasta que el readyState
es 4, y el estado es de 200.

173
00:08:39,460 --> 00:08:44,970
Para que esté listo para ser servido,
y la solicitud se ha realizado correctamente.

174
00:08:44,970 --> 00:08:49,500
Y luego, si lo es, que va a
cambiar el contenido de infodiv

175
00:08:49,500 --> 00:08:53,030
siendo el texto de respuesta que me dieron la espalda.

176
00:08:53,030 --> 00:08:54,930
>> Así que vamos a ver cómo esto
realmente podría funcionar.

177
00:08:54,930 --> 00:08:58,860
Así que nos dirigimos a mi navegador
ventana, y vamos a ver aquí.

178
00:08:58,860 --> 00:09:01,359
Así que echemos un vistazo a
¿qué está pasando aquí en AJAX.

179
00:09:01,359 --> 00:09:03,400
Así que vamos a elegir a alguien
en el menú desplegable.

180
00:09:03,400 --> 00:09:06,079
Así que en este caso, vamos a
acaba de elegir Hannah.

181
00:09:06,079 --> 00:09:08,120
Y fíjense que Hannah
información ha cambiado,

182
00:09:08,120 --> 00:09:11,030
pero yo no tenía mi any--
página no enteramente recargar.

183
00:09:11,030 --> 00:09:12,190
Las cosas se quedó.

184
00:09:12,190 --> 00:09:13,320
La mayoría de las cosas se quedaron.

185
00:09:13,320 --> 00:09:14,320
Prueba AJAX no cambió.

186
00:09:14,320 --> 00:09:16,700
El botón de sí mismo, este
menú desplegable no cambió.

187
00:09:16,700 --> 00:09:18,260
Pero la información no hizo el cambio.

188
00:09:18,260 --> 00:09:20,218
Y dependiendo de cómo
rápidamente mi ordenador se mueve,

189
00:09:20,218 --> 00:09:24,430
en realidad se puede ver que el contenido
desaparece y luego reaparece realmente

190
00:09:24,430 --> 00:09:24,930
con rapidez.

191
00:09:24,930 --> 00:09:27,320
Ese es el contenido de ser
borrado de infodiv,

192
00:09:27,320 --> 00:09:29,940
y luego reemplazado con una
nueva solicitud asíncrona.

193
00:09:29,940 --> 00:09:34,410
>> Así que si me cambio a ser decir,
Rob-- y otra vez, miren,

194
00:09:34,410 --> 00:09:38,379
y tal vez vamos a ver lo que realmente
desaparecer y reaparecer rápidamente.

195
00:09:38,379 --> 00:09:38,920
Usted ve eso?

196
00:09:38,920 --> 00:09:41,400
Cómo acaba de hacer estallar de distancia,
y luego se volvió a llenar?

197
00:09:41,400 --> 00:09:43,640
Esa es la petición AJAX
tipo de producirse.

198
00:09:43,640 --> 00:09:46,060
Y así, en función de la
persona elijo, yo soy

199
00:09:46,060 --> 00:09:50,690
hacer una asíncrono diferente
solicitud a un archivo diferente

200
00:09:50,690 --> 00:09:52,730
que tengo en mi servidor.

201
00:09:52,730 --> 00:09:55,550
Y el contenido de mi
infodiv están actualizando,

202
00:09:55,550 --> 00:09:58,457
basado en cuál de estos que he elegido.

203
00:09:58,457 --> 00:10:00,040
Así que eso es realmente todo lo que hay que AJAX.

204
00:10:00,040 --> 00:10:04,090
Se nos permite hacer estas asíncrono
peticiones, cambios a una página.

205
00:10:04,090 --> 00:10:06,450
Sin tener que
actualizar la página entera,

206
00:10:06,450 --> 00:10:08,520
vamos a obtener nueva
contenido de ella haciendo

207
00:10:08,520 --> 00:10:11,170
una nueva nueva solicitud al servidor.

208
00:10:11,170 --> 00:10:13,420
Y por eso, nuestras páginas pueden llegar a ser
un poco más dinámico.

209
00:10:13,420 --> 00:10:15,128
>> Y a medida que más
y más avanzado,

210
00:10:15,128 --> 00:10:17,700
podría hacer las cosas como
por ejemplo, la bandeja de entrada de correo electrónico,

211
00:10:17,700 --> 00:10:19,850
en el que no tienes que hacer nada.

212
00:10:19,850 --> 00:10:22,560
Usted no tiene que hacer clic en un
menú desplegable o haga clic en cualquier cosa,

213
00:10:22,560 --> 00:10:25,920
y, de repente, su más reciente
correo electrónico aparece en la parte superior.

214
00:10:25,920 --> 00:10:27,840
Eso también es sólo una petición Ajax.

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

216
00:10:30,460 --> 00:10:33,360
para enviar a través de toda la información
acerca de sus últimos correos electrónicos,

217
00:10:33,360 --> 00:10:38,110
y el cambio de lo que se ve en la
pantalla para ser su juego más reciente de mensajes de correo electrónico.

218
00:10:38,110 --> 00:10:41,080
Y si usted tiene una nueva en
allí, entonces el contenido de ese div

219
00:10:41,080 --> 00:10:44,580
cambiará para reflejar
el contenido actualizado.

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

221
00:10:45,480 --> 00:10:47,500
Esto es CS50.

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