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

2
00:00:00,500 --> 00:00:04,810
[Играет музыка]

3
00:00:04,810 --> 00:00:06,940
>> ДАГ Lloyd: Так что еще
рода понятия, что

4
00:00:06,940 --> 00:00:12,120
рода попадает под зонтиком
JavaScript является то, что называется AJAX.

5
00:00:12,120 --> 00:00:15,310
До этого момента, наши
взаимодействие с JavaScript

6
00:00:15,310 --> 00:00:17,727
была ограничена нажать
Кнопка и что-то происходит.

7
00:00:17,727 --> 00:00:19,560
И конкретно,
то, что происходит

8
00:00:19,560 --> 00:00:22,950
наши сайты выглядеть и чувствовать себя изменения.

9
00:00:22,950 --> 00:00:23,450
Правильно?

10
00:00:23,450 --> 00:00:26,540
Как и в частности, в
объектная модель документа видео,

11
00:00:26,540 --> 00:00:29,060
Я изменил цвет фона.

12
00:00:29,060 --> 00:00:33,240
Но когда я это сделал, у меня не было
делать какие-то специальные дополнительные запросы.

13
00:00:33,240 --> 00:00:36,800
У меня не было просить, чтобы
сервер отправить мне новую страницу.

14
00:00:36,800 --> 00:00:39,620
Я только что изменил то, что я уже.

15
00:00:39,620 --> 00:00:42,245
У меня не было, чтобы перезагрузить моей странице,
и вещи определенно изменилось,

16
00:00:42,245 --> 00:00:43,760
Так это здорово.

17
00:00:43,760 --> 00:00:48,400
Но есть, безусловно, некоторые
участие руководство взаимодействие с пользователем.

18
00:00:48,400 --> 00:00:53,140
AJAX является прохладный метод, который позволяет
нам обновить контенте страницы,

19
00:00:53,140 --> 00:00:55,750
и не только взгляд и
чувствую, без перезагрузки.

20
00:00:55,750 --> 00:00:58,610
>> И особенно, когда я
говорят обновления контенте страницы,

21
00:00:58,610 --> 00:01:01,990
Я не говорю, перепишем
страница с помощью JavaScript.

22
00:01:01,990 --> 00:01:06,560
Я говорю, что мы на самом деле просить
больше информации с сервера

23
00:01:06,560 --> 00:01:08,640
без наша страница необходимости перезагрузки.

24
00:01:08,640 --> 00:01:10,850
>> Теперь, вроде немного
более продвинутая техника

25
00:01:10,850 --> 00:01:11,950
что мы собираемся говорить
о в этом видео.

26
00:01:11,950 --> 00:01:13,720
Мы собираемся, чтобы иметь некоторое взаимодействие.

27
00:01:13,720 --> 00:01:17,750
Но когда мы делаем, я буду
делать запросы к веб-серверу.

28
00:01:17,750 --> 00:01:21,140
В этом случае, только что
работает мой веб-сервер Apache.

29
00:01:21,140 --> 00:01:25,010
Я собираюсь делать дополнительные
запросы, пока я посещения веб-страницы,

30
00:01:25,010 --> 00:01:26,890
но моя страница не обновляется.

31
00:01:26,890 --> 00:01:30,000
>> Это просто будет
асинхронно обновить страницу.

32
00:01:30,000 --> 00:01:31,840
И это, на самом деле,
которые AJAX расшифровывается,

33
00:01:31,840 --> 00:01:35,400
является асинхронный JavaScript и XML-.

34
00:01:35,400 --> 00:01:37,910
XML является другой вид разметки
язык, и вы можете сортировать

35
00:01:37,910 --> 00:01:39,680
думать о нем, как и HTML.

36
00:01:39,680 --> 00:01:42,990
Это не совсем то же самое, но
это в основном просто язык разметки.

37
00:01:42,990 --> 00:01:47,770
Так что это асинхронный
JavaScript и язык разметки.

