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

2
00:00:00,500 --> 00:00:04,810
[MUZYKI]

3
00:00:04,810 --> 00:00:06,940
>> DOUG LLOYD: Więc jeszcze jeden
rodzaj przekonania, że

4
00:00:06,940 --> 00:00:12,120
rodzaj spadnie pod parasolem
JavaScript jest coś o nazwie AJAX.

5
00:00:12,120 --> 00:00:15,310
Do tego momentu, nasza
Interakcja z JavaScript

6
00:00:15,310 --> 00:00:17,727
ograniczono do pchania
przycisk i coś się dzieje.

7
00:00:17,727 --> 00:00:19,560
A konkretnie,
coś, co się dzieje,

8
00:00:19,560 --> 00:00:22,950
jest nasze strony wyglądać i czuć się zmiany.

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

10
00:00:23,450 --> 00:00:26,540
Podobnie, jak w szczególności, w
Dokument model obiektu wideo

11
00:00:26,540 --> 00:00:29,060
Zmieniłam kolor tła.

12
00:00:29,060 --> 00:00:33,240
Ale gdy to zrobiłem, nie miałem
robić żadnych specjalnych dodatkowych żądań.

13
00:00:33,240 --> 00:00:36,800
Nie miałem do żądania
serwer wysłać mi nową stronę.

14
00:00:36,800 --> 00:00:39,620
Właśnie zmienił to, co już było.

15
00:00:39,620 --> 00:00:42,245
I nie trzeba było odświeżyć moją stronę,
i rzeczy, na pewno zmieniło,

16
00:00:42,245 --> 00:00:43,760
tak, to świetnie.

17
00:00:43,760 --> 00:00:48,400
Ale na pewno niektóre
Instrukcja interakcji użytkownika zaangażowany.

18
00:00:48,400 --> 00:00:53,140
AJAX to fajna technika, która pozwala
nas do aktualizacji treści strony,

19
00:00:53,140 --> 00:00:55,750
i to nie tylko wygląd i
czują, bez przeładowywania.

20
00:00:55,750 --> 00:00:58,610
>> I specjalnie kiedy
powiedzieć, aktualizacji treści strony,

21
00:00:58,610 --> 00:01:01,990
Nie mówię, że możemy przepisać
strona przy użyciu JavaScript.

22
00:01:01,990 --> 00:01:06,560
Mówię tak naprawdę zażądać
więcej informacji z serwera

23
00:01:06,560 --> 00:01:08,640
bez naszą stronę konieczności przeładowania.

24
00:01:08,640 --> 00:01:10,850
>> Teraz, jakby trochę
bardziej zaawansowane techniki

25
00:01:10,850 --> 00:01:11,950
że będziemy rozmawiać
o w tym filmie.

26
00:01:11,950 --> 00:01:13,720
Mamy zamiar mieć trochę interakcji.

27
00:01:13,720 --> 00:01:17,750
Ale kiedy my, mam zamiar być
co żądań do serwera WWW.

28
00:01:17,750 --> 00:01:21,140
W tym przypadku, tylko to, co jest
kolejny mój serwer Apache.

29
00:01:21,140 --> 00:01:25,010
Mam zamiar być co dodatkowe
wniosków, a ja jestem odwiedzenie strony internetowej,

30
00:01:25,010 --> 00:01:26,890
ale moja strona nie odświeży.

31
00:01:26,890 --> 00:01:30,000
>> To po prostu będzie
asynchronicznie zaktualizować stronę.

32
00:01:30,000 --> 00:01:31,840
I to jest w rzeczywistości,
które AJAX oznacza,

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

34
00:01:35,400 --> 00:01:37,910
XML jest inny rodzaj znaczników
język i można sortować z

35
00:01:37,910 --> 00:01:39,680
myśleć o tym, jak HTML.

36
00:01:39,680 --> 00:01:42,990
To nie jest całkiem to samo, ale
to w zasadzie tylko język znaczników.

37
00:01:42,990 --> 00:01:47,770
Więc to jest asynchroniczne
JavaScript i język znaczników.

