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ão mais uma
tipo de noção de que

4
00:00:06,940 --> 00:00:12,120
tipo de cai sob a égide da
JavaScript é uma coisa chamada AJAX.

5
00:00:12,120 --> 00:00:15,310
Até este ponto, a nossa
interação com JavaScript

6
00:00:15,310 --> 00:00:17,727
tem sido limitada a empurrar um
botão e algo acontece.

7
00:00:17,727 --> 00:00:19,560
E especificamente, o
algo que acontece

8
00:00:19,560 --> 00:00:22,950
São os nossos websites olhar e sentir as mudanças.

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

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

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

12
00:00:29,060 --> 00:00:33,240
Mas quando eu fiz isso, eu não tenho
fazer quaisquer solicitações extras especiais.

13
00:00:33,240 --> 00:00:36,800
Eu não tenho que pedir que
o servidor enviar-me uma nova página.

14
00:00:36,800 --> 00:00:39,620
Eu só mudei o que eu já tinha.

15
00:00:39,620 --> 00:00:42,245
Eu não tenho que recarregar minha página,
e as coisas definitivamente mudou,

16
00:00:42,245 --> 00:00:43,760
então isso é ótimo.

17
00:00:43,760 --> 00:00:48,400
Mas há definitivamente alguns
interação do usuário manual envolvido.

18
00:00:48,400 --> 00:00:53,140
AJAX é uma técnica legal que permite
nós para atualizar o conteúdo de uma página,

19
00:00:53,140 --> 00:00:55,750
e não apenas a aparência e
sentir, sem recarregar.

20
00:00:55,750 --> 00:00:58,610
>> E por especificamente quando eu
dizer atualizar o conteúdo de uma página,

21
00:00:58,610 --> 00:01:01,990
Eu não estou dizendo que reescrever
a página usando JavaScript.

22
00:01:01,990 --> 00:01:06,560
Eu estou dizendo que, na verdade, solicitar
mais informações a partir do servidor

23
00:01:06,560 --> 00:01:08,640
sem a nossa página de ter que recarregar.

24
00:01:08,640 --> 00:01:10,850
>> Agora que tipo de um pouco de
uma técnica mais avançada

25
00:01:10,850 --> 00:01:11,950
que nós estamos indo falar
sobre neste vídeo.

26
00:01:11,950 --> 00:01:13,720
Nós vamos ter alguma interação.

27
00:01:13,720 --> 00:01:17,750
Mas quando o fazemos, eu vou ser
fazer pedidos para o servidor web.

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

29
00:01:21,140 --> 00:01:25,010
Eu vou estar fazendo adicional
solicitações enquanto eu estou visitando uma página web,

30
00:01:25,010 --> 00:01:26,890
mas a minha página não será atualizada.

31
00:01:26,890 --> 00:01:30,000
>> Ele só vai
de forma assíncrona atualizar minha página.

32
00:01:30,000 --> 00:01:31,840
E isso é, de fato,
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 é um outro tipo de marcação
linguagem, e você pode classificar de

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

36
00:01:39,680 --> 00:01:42,990
Não é bem a mesma coisa, mas
é basicamente uma linguagem de marcação.

37
00:01:42,990 --> 00:01:47,770
Portanto, é um assíncrono
JavaScript e uma linguagem de marcação.

38
00:01:47,770 --> 00:01:50,590
>> Portanto, a fim de usar este
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
não é uma linguagem de programação separado.

40
00:01:52,230 --> 00:01:55,300
É apenas uma espécie de
conjunto de techniques-- nós

41
00:01:55,300 --> 00:01:57,870
precisa criar um especial
Objeto JavaScript, que

42
00:01:57,870 --> 00:02:00,689
é chamado de um XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Agora, é muito fácil de fazer isso.

44
00:02:01,980 --> 00:02:04,550
Nós apenas dizer var, qualquer que seja
queremos chamar este objeto,

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 já obtido
um tipo de objeto AJAX,

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

48
00:02:14,370 --> 00:02:18,360
nós para atualizar a página de forma assíncrona.