38
00:01:47,770 --> 00:01:50,590
>> Так, чтобы использовать это
AJAX AJAX technique--

39
00:01:50,590 --> 00:01:52,230
не является отдельным языком программирования.

40
00:01:52,230 --> 00:01:55,300
Это просто своего рода
набор techniques-- мы

41
00:01:55,300 --> 00:01:57,870
необходимо создать специальный
Объект JavaScript, который

42
00:01:57,870 --> 00:02:00,689
называется XMLHttpRequest.

43
00:02:00,689 --> 00:02:01,980
Теперь, это очень легко сделать это.

44
00:02:01,980 --> 00:02:04,550
Мы просто скажем, вар, независимо
мы хотим, чтобы назвать этот объект,

45
00:02:04,550 --> 00:02:07,030
равна новый XMLHttpRequest.

46
00:02:07,030 --> 00:02:11,050
И теперь мы уже получены
AJAX рода объекта,

47
00:02:11,050 --> 00:02:14,370
или XMLHttpRequest
Объект, который позволит

48
00:02:14,370 --> 00:02:18,360
нам асинхронно обновлять нашу страницу.

49
00:02:18,360 --> 00:02:23,100
>> После того как мы получили этот новый
объект, это XMLHttpRequest,

50
00:02:23,100 --> 00:02:27,760
мы должны сделать что-то, чтобы его
onreadystatechange поведение.

51
00:02:27,760 --> 00:02:30,360
Onreadystatechange
поведение на самом деле просто

52
00:02:30,360 --> 00:02:34,080
когда вы делаете заявку
на веб-странице, то страница

53
00:02:34,080 --> 00:02:35,880
проходит через ряд шагов.

54
00:02:35,880 --> 00:02:37,370
Во-первых, запрос не был отправлен.

55
00:02:37,370 --> 00:02:39,860
Затем запрос был
отправлено, но не принять соответствующие меры.

56
00:02:39,860 --> 00:02:41,580
Тогда просьба была принять соответствующие меры.

57
00:02:41,580 --> 00:02:43,680
Тогда запрос
отправляется обратно к вам.

58
00:02:43,680 --> 00:02:46,930
>> Затем запрос
полностью загружены на вашей странице.

59
00:02:46,930 --> 00:02:48,640
Это разные государства.

60
00:02:48,640 --> 00:02:53,890
И поэтому мы должны установить наши
Объект XMLHttpRequest новый

61
00:02:53,890 --> 00:02:58,740
меняться, когда изменения в состояние готовности.

62
00:02:58,740 --> 00:03:01,925
И, как правило, мы делаем это,
определение анонимную функцию, которая

63
00:03:01,925 --> 00:03:04,490
мы знакомы с от
JavaScript теперь, что

64
00:03:04,490 --> 00:03:09,840
вызывается при изменении состояние готовности.

65
00:03:09,840 --> 00:03:11,340
Это действительно не намного больше, чем это.

66
00:03:11,340 --> 00:03:14,340
Мы только собираемся быть, определяющих
анонимная функция, вроде как, что

67
00:03:14,340 --> 00:03:16,440
мы делали в
JavaScript, где мы бы

68
00:03:16,440 --> 00:03:18,750
есть анонимную функцию
Ответ на на клик,

69
00:03:18,750 --> 00:03:23,230
или когда мы делали карту
различные объекты в массиве.

70
00:03:23,230 --> 00:03:25,220
>> Что-то произошло, когда
то была нажата.

71
00:03:25,220 --> 00:03:28,810
В этом случае, это просто что-то
происходит, когда состояние нашей странице

72
00:03:28,810 --> 00:03:30,160
изменения.

73
00:03:30,160 --> 00:03:32,730
Есть два свойства
которые вроде of-- они не

74
00:03:32,730 --> 00:03:35,524
только свойства, которые
присущи XMLHttpRequest,

