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

2
00:00:00,500 --> 00:00:04,810
[RIPRODUZIONE DI BRANI MUSICALI]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Così un altro
tipo di idea che

4
00:00:06,940 --> 00:00:12,120
sorta di cade sotto l'ombrello di
JavaScript è qualcosa chiamato AJAX.

5
00:00:12,120 --> 00:00:15,310
Fino a questo punto, il nostro
interazione con JavaScript

6
00:00:15,310 --> 00:00:17,727
è stato limitato a spingere un
pulsante e succede qualcosa.

7
00:00:17,727 --> 00:00:19,560
E in particolare, la
qualcosa che accade

8
00:00:19,560 --> 00:00:22,950
è i nostri siti web look and feel modifiche.

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

10
00:00:23,450 --> 00:00:26,540
Come in particolare, nel
documento del modello oggetto video,

11
00:00:26,540 --> 00:00:29,060
Ho cambiato il colore di sfondo.

12
00:00:29,060 --> 00:00:33,240
Ma quando l'ho fatto, non ho avuto
a fare le particolari richieste supplementari.

13
00:00:33,240 --> 00:00:36,800
Non ho avuto a chiedere che
il server mi mandi una nuova pagina.

14
00:00:36,800 --> 00:00:39,620
Ho appena cambiato quello che ho già avuto.

15
00:00:39,620 --> 00:00:42,245
Non ho avuto a ricaricare la mia pagina,
e le cose decisamente cambiate,

16
00:00:42,245 --> 00:00:43,760
così che è grande.

17
00:00:43,760 --> 00:00:48,400
Ma c'è sicuramente qualche
interazione manuale dell'utente coinvolto.

18
00:00:48,400 --> 00:00:53,140
AJAX è una tecnica che permette di fresco
per modificare il contenuto di una pagina,

19
00:00:53,140 --> 00:00:55,750
e non solo l'aspetto
sentire, senza ricaricare.

20
00:00:55,750 --> 00:00:58,610
>> E da quando ho specificamente
dire l'aggiornamento dei contenuti di una pagina,

21
00:00:58,610 --> 00:01:01,990
Non sto dicendo che riscriviamo
la pagina utilizzando JavaScript.

22
00:01:01,990 --> 00:01:06,560
Sto dicendo che in realtà chiediamo
ulteriori informazioni dal server

23
00:01:06,560 --> 00:01:08,640
senza la nostra pagina dover ricaricare.

24
00:01:08,640 --> 00:01:10,850
>> Ora che tipo di un po 'di
una tecnica più avanzata

25
00:01:10,850 --> 00:01:11,950
che stiamo andando a parlare
su in questo video.

26
00:01:11,950 --> 00:01:13,720
Stiamo per avere qualche interazione.

27
00:01:13,720 --> 00:01:17,750
Ma quando lo facciamo, ho intenzione di essere
fare richieste al server Web.

28
00:01:17,750 --> 00:01:21,140
In questo caso, solo ciò che è
esecuzione il mio server web Apache.

29
00:01:21,140 --> 00:01:25,010
Ho intenzione di essere fare aggiuntive
richieste mentre sto visitando una pagina web,

30
00:01:25,010 --> 00:01:26,890
ma la mia pagina non si aggiorna.

31
00:01:26,890 --> 00:01:30,000
>> E 'solo andando a
asincrono ad aggiornare la pagina.

32
00:01:30,000 --> 00:01:31,840
E questo è, infatti,
AJAX che rappresenta,

33
00:01:31,840 --> 00:01:35,400
è Asynchronous JavaScript and XML.

34
00:01:35,400 --> 00:01:37,910
XML è un altro tipo di marcatura
lingua, e si può ordinare di

35
00:01:37,910 --> 00:01:39,680
pensare ad esso come HTML.

36
00:01:39,680 --> 00:01:42,990
Non è proprio la stessa cosa, ma
è fondamentalmente solo un linguaggio di markup.