49
00:02:18,360 --> 00:02:23,100
>> Depois de se ter obtido esta nova
objeto, este XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
nós temos que fazer alguma coisa para o seu
comportamento onreadystatechange.

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

52
00:02:30,360 --> 00:02:34,080
quando você faz um pedido
para uma página web, a página

53
00:02:34,080 --> 00:02:35,880
passa por uma série de etapas.

54
00:02:35,880 --> 00:02:37,370
Em primeiro lugar, um pedido não tiver sido enviado.

55
00:02:37,370 --> 00:02:39,860
Em seguida, o pedido foi
enviado, mas não atendido.

56
00:02:39,860 --> 00:02:41,580
Em seguida, o pedido foi atendido.

57
00:02:41,580 --> 00:02:43,680
Em seguida, o pedido é
sendo enviado de volta para você.

58
00:02:43,680 --> 00:02:46,930
>> Em seguida, o pedido é
totalmente carregado em sua página.

59
00:02:46,930 --> 00:02:48,640
Esses são estados diferentes.

60
00:02:48,640 --> 00:02:53,890
E por isso precisamos definir nossa
novo objeto XMLHttpRequest

61
00:02:53,890 --> 00:02:58,740
para mudar quando as mudanças de estado de pronto.

62
00:02:58,740 --> 00:03:01,925
E normalmente, fazemos isso por
definição de uma função anônima, o que

63
00:03:01,925 --> 00:03:04,490
estamos familiarizados com a partir de
JavaScript agora, que

64
00:03:04,490 --> 00:03:09,840
é chamado quando as mudanças de estado de pronto.

65
00:03:09,840 --> 00:03:11,340
Não é realmente muito mais do que isso.

66
00:03:11,340 --> 00:03:14,340
Nós apenas estamos indo para ser a definição de uma
função anônima, uma espécie de gostar do que

67
00:03:14,340 --> 00:03:16,440
que estávamos fazendo em
JavaScript, onde iríamos

68
00:03:16,440 --> 00:03:18,750
tem uma função anônima
responder a um clique em,

69
00:03:18,750 --> 00:03:23,230
ou quando estávamos fazendo um mapa de
os vários objetos em uma matriz.

70
00:03:23,230 --> 00:03:25,220
>> Alguma coisa aconteceu quando
algo foi clicado.

71
00:03:25,220 --> 00:03:28,810
Neste caso, é apenas algo que é
acontecendo quando o estado da nossa página

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

73
00:03:30,160 --> 00:03:32,730
Existem duas outras propriedades
que são tipo de-- eles não são

74
00:03:32,730 --> 00:03:35,524
as únicas propriedades que são
inerente ao XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
mas eles são queridos bastante importantes.

76
00:03:36,940 --> 00:03:39,815
Há algo chamado readyState,
que, como você provavelmente pode adivinhar,

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

78
00:03:41,750 --> 00:03:44,250
Na verdade, diz-lhe
o que o readyState é.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, e 4 são
as possibilidades lá,

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

81
00:03:48,080 --> 00:03:50,030
Eu só estava falando de um segundo atrás.

82
00:03:50,030 --> 00:03:53,100
>> E depois de status, que
espero que se tudo correu bem,

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

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

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

86
00:04:03,735 --> 00:04:07,940
E se o nosso estado de prontidão
é de quatro, e a resposta

87
00:04:07,940 --> 00:04:11,490
está pronto para ser colocado no
página, eo estado é 200,

88
00:04:11,490 --> 00:04:13,580
fomos capazes de fazer
tudo com sucesso,

89
00:04:13,580 --> 00:04:17,209
agora podemos de forma assíncrona
atualizar a página

90
00:04:17,209 --> 00:04:21,730
sem ter que recarregar
todo o conteúdo do mesmo.

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

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

93
00:04:31,020 --> 00:04:33,900
então tudo o que precisamos fazer é
abrir um assíncrono

94
00:04:33,900 --> 00:04:38,530
pedido, que é apenas fazer
um HTTP GET solicitação geral.

