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
>> 道格·劳埃德：所以多一个
那种概念了

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 Web服务器。

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
我们只说无功，无论
我们要调用这个对象，

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
所以我们有一个成功的请求，我
想要做一些事来的页面。

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
>> 在这里，我显然有
一个div一个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
被称为选择，这
仅仅是一个下拉菜单

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
“鲍登”，“陈”和“马兰”。

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
是我将能够堵塞
这个网站直接进入我的网页

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
和突然，你的最新的
电子邮件显示在顶部。

214
00:10:25,920 --> 00:10:27,840
这也只是一个Ajax请求。

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
如果你有一个新的
该分区的存在，则内容

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