37
00:01:42,990 --> 00:01:47,770
Quindi è un asincrono
Javascript e il linguaggio di markup.

38
00:01:47,770 --> 00:01:50,590
>> Quindi, al fine di utilizzare questo
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
Non è un linguaggio di programmazione separata.

40
00:01:52,230 --> 00:01:55,300
E 'solo una sorta di
set di techniques-- noi

41
00:01:55,300 --> 00:01:57,870
necessario creare una speciale
Oggetto JavaScript, che

42
00:01:57,870 --> 00:02:00,689
viene chiamato un XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Ora, è molto facile da fare questo.

44
00:02:01,980 --> 00:02:04,550
Abbiamo solo dire var, qualunque
vogliamo chiamare questo oggetto,

45
00:02:04,550 --> 00:02:07,030
uguale nuova XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
Ed ora abbiamo ora ottenuto
una sorta AJAX di oggetto,

47
00:02:11,050 --> 00:02:14,370
o un XMLHttpRequest
oggetto, che permetterà

48
00:02:14,370 --> 00:02:18,360
per modificare in modo asincrono nostra pagina.

49
00:02:18,360 --> 00:02:23,100
>> Dopo abbiamo ottenuto questa nuova
oggetto, questo XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
dobbiamo fare qualcosa per la sua
comportamento onreadystatechange.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
comportamento è in realtà solo

52
00:02:30,360 --> 00:02:34,080
quando si effettua una richiesta
a una pagina web, la pagina

53
00:02:34,080 --> 00:02:35,880
passa attraverso una serie di passi.

54
00:02:35,880 --> 00:02:37,370
In primo luogo, la richiesta non è stata inviata.

55
00:02:37,370 --> 00:02:39,860
Poi, la richiesta è stata
inviato, ma non agire di conseguenza.

56
00:02:39,860 --> 00:02:41,580
Quindi la richiesta è stata dato seguito.

57
00:02:41,580 --> 00:02:43,680
Quindi la richiesta è
essere rimandato a voi.

58
00:02:43,680 --> 00:02:46,930
>> Poi, la richiesta è
a pieno carico nella tua pagina.

59
00:02:46,930 --> 00:02:48,640
Quelli sono stati diversi.

60
00:02:48,640 --> 00:02:53,890
E così abbiamo bisogno di impostare il nostro
nuovo oggetto XMLHttpRequest

61
00:02:53,890 --> 00:02:58,740
a cambiare quando cambia lo stato di pronto.

62
00:02:58,740 --> 00:03:01,925
E di solito, facciamo questo per
definendo una funzione anonima, che

63
00:03:01,925 --> 00:03:04,490
siamo a conoscenza da
JavaScript ora, che

64
00:03:04,490 --> 00:03:09,840
viene chiamato quando cambia lo stato di pronto.

65
00:03:09,840 --> 00:03:11,340
Non è davvero molto di più.

66
00:03:11,340 --> 00:03:14,340
Stiamo solo andando a essere la definizione di un
funzione anonima, un po 'come quello che

67
00:03:14,340 --> 00:03:16,440
stavamo facendo in
JavaScript, dove avremmo

68
00:03:16,440 --> 00:03:18,750
avere una funzione anonima
rispondere ad una sullo scatto,

69
00:03:18,750 --> 00:03:23,230
o quando stavamo facendo una mappa di
i vari oggetti in un array.

70
00:03:23,230 --> 00:03:25,220
>> Qualcosa è accaduto quando
qualcosa è stato cliccato.

71
00:03:25,220 --> 00:03:28,810
In questo caso, è solo qualcosa è
succede quando lo stato della nostra pagina

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

73
00:03:30,160 --> 00:03:32,730
Ci sono altre due proprietà
che sono specie di-- non sono

74
00:03:32,730 --> 00:03:35,524
le uniche proprietà che sono
inerente alla XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
ma sono quelli abbastanza importanti.