75
00:03:35,524 --> 00:03:36,940
но они довольно важные.

76
00:03:36,940 --> 00:03:39,815
Там что-то называется readyState,
который, как вы можете догадаться,

77
00:03:39,815 --> 00:03:41,750
это связано с onreadystatechange.

78
00:03:41,750 --> 00:03:44,250
Это на самом деле говорит вам,
что readyState есть.

79
00:03:44,250 --> 00:03:46,289
0, 1, 2, 3, и 4
возможности там,

80
00:03:46,289 --> 00:03:48,080
и они вроде примерно
соответствуют тому, что

81
00:03:48,080 --> 00:03:50,030
Я просто говорю о секунду назад.

82
00:03:50,030 --> 00:03:53,100
>> И тогда статус, который
Надеюсь, если все прошло нормально,

83
00:03:53,100 --> 00:03:56,710
200, который является сокращением
для, конечно, хорошо,

84
00:03:56,710 --> 00:03:58,330
который мы знакомы из HTTP.

85
00:03:58,330 --> 00:04:03,735
Таким образом, мы надеемся, что наш готовый состояние
четыре, и наш статус 200.

86
00:04:03,735 --> 00:04:07,940
И если наш готовности
четыре, и ответ

87
00:04:07,940 --> 00:04:11,490
готов поставить на
страницы и статус 200,

88
00:04:11,490 --> 00:04:13,580
мы были в состоянии сделать
все успешно,

89
00:04:13,580 --> 00:04:17,209
Теперь мы можем асинхронно
обновить нашу страницу

90
00:04:17,209 --> 00:04:21,730
без перезагрузки
Все содержание него.

91
00:04:21,730 --> 00:04:27,710
>> После того как мы определили, что происходит
к поведению onreadystatechange,

92
00:04:27,710 --> 00:04:31,020
и мы проверили, что readyState
4, а статус 200,

93
00:04:31,020 --> 00:04:33,900
то все, что мы должны сделать, это
открыть асинхронный

94
00:04:33,900 --> 00:04:38,530
Запрос, который просто делает
HTTP-GET запрос целом.

95
00:04:38,530 --> 00:04:41,950
Просто делать это программно,
а не через наш веб-браузере.

96
00:04:41,950 --> 00:04:43,786
А потом мы отправляем эту просьбу.

97
00:04:43,786 --> 00:04:45,660
Так что, может быть, делает это
выглядеть в контексте?

98
00:04:45,660 --> 00:04:49,790
Так вот, что функция
сделок с AJAX запросов.

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

100
00:04:50,290 --> 00:04:52,430
И я сказал произвольно
он принимает аргумент.

101
00:04:52,430 --> 00:04:55,550
И это своего рода
Вообще скелет здесь.

102
00:04:55,550 --> 00:05:00,890
В самом начале, мы получаем
сами новый объект XMLHttpRequest.

103
00:05:00,890 --> 00:05:03,830
Тогда, мне нужно, чтобы установить
onreadystatechange поведение.

104
00:05:03,830 --> 00:05:06,970
И поэтому я хочу сказать,
при изменении readyState,

105
00:05:06,970 --> 00:05:10,110
Я хочу, чтобы вы вызвать эту функцию.

106
00:05:10,110 --> 00:05:12,570
>> Какой будет спросить
Вопрос, если readyState

107
00:05:12,570 --> 00:05:17,240
4, если readyState изменилось
чтобы быть 4, и состояние было 200,

108
00:05:17,240 --> 00:05:20,799
таким образом, мы имели успешный запрос, я
хочу сделать что-то на эту страницу.

109
00:05:20,799 --> 00:05:22,590
И мы будем смотреть
на пример того, что

110
00:05:22,590 --> 00:05:25,010
что что-то может быть в секунду.

111
00:05:25,010 --> 00:05:27,830
Итак, теперь я определил
мой анонимная функция,

