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
>> DOUG LLOYD：だから1より
概念のソートこと

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
私たちが行うときしかし、私はあることを行っています
Webサーバへの要求を行います。

28
00:01:17,750 --> 00:01:21,140
この場合、ただ何
私のApache Webサーバーを実行しています。

29
00:01:21,140 --> 00:01:25,010
私は、追加の作ることにするつもりです
要求私は、Webページを訪問していながら、

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
>> そして、ステータス、どの
うまくいけば、すべてがOKに行った場合、

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
だから我々は期待していることを私たちの準備状態
4であり、私たちの状況は200です。

86
00:04:03,735 --> 00:04:07,940
そして、私たちの準備完了状態の場合
4、および応答であります

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
ただ、プログラムでそれをやって、
代わりに、私たちのWebブラウザを介しての。

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
OK？

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
readyStateのが変更された場合、4
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
>> そして、我々は、1秒間にこれを再検討します。

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あるDIV、

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
私はプラグインできるようにするつもりされています
私のWebページに直接この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
ここで少しです
ライン13上のjQueryの。

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のためのGETリクエスト。

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
そして、あなたは新しいものを持っている場合で
そこに、そのdi​​v要素の、コンテンツ

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