76
00:03:36,940 --> 00:03:39,815
C'è una cosa chiamata readyState,
che, come si può intuire,

77
00:03:39,815 --> 00:03:41,750
è legata alla onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
In realtà vi dice
ciò che il readyState è.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, e 4 sono
le possibilità lì,

80
00:03:46,289 --> 00:03:48,080
ed essi sorta di circa
conforme a quanto

81
00:03:48,080 --> 00:03:50,030
Stavo solo parlando di un secondo fa.

82
00:03:50,030 --> 00:03:53,100
>> E poi lo stato, che
speriamo che se tutto è andato bene,

83
00:03:53,100 --> 00:03:56,710
è 200, che è l'abbreviazione
per, ovviamente, OK,

84
00:03:56,710 --> 00:03:58,330
che noi siamo a conoscenza da Http.

85
00:03:58,330 --> 00:04:03,735
Quindi speriamo che il nostro stato di pronto
è quattro, e il nostro status è di 200.

86
00:04:03,735 --> 00:04:07,940
E se il nostro stato di pronto
è quattro, e la risposta

87
00:04:07,940 --> 00:04:11,490
è pronto per essere messo in
pagina e lo stato è 200,

88
00:04:11,490 --> 00:04:13,580
siamo stati in grado di fare
tutto con successo,

89
00:04:13,580 --> 00:04:17,209
ora siamo in grado in modo asincrono
aggiornare la nostra pagina

90
00:04:17,209 --> 00:04:21,730
senza dover ricaricare
l'intero contenuto di essa.

91
00:04:21,730 --> 00:04:27,710
>> Dopo abbiamo definito cosa succede
al comportamento onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
e abbiamo verificato che readyState
è 4 e lo stato è di 200,

93
00:04:31,020 --> 00:04:33,900
poi tutto quello che dobbiamo fare è
aprire un asincrono

94
00:04:33,900 --> 00:04:38,530
richiesta, che è solo fare
HTTP GET generalmente richiesta.

95
00:04:38,530 --> 00:04:41,950
Solo facendo a livello di codice,
anziché attraverso il nostro browser web.

96
00:04:41,950 --> 00:04:43,786
E poi inviamo la richiesta.

97
00:04:43,786 --> 00:04:45,660
Così che cosa fa questo forse
simile in contesto?

98
00:04:45,660 --> 00:04:49,790
Quindi, ecco una funzione che
si occupa di richieste AJAX.

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

100
00:04:50,290 --> 00:04:52,430
E ho arbitrariamente detto
accetta un argomento.

101
00:04:52,430 --> 00:04:55,550
E questa una sorta di
scheletro generale qui.

102
00:04:55,550 --> 00:05:00,890
All'inizio, si ottiene
noi stessi un nuovo oggetto XMLHttpRequest.

103
00:05:00,890 --> 00:05:03,830
Poi, ho bisogno di impostare la
comportamento onreadystatechange.

104
00:05:03,830 --> 00:05:06,970
E così ho intenzione di dire
quando cambia readyState,

105
00:05:06,970 --> 00:05:10,110
Voglio che chiama questa funzione.

106
00:05:10,110 --> 00:05:12,570
>> Che sta per chiedere il
domanda, se il readyState

107
00:05:12,570 --> 00:05:17,240
è 4, se il readyState è cambiato
essere 4, e lo stato era 200,

108
00:05:17,240 --> 00:05:20,799
così abbiamo avuto una richiesta di successo, io
vogliono fare qualcosa per la pagina.

109
00:05:20,799 --> 00:05:22,590
E daremo uno sguardo
un esempio di ciò che

110
00:05:22,590 --> 00:05:25,010
che qualcosa potrebbe essere in un secondo.

111
00:05:25,010 --> 00:05:27,830
Allora, ora ho definito
la mia funzione anonima,