112
00:05:27,830 --> 00:05:31,340
моя функция ответа, когда
в readyState изменения.

113
00:05:31,340 --> 00:05:37,120
>> Тогда я просто нужно, чтобы открыть
запросить, используя открытый метод.

114
00:05:37,120 --> 00:05:39,160
И потом, я отправить эту просьбу.

115
00:05:39,160 --> 00:05:41,980
И давайте взглянем на
более конкретный пример

116
00:05:41,980 --> 00:05:46,290
чего AJAX можно сделать на наших веб-страницах.

117
00:05:46,290 --> 00:05:49,740
Так что у меня здесь очень простой
страница называется home.html.

118
00:05:49,740 --> 00:05:53,620
И я получил информационный идет
здесь и своего рода выпадающего меню.

119
00:05:53,620 --> 00:05:55,390
>> И мы будем вернуться к этому в одну секунду.

120
00:05:55,390 --> 00:05:59,150
Но я думаю, что сейчас мы должны принять
искать по фактической исходного кода.

121
00:05:59,150 --> 00:06:01,080
И так, я собираюсь открыть home.html.

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

123
00:06:03,490 --> 00:06:04,740
И мы увидим, что происходит.

124
00:06:04,740 --> 00:06:08,240
Так до на самом верху здесь, у меня есть
некоторые вещи, которые JavaScript происходит.

125
00:06:08,240 --> 00:06:12,470
>> И вот, я, очевидно, имеют
DIV с идентификатором является infodiv,

126
00:06:12,470 --> 00:06:15,290
и некоторая информация
собирается туда поехать.

127
00:06:15,290 --> 00:06:16,374
А то у меня эту форму.

128
00:06:16,374 --> 00:06:18,081
А внутри этого
форма, я что-то

129
00:06:18,081 --> 00:06:20,200
Выберите называется, что
это просто выпадающее меню

130
00:06:20,200 --> 00:06:22,150
с кучей различных вариантов.

131
00:06:22,150 --> 00:06:26,150
И, видимо, когда, что изменения, когда
вариант, который был выбран имеет

132
00:06:26,150 --> 00:06:30,600
изменилось, я буду называть
некоторая функция cs50Info,

133
00:06:30,600 --> 00:06:33,190
и тогда я буду
перейти в this.value,

134
00:06:33,190 --> 00:06:35,740
где это относится к
какой вариант выбран,

135
00:06:35,740 --> 00:06:39,820
и значение является одним из них здесь, вариант
значение = равно пусто, "Блумберг",

136
00:06:39,820 --> 00:06:42,610
"Боудена", "чан" и "Malan."

137
00:06:42,610 --> 00:06:45,090
>> Так что может на самом деле
произошло здесь, когда я это сделать?

138
00:06:45,090 --> 00:06:48,800
Ну, давайте
посмотреть на blumberg.html.

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

140
00:06:51,330 --> 00:06:53,924
Похоже, что это просто
фрагмент какой-то HTML.

141
00:06:53,924 --> 00:06:56,090
И в самом деле, что я надеюсь,
произойдет здесь

142
00:06:56,090 --> 00:07:00,020
является Я собираюсь быть в состоянии включить
Этот HTML-непосредственно в моей веб-странице

143
00:07:00,020 --> 00:07:02,970
без перезагрузки
страница, так что, когда

144
00:07:02,970 --> 00:07:07,510
Я выбираю Ханна из выпадающего списка
Меню, информация о Ханне,

145
00:07:07,510 --> 00:07:11,100
В частности, это информация
здесь, в blumberg.html,

146
00:07:11,100 --> 00:07:12,574
это то, что показывает на странице.

147
00:07:12,574 --> 00:07:13,740
И я не должен обновить.

148
00:07:13,740 --> 00:07:16,842
И если я выбрал кого-то другого,
их информация будет отображаться.

149
00:07:16,842 --> 00:07:17,550
Как мне это сделать?