95
00:04:38,530 --> 00:04:41,950
Basta fazê-lo por meio de programação,
em vez de através de nosso navegador web.

96
00:04:41,950 --> 00:04:43,786
E, depois, enviar esse pedido.

97
00:04:43,786 --> 00:04:45,660
Então, o que faz isso talvez
parecer no contexto?

98
00:04:45,660 --> 00:04:49,790
Então aqui está uma função que
lida com solicitações de AJAX.

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

100
00:04:50,290 --> 00:04:52,430
E eu disse arbitrariamente
ele aceita um argumento.

101
00:04:52,430 --> 00:04:55,550
E esta uma espécie de
esqueleto geral aqui.

102
00:04:55,550 --> 00:05:00,890
No início, ficamos
nós mesmos um novo objeto XMLHttpRequest.

103
00:05:00,890 --> 00:05:03,830
Então, eu preciso definir o
comportamento onreadystatechange.

104
00:05:03,830 --> 00:05:06,970
E assim eu vou dizer
quando as mudanças ReadyState,

105
00:05:06,970 --> 00:05:10,110
Eu quero que você chamar essa função.

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

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

108
00:05:17,240 --> 00:05:20,799
por isso, tivemos um pedido bem sucedido, I
quero fazer algo para a página.

109
00:05:20,799 --> 00:05:22,590
E nós vamos dar uma olhada
em um exemplo do que

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

111
00:05:25,010 --> 00:05:27,830
Assim, pois, agora tenho definido
minha função anônima,

112
00:05:27,830 --> 00:05:31,340
minha função de resposta sempre que
as alterações ReadyState.

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

114
00:05:37,120 --> 00:05:39,160
E então, eu enviar esse pedido.

115
00:05:39,160 --> 00:05:41,980
E vamos dar uma olhada
um exemplo mais concreto

116
00:05:41,980 --> 00:05:46,290
AJAX do que pode fazer nas nossas páginas web.

117
00:05:46,290 --> 00:05:49,740
Então, eu tenho aqui uma forma muito simples
página chamada home.html.

118
00:05:49,740 --> 00:05:53,620
E eu tenho uma informação vai
aqui e algum tipo de menu drop-down.

119
00:05:53,620 --> 00:05:55,390
>> E nós vamos rever isso em um segundo.

120
00:05:55,390 --> 00:05:59,150
Mas acho que agora deve ter um
olhar o código fonte real.

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

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

123
00:06:03,490 --> 00:06:04,740
E vamos ver o que está acontecendo.

124
00:06:04,740 --> 00:06:08,240
Assim, se no topo aqui, tenho
algumas coisas JavaScript que está acontecendo.

125
00:06:08,240 --> 00:06:12,470
>> E aqui, eu aparentemente têm
uma div cuja ID é infodiv,

126
00:06:12,470 --> 00:06:15,290
e algumas informações
está a ir para lá.

127
00:06:15,290 --> 00:06:16,374
E então eu tenho este formulário.

128
00:06:16,374 --> 00:06:18,081
E dentro deste
forma, eu tenho algo

129
00:06:18,081 --> 00:06:20,200
chamado de Select, que
é apenas um menu drop-down

130
00:06:20,200 --> 00:06:22,150
com um monte de opções diferentes.

131
00:06:22,150 --> 00:06:26,150
E, aparentemente, quando isso não mudar, quando
a opção que tenha sido seleccionada tiver

132
00:06:26,150 --> 00:06:30,600
mudado, eu vou chamar
alguma função cs50Info,

133
00:06:30,600 --> 00:06:33,190
e então eu vou
passar em this.value,

134
00:06:33,190 --> 00:06:35,740
onde este refere-se a
qual opção foi selecionada,

135
00:06:35,740 --> 00:06:39,820
e valor é uma dessas aqui, a opção
value = é igual vazio ", Blumberg,"

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

137
00:06:42,610 --> 00:06:45,090
>> Então, o que pode realmente
acontecer aqui quando eu faço isso?