112
00:05:27,830 --> 00:05:31,340
la mia funzione di risposta ogni volta
i cambiamenti readyState.

113
00:05:31,340 --> 00:05:37,120
>> Allora ho solo bisogno di aprire un
richiedere, utilizzando il metodo Open.

114
00:05:37,120 --> 00:05:39,160
E poi, io mando tale richiesta.

115
00:05:39,160 --> 00:05:41,980
E diamo uno sguardo a
un esempio più concreto

116
00:05:41,980 --> 00:05:46,290
di cosa AJAX può fare sulle nostre pagine web.

117
00:05:46,290 --> 00:05:49,740
Così ho qui un molto semplice
Pagina chiamato home.html.

118
00:05:49,740 --> 00:05:53,620
E ho ricevuto una informazione va
qui e una sorta di menu a discesa.

119
00:05:53,620 --> 00:05:55,390
>> E noi Rivisiteremo questo in un secondo.

120
00:05:55,390 --> 00:05:59,150
Ma penso che ora dovremmo prendere una
guardare il codice sorgente.

121
00:05:59,150 --> 00:06:01,080
E così, ho intenzione di aprire home.html.

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

123
00:06:03,490 --> 00:06:04,740
E vedremo cosa sta succedendo.

124
00:06:04,740 --> 00:06:08,240
Così fino al primo posto qui, ho
alcune cose JavaScript che sta succedendo.

125
00:06:08,240 --> 00:06:12,470
>> E qui, a quanto pare io ho
un div il cui ID è infodiv,

126
00:06:12,470 --> 00:06:15,290
e alcune informazioni
sta per andare lì.

127
00:06:15,290 --> 00:06:16,374
E poi ho questo modulo.

128
00:06:16,374 --> 00:06:18,081
E all'interno di questa
forma, ho qualcosa

129
00:06:18,081 --> 00:06:20,200
chiamato a Selezionare, che
è solo un menu a discesa

130
00:06:20,200 --> 00:06:22,150
con una serie di opzioni diverse.

131
00:06:22,150 --> 00:06:26,150
E a quanto pare quando questo cambia, quando
l'opzione che è stato selezionato ha

132
00:06:26,150 --> 00:06:30,600
cambiato, io vado a chiamare
qualche funzione cs50Info,

133
00:06:30,600 --> 00:06:33,190
e poi ho intenzione di
passare this.value,

134
00:06:33,190 --> 00:06:35,740
dove questo si riferisce a
l'opzione è stata selezionata,

135
00:06:35,740 --> 00:06:39,820
e il valore è uno di questi qui, opzione
value = uguale vuote ", Blumberg,"

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

137
00:06:42,610 --> 00:06:45,090
>> Così che cosa potrebbe effettivamente
succedere qui quando faccio questo?

138
00:06:45,090 --> 00:06:48,800
Bene, facciamo un
guardare blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Sembra che sia solo un
snippet di codice HTML.

141
00:06:53,924 --> 00:06:56,090
E infatti, quello che spero
sta per accadere qui

142
00:06:56,090 --> 00:07:00,020
è che ho intenzione di essere in grado di collegare
questo Html direttamente nella mia pagina web

143
00:07:00,020 --> 00:07:02,970
senza dover ricaricare
pagina, tale che quando

144
00:07:02,970 --> 00:07:07,510
Scelgo Hannah dal menu a discesa
menù, informazioni su Hannah,

145
00:07:07,510 --> 00:07:11,100
in particolare, tali informazioni
qui in blumberg.html,

146
00:07:11,100 --> 00:07:12,574
è quello che si presenta sulla pagina.

147
00:07:12,574 --> 00:07:13,740
E io non devo aggiornare.

148
00:07:13,740 --> 00:07:16,842
E se ho scelto qualcun altro,
le loro informazioni si presentava.

149
00:07:16,842 --> 00:07:17,550
Come posso fare questo?