38
00:01:47,770 --> 00:01:50,590
>> Tak więc w celu wykorzystania tego
AJAX technique-- AJAX

39
00:01:50,590 --> 00:01:52,230
nie jest odrębnym językiem programowania.

40
00:01:52,230 --> 00:01:55,300
To jest po prostu coś w rodzaju
zestaw techniques-- my

41
00:01:55,300 --> 00:01:57,870
należy utworzyć specjalny
Obiekt JavaScript, który

42
00:01:57,870 --> 00:02:00,689
Nazywa się to XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Teraz, to bardzo łatwo to zrobić.

44
00:02:01,980 --> 00:02:04,550
My po prostu powiedzieć, var, cokolwiek
chcemy nazwać ten obiekt,

45
00:02:04,550 --> 00:02:07,030
równa się nowy XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
A teraz mamy teraz uzyskać
AJAX rodzaj obiektu,

47
00:02:11,050 --> 00:02:14,370
lub XMLHttpRequest
Obiekt, który pozwoli

48
00:02:14,370 --> 00:02:18,360
nam asynchronicznie aktualizować naszą stronę.

49
00:02:18,360 --> 00:02:23,100
>> Po tym, jak zdobyć ten nowy
Obiekt ten XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
musimy coś zrobić, aby jej
onreadystatechange zachowanie.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
zachowanie jest naprawdę

52
00:02:30,360 --> 00:02:34,080
kiedy złożyć wniosek
do strony internetowej, na stronie

53
00:02:34,080 --> 00:02:35,880
przechodzi przez szereg etapów.

54
00:02:35,880 --> 00:02:37,370
Po pierwsze, wniosek nie został wysłany.

55
00:02:37,370 --> 00:02:39,860
Następnie wniosek został
wysłane, ale nie wykorzystane.

56
00:02:39,860 --> 00:02:41,580
Następnie wniosek został rozpatrzony.

57
00:02:41,580 --> 00:02:43,680
Następnie wniosek jest
wysłany z powrotem do Ciebie.

58
00:02:43,680 --> 00:02:46,930
>> Następnie wniosek jest
w pełni załadowany na swojej stronie.

59
00:02:46,930 --> 00:02:48,640
Są różne stany.

60
00:02:48,640 --> 00:02:53,890
A więc musimy Wyznaczamy
Nowy obiekt XMLHttpRequest

61
00:02:53,890 --> 00:02:58,740
zmienić, gdy gotowe zmiany stanu.

62
00:02:58,740 --> 00:03:01,925
I zazwyczaj robimy to
definiowania anonimową funkcję, która

63
00:03:01,925 --> 00:03:04,490
jesteśmy zaznajomieni z od
JavaScript teraz, że

64
00:03:04,490 --> 00:03:09,840
jest wywoływana, gdy gotowe zmiany stanu.

65
00:03:09,840 --> 00:03:11,340
To naprawdę nie jest dużo więcej.

66
00:03:11,340 --> 00:03:14,340
Jesteśmy po prostu będzie wyznaczającą
funkcja anonimowa, jakby to, co

67
00:03:14,340 --> 00:03:16,440
robiliśmy w
JavaScript, gdzie będzie

68
00:03:16,440 --> 00:03:18,750
mają anonimową funkcję
Odpowiadanie na na kliknięcia,

69
00:03:18,750 --> 00:03:23,230
lub gdy robimy mapę
różne obiekty w tablicy.

70
00:03:23,230 --> 00:03:25,220
>> Coś się stało, kiedy
coś kliknął.

71
00:03:25,220 --> 00:03:28,810
W tym przypadku, to jest po prostu coś jest
dzieje się, gdy stan naszej stronie

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

73
00:03:30,160 --> 00:03:32,730
Istnieją dwa inne właściwości
które są rodzajem of-- nie są one

74
00:03:32,730 --> 00:03:35,524
tylko właściwości, które są
nieodłącznym XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
ale są dość istotne.