138
00:06:45,090 --> 00:06:48,800
Bem, vamos dar uma
olhar para blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Parece que é apenas um
trecho de alguns Html.

141
00:06:53,924 --> 00:06:56,090
E, na verdade, o que eu estou esperando
que vai acontecer aqui

142
00:06:56,090 --> 00:07:00,020
é que eu vou ser capaz de ligar
Este HTML diretamente em minha página web

143
00:07:00,020 --> 00:07:02,970
sem ter que recarregar
o principal, de tal modo que quando

144
00:07:02,970 --> 00:07:07,510
Eu escolho Hannah do drop-down
menus, informações sobre Hannah,

145
00:07:07,510 --> 00:07:11,100
Em particular, estas informações
aqui em blumberg.html,

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

147
00:07:12,574 --> 00:07:13,740
E eu não tenho para atualizar.

148
00:07:13,740 --> 00:07:16,842
E se eu escolhesse outra pessoa,
suas informações iria aparecer.

149
00:07:16,842 --> 00:07:17,550
Como eu faço isso?

150
00:07:17,550 --> 00:07:20,290
Mais uma vez, isso exige
nos usar algum AJAX.

151
00:07:20,290 --> 00:07:22,540
E assim, nós vamos abrir ajax.js.

152
00:07:22,540 --> 00:07:25,550
E aqui é que a função, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Se o nome não é nada, eu voltar.

154
00:07:27,410 --> 00:07:31,450
Eu não vou fazer nada se
a opção escolhida foi vazio.

155
00:07:31,450 --> 00:07:35,420
Caso contrário, eu vou
criar um novo XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
E então eu vou dizer, quando o
mudanças ReadyState, chamar essa função.

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

158
00:07:43,630 --> 00:07:45,740
aqui está um pouco
do jQuery na linha 13.

159
00:07:45,740 --> 00:07:50,450
Mas tudo que eu estou fazendo está dizendo:
alterar o conteúdo da infodiv

160
00:07:50,450 --> 00:07:57,820
para ser o que eu voltei como um
resposta da minha HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Qual é a minha HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Bem, isso é certo
aqui na linha 18 e 19.

163
00:08:02,020 --> 00:08:08,550
Linha 18, eu estou basicamente preparação
Começar um pedido de nome + .html.

164
00:08:08,550 --> 00:08:11,170
E mais uma vez, o nome aqui é
o argumento de que era

165
00:08:11,170 --> 00:08:14,280
passado como um parâmetro para cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Então, basicamente, eu estou passando em alguém do
nome, que foi esse conjunto de opções

167
00:08:18,460 --> 00:08:22,980
que vimos no
drop-down menu no formulário.

168
00:08:22,980 --> 00:08:24,450
Estou recebendo esse nome.

169
00:08:24,450 --> 00:08:29,530
E eu estou dizendo que eu gostaria que você
por favor, alcançai-me que file.html,

170
00:08:29,530 --> 00:08:31,020
e, em seguida, enviar esse pedido.

171
00:08:31,020 --> 00:08:34,820
>> E assim que vai onreadystatechange
estar ouvindo e esperando e esperando

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

173
00:08:39,460 --> 00:08:44,970
Então, ele está pronto para ser servido,
ea solicitação foi bem-sucedida.

174
00:08:44,970 --> 00:08:49,500
E, em seguida, se for, ele vai
alterar o conteúdo da infodiv

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

176
00:08:53,030 --> 00:08:54,930
>> Então, vamos ver como isso
pode realmente funcionar.

177
00:08:54,930 --> 00:08:58,860
Então, vamos cabeça para o meu navegador
janela, e veremos aqui.

178
00:08:58,860 --> 00:09:01,359
Então, vamos dar uma olhada
o que está acontecendo aqui em AJAX.

179
00:09:01,359 --> 00:09:03,400
Então, nós vamos escolher alguém
a partir do menu drop-down.

180
00:09:03,400 --> 00:09:06,079
Portanto, neste caso, vamos
basta escolher Hannah.

