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