76
00:03:36,940 --> 00:03:39,815
Jest coś, co nazywa się readyState,
które, jak można się domyślić,

77
00:03:39,815 --> 00:03:41,750
jest związane z onReadyStateChange.

78
00:03:41,750 --> 00:03:44,250
To rzeczywiście mówi,
co readyState jest.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3 i 4 są
że istnieją możliwości,

80
00:03:46,289 --> 00:03:48,080
i rodzaj grubsza
odpowiadać co

81
00:03:48,080 --> 00:03:50,030
Właśnie rozmawiałem około sekundę temu.

82
00:03:50,030 --> 00:03:53,100
>> A następnie stan, który
mam nadzieję, że jeśli wszystko poszło OK,

83
00:03:53,100 --> 00:03:56,710
200, który jest krótki
na, oczywiście, OK,

84
00:03:56,710 --> 00:03:58,330
której jesteśmy zaznajomieni z http.

85
00:03:58,330 --> 00:04:03,735
Więc mamy nadzieję, że nasze państwo gotowe
jest cztery, a nasz status jest 200.

86
00:04:03,735 --> 00:04:07,940
A jeśli nasz stan gotowości
jest cztery, i w odpowiedzi

87
00:04:07,940 --> 00:04:11,490
jest gotowe do wprowadzenia na
Strona, a stan jest 200,

88
00:04:11,490 --> 00:04:13,580
byliśmy w stanie zrobić
wszystko się pomyślnie,

89
00:04:13,580 --> 00:04:17,209
teraz możemy asynchronicznie
aktualizować naszą stronę

90
00:04:17,209 --> 00:04:21,730
bez konieczności przeładowania
cała zawartość tego.

91
00:04:21,730 --> 00:04:27,710
>> Po tym jak definiuje to, co się dzieje,
do zachowania onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
a my sprawdziliśmy, że readyState
jest 4 i status jest 200,

93
00:04:31,020 --> 00:04:33,900
to wszystko, co musisz zrobić, to
otworzyć asynchroniczne

94
00:04:33,900 --> 00:04:38,530
wniosek, który jest tylko co
ogólnie HTTP GET żądania.

95
00:04:38,530 --> 00:04:41,950
Po prostu robi to programowo,
zamiast za pośrednictwem naszej przeglądarki internetowej.

96
00:04:41,950 --> 00:04:43,786
I wtedy możemy wysłać ten wniosek.

97
00:04:43,786 --> 00:04:45,660
Więc co to może być
wygląda w kontekście?

98
00:04:45,660 --> 00:04:49,790
Więc tutaj jest to funkcja, która
dotyczy żądań AJAX.

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

100
00:04:50,290 --> 00:04:52,430
A ja arbitralnie powiedział
przyjmuje argument.

101
00:04:52,430 --> 00:04:55,550
I to na coś w rodzaju
Ogólnie szkielet tutaj.

102
00:04:55,550 --> 00:05:00,890
Na samym początku, mamy
sobie nowy obiekt XMLHttpRequest.

103
00:05:00,890 --> 00:05:03,830
Potem trzeba ustawić
onreadystatechange zachowanie.

104
00:05:03,830 --> 00:05:06,970
I tak mam zamiar powiedzieć,
gdy zmienia się readyState,

105
00:05:06,970 --> 00:05:10,110
Chcę, żebyś wywołać tę funkcję.

106
00:05:10,110 --> 00:05:12,570
>> Które zamierza zapytać
pytanie, czy w readyState

107
00:05:12,570 --> 00:05:17,240
Jest 4, jeśli readyState uległa zmianie
jako 4, a status był 200

108
00:05:17,240 --> 00:05:20,799
więc mieliśmy udany wniosek, że
chcesz coś zrobić na tej stronie.

109
00:05:20,799 --> 00:05:22,590
A my spojrzeć
na przykład, co

110
00:05:22,590 --> 00:05:25,010
że coś może być nie w drugim.

111
00:05:25,010 --> 00:05:27,830
Tak więc, teraz mam zdefiniowane
moja anonimowa funkcja,

