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