150
00:07:17,550 --> 00:07:20,290
Di nuovo, questo richiede
di usare un po 'di AJAX.

151
00:07:20,290 --> 00:07:22,540
E così, ci apriamo ajax.js.

152
00:07:22,540 --> 00:07:25,550
Ed ecco che la funzione, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Se il nome non è nulla, al mio ritorno.

154
00:07:27,410 --> 00:07:31,450
Io non ho intenzione di fare nulla se
l'opzione vuota è stata scelta.

155
00:07:31,450 --> 00:07:35,420
In caso contrario, ho intenzione di
creare un nuovo XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
E poi ho intenzione di dire, quando la
modifiche readyState, chiamano questa funzione.

157
00:07:39,020 --> 00:07:43,630
>> E se il readyState è
4 e lo stato è 200,

158
00:07:43,630 --> 00:07:45,740
qui è un po '
di jQuery sulla linea 13.

159
00:07:45,740 --> 00:07:50,450
Ma tutto quello che sto facendo sta dicendo,
modificare i contenuti del infodiv

160
00:07:50,450 --> 00:07:57,820
per essere quello che tornato come
risposta da parte mia HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Qual è il mio HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Beh, è ​​vero
qui sulla linea 18 e 19.

163
00:08:02,020 --> 00:08:08,550
Linea 18, praticamente sto preparando
una GET richiesta di nome + .html.

164
00:08:08,550 --> 00:08:11,170
E ancora, il nome qui è
l'argomento che era

165
00:08:11,170 --> 00:08:14,280
passato come un parametro per cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Quindi, fondamentalmente, sto passando a qualcun
nome, che era quella serie di opzioni

167
00:08:18,460 --> 00:08:22,980
che abbiamo visto nella
menu a discesa nella forma.

168
00:08:22,980 --> 00:08:24,450
Ricevo quel nome.

169
00:08:24,450 --> 00:08:29,530
E sto dicendo che vorrei che tu
si prega di ottenere per me che file.html,

170
00:08:29,530 --> 00:08:31,020
e quindi inviare la richiesta.

171
00:08:31,020 --> 00:08:34,820
>> E così che onreadystatechange sta andando
essere in ascolto e aspettare e aspettare

172
00:08:34,820 --> 00:08:39,460
e in attesa, finché il readyState
è 4, e lo stato è di 200.

173
00:08:39,460 --> 00:08:44,970
Quindi è pronto per essere servito,
e la richiesta ha avuto successo.

174
00:08:44,970 --> 00:08:49,500
E poi se lo è, sta andando
modificare i contenuti del infodiv

175
00:08:49,500 --> 00:08:53,030
per essere il testo di risposta che sono tornato.

176
00:08:53,030 --> 00:08:54,930
>> Quindi cerchiamo di vedere come questo
potrebbe effettivamente funzionare.

177
00:08:54,930 --> 00:08:58,860
Quindi ci dirigeremo verso il mio browser
finestra, e vedremo qui.

178
00:08:58,860 --> 00:09:01,359
Quindi, diamo uno sguardo a
cosa sta succedendo qui in AJAX.

179
00:09:01,359 --> 00:09:03,400
Così sceglieremo qualcuno
dal menu a discesa.

180
00:09:03,400 --> 00:09:06,079
Quindi, in questo caso, diciamo
basta scegliere Hannah.

181
00:09:06,079 --> 00:09:08,120
E notare che Hannah
informazioni è cambiato,

182
00:09:08,120 --> 00:09:11,030
ma non ho avuto il mio any--
Pagina non del tutto ricaricare.

183
00:09:11,030 --> 00:09:12,190
La roba rimasto.

184
00:09:12,190 --> 00:09:13,320
La maggior parte delle cose siamo stati.

185
00:09:13,320 --> 00:09:14,320
AJAX di prova non è cambiata.