112
00:05:27,830 --> 00:05:31,340
moja funkcja odpowiedzi, kiedy
zmiany readyState.

113
00:05:31,340 --> 00:05:37,120
>> Więc po prostu trzeba otworzyć
żądać, za pomocą metody Open.

114
00:05:37,120 --> 00:05:39,160
A potem, wyślę ten wniosek.

115
00:05:39,160 --> 00:05:41,980
I rzućmy okiem na
bardziej konkretny przykład

116
00:05:41,980 --> 00:05:46,290
czego AJAX może zrobić na naszych stronach internetowych.

117
00:05:46,290 --> 00:05:49,740
Więc mam tutaj bardzo prosta
Strona nazywa home.html.

118
00:05:49,740 --> 00:05:53,620
A ja mam informację idzie
tu jakieś menu rozwijanego.

119
00:05:53,620 --> 00:05:55,390
>> A my ponownie to w ciągu jednej sekundy.

120
00:05:55,390 --> 00:05:59,150
Ale myślę, że powinniśmy teraz podjąć
spojrzeć na rzeczywiste kodu źródłowego.

121
00:05:59,150 --> 00:06:01,080
I tak, mam zamiar otworzyć home.html.

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

123
00:06:03,490 --> 00:06:04,740
I zobaczymy, co się dzieje.

124
00:06:04,740 --> 00:06:08,240
Więc się na samej górze tutaj, mam
niektóre rzeczy JavaScript, który się dzieje.

125
00:06:08,240 --> 00:06:12,470
>> A tu, najwyraźniej mają
div, którego ID jest infodiv,

126
00:06:12,470 --> 00:06:15,290
i kilka informacji
będzie tam.

127
00:06:15,290 --> 00:06:16,374
I wtedy mam ten formularz.

128
00:06:16,374 --> 00:06:18,081
A wewnątrz tego
Formularz, mam coś

129
00:06:18,081 --> 00:06:20,200
nazywany Wybierz, które
jest tylko menu rozwijane

130
00:06:20,200 --> 00:06:22,150
z kilka różnych opcji.

131
00:06:22,150 --> 00:06:26,150
I najwyraźniej, kiedy to zmienia się, kiedy
opcją która została wybrana jest

132
00:06:26,150 --> 00:06:30,600
zmieniło, mam zamiar zadzwonić
niektóre funkcje cs50Info,

133
00:06:30,600 --> 00:06:33,190
a potem mam zamiar
przechodzą w this.value,

134
00:06:33,190 --> 00:06:35,740
w których to dotyczy
która opcja została wybrana,

135
00:06:35,740 --> 00:06:39,820
i wartość jest jednym z nich tutaj, opcja
wartość = równa się pusty, "Blumberg"

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

137
00:06:42,610 --> 00:06:45,090
>> Więc co może faktycznie
stało tu, kiedy to zrobić?

138
00:06:45,090 --> 00:06:48,800
Cóż, weźmy
spojrzeć na blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Wygląda na to, że to tylko
fragment jakiegoś HTML.

141
00:06:53,924 --> 00:06:56,090
A w rzeczywistości, co mam nadzieję,
wydarzy się tutaj

142
00:06:56,090 --> 00:07:00,020
to będę mógł podłączyć
to HTML bezpośrednio do mojej strony internetowej

143
00:07:00,020 --> 00:07:02,970
bez konieczności przeładowania
strony, tak, że gdy

144
00:07:02,970 --> 00:07:07,510
Wybieram Hannah z rozwijanej listy
menu, informacje o Hannah,

145
00:07:07,510 --> 00:07:11,100
w szczególności informacje
tu w blumberg.html,

146
00:07:11,100 --> 00:07:12,574
jest to, co pojawia się na stronie.

147
00:07:12,574 --> 00:07:13,740
I nie mam, aby odświeżyć.

148
00:07:13,740 --> 00:07:16,842
A gdybym wybrał kogoś innego,
ich informacje będą wyświetlane.

