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
е Asynchronous 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, което е съкращение
за, разбира се, OK,

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
така че ние трябваше успешна заявка, I
искам да направя нещо, за да страницата.

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
>> Така че тогава аз просто трябва да се отвори
поиска, като се използва методът Open.

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
>> И тук, аз очевидно има
Разделение на чието ID е 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
нарича Select, която
е само на падащото меню

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
Аз избирам Hannah от падащото меню
меню, информация за Хана,

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
Line 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 Test не се промени.

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
и изведнъж, най-новата си
имейл появява в горната част.

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