186
00:09:14,320 --> 00:09:16,700
Il pulsante stesso, questo
menu a discesa non è cambiato.

187
00:09:16,700 --> 00:09:18,260
Ma le informazioni non ci ha fatto cambiare.

188
00:09:18,260 --> 00:09:20,218
E a seconda di come
rapidamente mio computer si muove,

189
00:09:20,218 --> 00:09:24,430
in realtà si potrebbe vedere che il contenuto
scompare e poi riappare davvero

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

191
00:09:24,930 --> 00:09:27,320
Questo è il contenuto di essere
eliminato dal infodiv,

192
00:09:27,320 --> 00:09:29,940
e poi sostituito con un
nuova richiesta asincrona.

193
00:09:29,940 --> 00:09:34,410
>> Quindi, se posso passare ad essere dire,
Rob-- e ancora una volta, dare un'occhiata,

194
00:09:34,410 --> 00:09:38,379
e forse vedremo in realtà
scomparire e riapparire in fretta.

195
00:09:38,379 --> 00:09:38,920
Si vede che?

196
00:09:38,920 --> 00:09:41,400
Come appena spuntato via,
e poi riempito?

197
00:09:41,400 --> 00:09:43,640
Questa è la richiesta AJAX
sorta di prendere posto.

198
00:09:43,640 --> 00:09:46,060
E così la seconda
persona che scelgo, io sono

199
00:09:46,060 --> 00:09:50,690
facendo un asincrono diverso
richiesta in un file diverso

200
00:09:50,690 --> 00:09:52,730
che ho sul mio server.

201
00:09:52,730 --> 00:09:55,550
E il contenuto del mio
infodiv stanno aggiornando,

202
00:09:55,550 --> 00:09:58,457
sulla base di quale di questi che ho scelto.

203
00:09:58,457 --> 00:10:00,040
Ecco, questo è davvero tutto quello che c'è da AJAX.

204
00:10:00,040 --> 00:10:04,090
Esso ci permette di rendere queste asincrona
richieste, gli aggiornamenti di una pagina.

205
00:10:04,090 --> 00:10:06,450
Senza dover
aggiornare l'intera pagina,

206
00:10:06,450 --> 00:10:08,520
stiamo andando a ottenere nuovi
contenuto da esso facendo

207
00:10:08,520 --> 00:10:11,170
una nuova richiesta fresco al server.

208
00:10:11,170 --> 00:10:13,420
E così, le nostre pagine possono diventare
un po 'più dinamica.

209
00:10:13,420 --> 00:10:15,128
>> E come si ottiene più
e più avanzate, è

210
00:10:15,128 --> 00:10:17,700
potrebbe ottenere le cose come
per esempio, la vostra casella di posta,

211
00:10:17,700 --> 00:10:19,850
dove non c'è bisogno di fare nulla.

212
00:10:19,850 --> 00:10:22,560
Non è necessario fare clic su un
menu a discesa o fare clic su qualsiasi cosa,

213
00:10:22,560 --> 00:10:25,920
e tutto ad un tratto, il tuo ultimo
e-mail si presenta nella parte superiore.

214
00:10:25,920 --> 00:10:27,840
Questo è anche solo una richiesta Ajax.

215
00:10:27,840 --> 00:10:30,460
Ajax sta richiedendo il tuo
server, il server di posta elettronica,

216
00:10:30,460 --> 00:10:33,360
inviare tramite tutte le informazioni
sulle vostre ultime email,

217
00:10:33,360 --> 00:10:38,110
e cambiare ciò che si vede sul
schermo per essere il vostro più recente serie di messaggi di posta elettronica.

218
00:10:38,110 --> 00:10:41,080
E se avete uno nuovo
là, il contenuto di tale div

219
00:10:41,080 --> 00:10:44,580
cambierà per riflettere
il contenuto aggiornato.

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

221
00:10:45,480 --> 00:10:47,500
Questo è CS50.

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