181
00:09:06,079 --> 00:09:08,120
E notem que Hannah de
informação mudou,

182
00:09:08,120 --> 00:09:11,030
mas eu não tive meu any--
A página não inteiramente recarregar.

183
00:09:11,030 --> 00:09:12,190
As coisas ficaram.

184
00:09:12,190 --> 00:09:13,320
A maioria das coisas ficaram.

185
00:09:13,320 --> 00:09:14,320
AJAX Teste não se alterou.

186
00:09:14,320 --> 00:09:16,700
O próprio botão, este
drop-down menu não mudou.

187
00:09:16,700 --> 00:09:18,260
Mas a informação não se alterou.

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

189
00:09:20,218 --> 00:09:24,430
você realmente pode ver que o conteúdo
desaparece e depois reaparece realmente

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

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

192
00:09:27,320 --> 00:09:29,940
e, em seguida, substituído com um
nova solicitação assíncrona.

193
00:09:29,940 --> 00:09:34,410
>> Então, se eu mudá-lo para ser dizer,
Rob-- e mais uma vez, dar uma olhada,

194
00:09:34,410 --> 00:09:38,379
e talvez nós vamos vê-lo realmente
desaparecem e reaparecem rapidamente.

195
00:09:38,379 --> 00:09:38,920
Você viu isso?

196
00:09:38,920 --> 00:09:41,400
Como ele só bateu para longe,
e, em seguida, voltar a encher?

197
00:09:41,400 --> 00:09:43,640
Esse é o pedido de AJAX
tipo de ocorrendo.

198
00:09:43,640 --> 00:09:46,060
E assim, dependendo da
pessoa que eu escolher, eu sou

199
00:09:46,060 --> 00:09:50,690
fazendo uma assíncrona diferente
pedido para um arquivo diferente

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

201
00:09:52,730 --> 00:09:55,550
E o conteúdo da minha
infodiv está atualizando,

202
00:09:55,550 --> 00:09:58,457
com base no qual delas eu escolhi.

203
00:09:58,457 --> 00:10:00,040
Então isso é realmente tudo o que há para AJAX.

204
00:10:00,040 --> 00:10:04,090
Ele nos permite fazer essas assíncrona
solicitações, atualizações a uma página.

205
00:10:04,090 --> 00:10:06,450
Sem ter que
atualizar a página inteira,

206
00:10:06,450 --> 00:10:08,520
nós estamos indo para obter novo
conteúdo a partir dele, fazendo

207
00:10:08,520 --> 00:10:11,170
um novo novo pedido para o servidor.

208
00:10:11,170 --> 00:10:13,420
E assim, nossas páginas podem tornar-se
um pouco mais dinâmico.

209
00:10:13,420 --> 00:10:15,128
>> E como nós começamos mais
e mais avançado, você

210
00:10:15,128 --> 00:10:17,700
pode fazer as coisas como
digamos, sua caixa de entrada de e-mail,

211
00:10:17,700 --> 00:10:19,850
onde você não tem que fazer nada.

212
00:10:19,850 --> 00:10:22,560
Você não tem que clicar em um
drop-down menu ou clicar em nada,

213
00:10:22,560 --> 00:10:25,920
e, de repente, o seu mais novo
e-mail aparece na parte superior.

214
00:10:25,920 --> 00:10:27,840
Isso também é apenas uma solicitação do Ajax.

215
00:10:27,840 --> 00:10:30,460
Ajax está solicitando o seu
servidor, o servidor de e-mail,

216
00:10:30,460 --> 00:10:33,360
para enviar mais de todas as informações
sobre seus últimos e-mails,

217
00:10:33,360 --> 00:10:38,110
e mudar o que você vê na
tela para ser o seu mais recente conjunto de e-mails.

218
00:10:38,110 --> 00:10:41,080
E se você tem um novo em
lá, em seguida, o conteúdo desse div

219
00:10:41,080 --> 00:10:44,580
será alterado para refletir
o conteúdo atualizado.

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

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

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