149
00:07:16,842 --> 00:07:17,550
W jaki sposób mogę to zrobić?

150
00:07:17,550 --> 00:07:20,290
Ponownie, to wymaga
nas, aby korzystać z niektórych AJAX.

151
00:07:20,290 --> 00:07:22,540
I tak, będziemy otwierać ajax.js.

152
00:07:22,540 --> 00:07:25,550
I tu jest ta funkcja, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Jeśli nazwa jest nic, wracam.

154
00:07:27,410 --> 00:07:31,450
Nie zamierzam nic robić, jeśli
opcja pusta został wybrany.

155
00:07:31,450 --> 00:07:35,420
W przeciwnym razie, mam zamiar
utworzyć nowy XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
A potem mam zamiar powiedzieć, kiedy
readyState zmiany, wywołać tę funkcję.

157
00:07:39,020 --> 00:07:43,630
>> A jeśli readyState jest
4, a stan 200

158
00:07:43,630 --> 00:07:45,740
tu jest trochę
jQuery na linii 13.

159
00:07:45,740 --> 00:07:50,450
Ale to wszystko robię mówi,
zmienić treść infodiv

160
00:07:50,450 --> 00:07:57,820
za co wróciłem jako
odpowiedzi z mojej HttpRequest.

161
00:07:57,820 --> 00:07:59,590
>> Jakie jest moje HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Cóż, to prawda
tutaj, na linii 18 i 19.

163
00:08:02,020 --> 00:08:08,550
Linia 18, jestem w zasadzie przygotowania
GET wniosek o nazwie + .html.

164
00:08:08,550 --> 00:08:11,170
I znowu, nazwa tutaj jest
argument, że był

165
00:08:11,170 --> 00:08:14,280
przekazywana jako parametr do cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Więc w zasadzie, jestem przekazując ktoś tu
wymienić, co było, że zestaw opcji

167
00:08:18,460 --> 00:08:22,980
które widzieliśmy w
menu rozwijane w formie.

168
00:08:22,980 --> 00:08:24,450
Dostaję to nazwisko.

169
00:08:24,450 --> 00:08:29,530
A ja mówię, że chciałbym do
prosimy o uzyskanie dla mnie, że file.html,

170
00:08:29,530 --> 00:08:31,020
a następnie wysłać ten wniosek.

171
00:08:31,020 --> 00:08:34,820
>> I tak, że onreadystatechange będzie
za słuchanie i czeka i czeka

172
00:08:34,820 --> 00:08:39,460
i czeka, aż readyState
wynosi 4, a stan jest 200.

173
00:08:39,460 --> 00:08:44,970
Więc to jest gotowe do podania,
i wniosek był udany.

174
00:08:44,970 --> 00:08:49,500
A jeśli tak jest, to będzie
zmienić treść infodiv

175
00:08:49,500 --> 00:08:53,030
jako tekst odpowiedzi, że wróciłem.

176
00:08:53,030 --> 00:08:54,930
>> Zobaczmy więc, jak to
może faktycznie pracują.

177
00:08:54,930 --> 00:08:58,860
Będziemy więc udać się do mojej przeglądarce
okno, a zajmiemy się tutaj.

178
00:08:58,860 --> 00:09:01,359
Warto więc przyjrzeć się
co tu się dzieje w technologii AJAX.

179
00:09:01,359 --> 00:09:03,400
Będziemy więc wybrać kogoś
z menu rozwijanego.

180
00:09:03,400 --> 00:09:06,079
Więc w tym przypadku, niech
wystarczy wybrać Hannah.

181
00:09:06,079 --> 00:09:08,120
A informacja, że ​​Hannah
informacje zostały zmienione

182
00:09:08,120 --> 00:09:11,030
ale nie mam any-- moje
Strona nie całkowicie odświeżyć.

183
00:09:11,030 --> 00:09:12,190
Rzeczy pozostał.

184
00:09:12,190 --> 00:09:13,320
Większość rzeczy została.

