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
Како и особено, во
документ Object Model видео,

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 technique-- AJAX

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
Ние само се каже var, што и
ние сакаме да се нарекуваме овој објект,

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
Значи тука е функција што
се занимава со Ајакс барања.

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, јас сум во основа се подготвува
А Земи барање за име + 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
би можеле да се работи како
да речеме, вашата e-mail сандаче,

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
и одеднаш, вашиот најновите
е-маил се појавува на врвот.

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