150
00:07:17,550 --> 00:07:20,290
Опять же, это требует
нам использовать некоторые AJAX.

151
00:07:20,290 --> 00:07:22,540
И так, мы откроем ajax.js.

152
00:07:22,540 --> 00:07:25,550
А вот в том, что функция, cs50Info.

153
00:07:25,550 --> 00:07:27,410
Если имя ничего, я вернусь.

154
00:07:27,410 --> 00:07:31,450
Я не собираюсь делать что-либо, если
пустая опция была выбрана.

155
00:07:31,450 --> 00:07:35,420
В противном случае, я собираюсь
создать новый XMLHttpRequest.

156
00:07:35,420 --> 00:07:39,020
А потом я собираюсь сказать, когда
readyState изменения, вызвать эту функцию.

157
00:07:39,020 --> 00:07:43,630
>> И если это readyState
4 и статус 200,

158
00:07:43,630 --> 00:07:45,740
вот немного
из JQuery в строке 13.

159
00:07:45,740 --> 00:07:50,450
Но все, что я делаю говорит,
изменить содержимое infodiv

160
00:07:50,450 --> 00:07:57,820
чтобы быть все, что я вернулся, как
Ответ от моего HTTPRequest.

161
00:07:57,820 --> 00:07:59,590
>> Какова моя HttpRequest?

162
00:07:59,590 --> 00:08:02,020
Ну, это верно
здесь, на линии 18 и 19.

163
00:08:02,020 --> 00:08:08,550
Строка 18, я в основном готовится
GET запрос имени + .html.

164
00:08:08,550 --> 00:08:11,170
И снова, имя здесь
аргумент, что было

165
00:08:11,170 --> 00:08:14,280
передается в качестве параметра cs50Info.

166
00:08:14,280 --> 00:08:18,460
>> Так в основном, я передаю в чьих-то
имя, которое было, что набор опций

167
00:08:18,460 --> 00:08:22,980
что мы видели в
в раскрывающемся меню в форме.

168
00:08:22,980 --> 00:08:24,450
Я получаю это имя.

169
00:08:24,450 --> 00:08:29,530
И я говорю, что хочу, чтобы вы
пожалуйста, получить для меня, что file.html,

170
00:08:29,530 --> 00:08:31,020
а затем отправить эту просьбу.

171
00:08:31,020 --> 00:08:34,820
>> И так, что onreadystatechange собирается
быть слушать и ждать и ждать

172
00:08:34,820 --> 00:08:39,460
и не ждать, пока readyState
4, и состояние 200.

173
00:08:39,460 --> 00:08:44,970
Так что это можно подавать на стол,
и запрос был успешным.

174
00:08:44,970 --> 00:08:49,500
И потом, если она есть, она собирается
изменить содержимое infodiv

175
00:08:49,500 --> 00:08:53,030
быть текстовый ответ, что я вернулся.

176
00:08:53,030 --> 00:08:54,930
>> Итак, давайте посмотрим, как это
может на самом деле работать.

177
00:08:54,930 --> 00:08:58,860
Таким образом, мы над головой браузере
окна, и мы будем смотреть здесь.

178
00:08:58,860 --> 00:09:01,359
Итак, давайте взглянем на
что происходит здесь, в AJAX.

179
00:09:01,359 --> 00:09:03,400
Таким образом, мы будем выбирать кого-то
из раскрывающегося меню.

180
00:09:03,400 --> 00:09:06,079
Таким образом, в этом случае, давайте
просто выбрать Ханна.

181
00:09:06,079 --> 00:09:08,120
И заметьте, что Ханна
информация изменилась,

182
00:09:08,120 --> 00:09:11,030
но у меня не было моего any--
страница не сделал полностью перезагрузить.

183
00:09:11,030 --> 00:09:12,190
Материал остался.

184
00:09:12,190 --> 00:09:13,320
Большая часть материала осталась.