185
00:09:13,320 --> 00:09:14,320
AJAX testu nie zmieni.

186
00:09:14,320 --> 00:09:16,700
Sam przycisk, to
w menu rozwijanym nie uległ zmianie.

187
00:09:16,700 --> 00:09:18,260
Ale informacje nie uległy zmianie.

188
00:09:18,260 --> 00:09:20,218
Oraz w zależności od tego, jak
szybko moje ruchy komputerowe,

189
00:09:20,218 --> 00:09:24,430
rzeczywiście może zobaczyć, że treści
znika i pojawia się ponownie naprawdę

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

191
00:09:24,930 --> 00:09:27,320
To treść jest
usunięty z infodiv,

192
00:09:27,320 --> 00:09:29,940
a następnie otrzymuje z
nowe asynchroniczne żądanie.

193
00:09:29,940 --> 00:09:34,410
>> Więc jeśli mogę przełączyć go do powiedzenia,
Rob-- i znowu spojrzeć,

194
00:09:34,410 --> 00:09:38,379
i być może będziemy go zobaczyć w rzeczywistości
znikają i pojawiają się szybko.

195
00:09:38,379 --> 00:09:38,920
Widzisz to?

196
00:09:38,920 --> 00:09:41,400
Jak to po prostu wpadliśmy z dala,
a następnie napełnić?

197
00:09:41,400 --> 00:09:43,640
To żądanie AJAX
rodzaju miejsce.

198
00:09:43,640 --> 00:09:46,060
I tak, w zależności od
Osoba wybrać, jestem

199
00:09:46,060 --> 00:09:50,690
co innego asynchroniczne
wniosek do innego pliku

200
00:09:50,690 --> 00:09:52,730
że mam na moim serwerze.

201
00:09:52,730 --> 00:09:55,550
A zawartość mojego
infodiv aktualizowania,

202
00:09:55,550 --> 00:09:58,457
w oparciu o które z nich wybrałem.

203
00:09:58,457 --> 00:10:00,040
Więc tak naprawdę wszystko jest do technologii AJAX.

204
00:10:00,040 --> 00:10:04,090
To pozwala nam na te asynchroniczne
wnioski, aktualizacje strony.

205
00:10:04,090 --> 00:10:06,450
Bez konieczności
odświeżania całej strony,

206
00:10:06,450 --> 00:10:08,520
mamy zamiar uzyskać nowy
Zawartość z niego poprzez

207
00:10:08,520 --> 00:10:11,170
nowy świeży żądanie do serwera.

208
00:10:11,170 --> 00:10:13,420
I tak nasze strony mogą stać się
trochę bardziej dynamiczny.

209
00:10:13,420 --> 00:10:15,128
>> A ponieważ mamy więcej
i bardziej zaawansowanym

210
00:10:15,128 --> 00:10:17,700
może uzyskać takie rzeczy jak
powiedzmy, skrzynce pocztowej,

211
00:10:17,700 --> 00:10:19,850
gdzie nie musisz nic robić.

212
00:10:19,850 --> 00:10:22,560
Nie musisz do kliknięcia
menu rozwijanego lub kliknij niczego,

213
00:10:22,560 --> 00:10:25,920
i nagle, swoje najnowsze
e-mail pojawia się na górze.

214
00:10:25,920 --> 00:10:27,840
To też po prostu żądania AJAX.

215
00:10:27,840 --> 00:10:30,460
Ajax prosi swoje
serwer, serwer e-mail,

216
00:10:30,460 --> 00:10:33,360
wysłać na wszystkich informacji
o swoich najnowszych wiadomości e-mail,

217
00:10:33,360 --> 00:10:38,110
i zmieniając to, co widzisz na
Ekran będzie twój najnowszy zestaw wiadomości e-mail.

218
00:10:38,110 --> 00:10:41,080
A jeśli masz nowy w
tam, wówczas zawartość tej div

219
00:10:41,080 --> 00:10:44,580
zmieni się odpowiednio,
zaktualizowana treść.

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

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

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