185
00:09:13,320 --> 00:09:14,320
AJAX испытаний не изменится.

186
00:09:14,320 --> 00:09:16,700
Сама кнопка, это
в раскрывающемся меню не меняется.

187
00:09:16,700 --> 00:09:18,260
Но есть информация сделал изменения.

188
00:09:18,260 --> 00:09:20,218
И в зависимости от того, как
быстро мой компьютер перемещается,

189
00:09:20,218 --> 00:09:24,430
вы на самом деле можете увидеть, что содержание
исчезает, а затем появляется действительно

190
00:09:24,430 --> 00:09:24,930
быстро.

191
00:09:24,930 --> 00:09:27,320
Это содержание является
удален из infodiv,

192
00:09:27,320 --> 00:09:29,940
и затем заменен на
Новый асинхронный запрос.

193
00:09:29,940 --> 00:09:34,410
>> Так что, если я переключить его будет сказать,
Rob-- и снова, взгляните,

194
00:09:34,410 --> 00:09:38,379
и, возможно, мы увидим его на самом деле
исчезать и появляться быстро.

195
00:09:38,379 --> 00:09:38,920
Ты видишь это?

196
00:09:38,920 --> 00:09:41,400
Как это просто выскочил прочь,
а затем наполнил?

197
00:09:41,400 --> 00:09:43,640
Вот запрос AJAX
рода происходит.

198
00:09:43,640 --> 00:09:46,060
И так в зависимости от
человек я выбираю, я

199
00:09:46,060 --> 00:09:50,690
что делает другой асинхронный
Запрос в другой файл

200
00:09:50,690 --> 00:09:52,730
что у меня есть на моем сервере.

201
00:09:52,730 --> 00:09:55,550
И содержание моего
infodiv обновлении,

202
00:09:55,550 --> 00:09:58,457
на основании которых из них я выбрал.

203
00:09:58,457 --> 00:10:00,040
Так что на самом деле все, что нужно AJAX.

204
00:10:00,040 --> 00:10:04,090
Это позволяет нам, чтобы сделать эти асинхронный
запросы, обновления страницы.

205
00:10:04,090 --> 00:10:06,450
Без того, чтобы
обновить всю страницу,

206
00:10:06,450 --> 00:10:08,520
мы собираемся, чтобы получить новый
Содержание из него путем

207
00:10:08,520 --> 00:10:11,170
новый свежий запрос к серверу.

208
00:10:11,170 --> 00:10:13,420
И так, наши страницы может стать
немного более динамичным.

209
00:10:13,420 --> 00:10:15,128
>> И, как мы получим более
и более продвинутые, вам

210
00:10:15,128 --> 00:10:17,700
может получить такие вещи, как
скажем, ваш почтовый ящик,

211
00:10:17,700 --> 00:10:19,850
где вы не должны ничего делать.

212
00:10:19,850 --> 00:10:22,560
Вы не должны нажать
в раскрывающемся меню или нажмите ничего,

213
00:10:22,560 --> 00:10:25,920
и вдруг, ваш новейший
E-mail появляется в верхней части.

214
00:10:25,920 --> 00:10:27,840
Это также просто просьба Аякс.

215
00:10:27,840 --> 00:10:30,460
Аякс просит ваш
Сервер, сервер электронной почты,

216
00:10:30,460 --> 00:10:33,360
отправить по всей информации
о ваших последних писем,

217
00:10:33,360 --> 00:10:38,110
и изменить то, что вы видите на
Экран будет ваш новейший набор электронных писем.

218
00:10:38,110 --> 00:10:41,080
И если у вас есть новый в
есть, то содержание этого DIV

219
00:10:41,080 --> 00:10:44,580
изменения будут отражаться
обновленный контент.

220
00:10:44,580 --> 00:10:45,480
Я Дуг Ллойд.

221
00:10:45,480 --> 00:10:47,500
Это CS50.

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