[音楽再生] DOUG LLOYD：だから1より 概念のソートこと の傘下滝のソート JavaScriptは、AJAXと呼ばれるものです。 この時点までは、私たちの JavaScriptでの相互作用 プッシュする制限されています ボタンと何かが起こります。 具体的には、 たまたま何か 当社のウェブサイトを見て、変化を感じています。 右？ 特に同様に、中 ドキュメントオブジェクトモデルの動画、 私は、背景色を変更しました。 私がいることをやったときには、私は持っていませんでした 特別な余分な要求をすることができません。 私がすることを要求する必要はありませんでした サーバーは私に新しいページを送信します。 私はちょうど私が既に持っていたものに変更しました。 私は、私のページをリロードする必要はありませんでした 物事は間違いなく変化し、 そのためには、素晴らしいことです。 しかし、いくつかのは間違いなくあります マニュアルユーザーとの対話は、関係します。 AJAXはできますクールな技術であり、 私たちは、ページのコンテンツを更新します、 だけでなく、見た目と 再読み込みすることなく、感じています。 

そして、時によって特異的に私 ページのコンテンツを更新すると言います、 私たちは書き換え言っていません JavaScriptを使用してページ。 私たちは実際に要求言っています サーバーからより多くの情報 ページがリロードする必要はありません。 

のビットの今その種 より高度なテクニック 我々は話をするつもりだということ このビデオでは約。 我々はいくつかの相互作用を持っているつもりです。 私たちが行うときしかし、私はあることを行っています Webサーバへの要求を行います。 この場合、ただ何 私のApache Webサーバーを実行しています。 私は、追加の作ることにするつもりです 要求私は、Webページを訪問していながら、 私のページが更新されません。 

それだけに起こっています 非同期的に私のページを更新します。 そして、それは、実際に、です これは、AJAXの略、 非同期JavaScriptとXMLです。 XMLはマークアップの別の一種であります 言語、あなたが並べ替えることができます ただ、HTMLのように考えます。 それは、全く同じものではありませんですが、 それは、基本的にはマークアップ言語です。 だから、非同期です JavaScriptとマークアップ言語。 

だから、これを使用するために AJAX technique-- AJAX 別々のプログラミング言語ではありません。 それはただの一種です techniques--我々のセット 特別に作成する必要があります JavaScriptオブジェクト、どの XMLHttpRequestを呼ばれています。 今は、これを行うことは非常に簡単です。 私達はちょうど言うVAR、何でも 私たちは、このオブジェクトを呼び出したいです、 新しいXMLHttpRequestのに等しいです。 そして今、我々は今取得しています オブジェクトのAJAXの並べ替え、 またはのXMLHttpRequest ことができますオブジェクト、 私たちは、非同期的にページを更新します。 

我々はこの新しいを得た後 オブジェクト、このXMLHttpRequestを、 私たちはそのために何かをしなければなりません onreadystatechange行動。 Onreadystatechange 動作が本当にあります あなたが要求を行うとき、 ウェブページ、ページへ ステップ数を通過します。 まず、要求が送信されていません。 次に、要求はされています 送信されたが、作用はありません。 その後、要求が作用されています。 その後、要求があります あなたに戻って送信されています。 

その後、要求があります 完全にあなたのページにロードされました。 それらは異なる状態です。 そして、私たちは私たちを設定する必要があります 新しいXMLHttpRequestオブジェクト 準備ができたら状態変化を変更します。 典型的には、我々は、これを行います 無名関数を定義します 我々はより精通しています JavaScriptの今、その 準備ができたら、状態変化と呼ばれています。 それは本当にはるかにそれよりもありません。 私達はちょうど定義することになるだろう 無名関数、ソートの好きなもの 我々はでていました JavaScriptを、私たちは希望 匿名関数を持っています クリックでに反応します、 または私達はのマップをしていたとき 配列内のさまざまなオブジェクト。 

何かが起こったとき、 何かがクリックされました。 この場合、それだけで何か 起こったときのページの状態 変更。 他の二つのプロパティがあります ソートof--そうではないですしていること あるプロパティのみ XMLHttpRequestの固有の、 しかし、彼らは非常に重要なものです。 readyStateのと呼ばれるものがあります、 これは、おそらく推測できるように、 onreadystatechangeに関連しています。 それは実際にあなたに伝えます readyStateのは何ですか。 0、1、2、3、および4は そこの可能性、 彼らソートのおよそ ものに対応 私はちょうど秒前話していました。 

そして、ステータス、どの うまくいけば、すべてがOKに行った場合、 短くされており、200で 以下のため、もちろん、[OK]を、 私たちは、HTTPからに精通しています。 だから我々は期待していることを私たちの準備状態 4であり、私たちの状況は200です。 そして、私たちの準備完了状態の場合 4、および応答であります 置くこと準備ができています ページ、およびステータスが200です、 我々は行うことができました すべて成功し、 今、私たちは非同期にすることができます ページを更新します リロードすることなく、 それの全体の内容。 

我々は何が起こるかを定義した後 onreadystatechange行動に、 私たちはそのreadyStateのチェックしました 4であり、状態は、200であります その後、私たちが行う必要があるのです 非同期を開きます ちょうど作っている要求、 HTTPは、一般的に要求をGET。 ただ、プログラムでそれをやって、 代わりに、私たちのWebブラウザを介しての。 そして、我々はその要求を送信します。 それでは、多分これを行います コンテキスト内でのように見えますか？ そこでここでは、その関数です AJAXリクエストを扱っています。 OK？ そして、私は任意に言いました それは、引数を受け入れます。 そして、この一種の ここでは一般的なスケルトン。 冒頭では、我々が得ます 自分自身の新しいXMLHttpRequestオブジェクト。 その後、私は設定する必要があります onreadystatechange行動。 そして私は言うつもりです 時readyStateの変更、 私はあなたがこの関数を呼び出したいです。 

尋ねるしようとしています 質問、readyStateの場合 readyStateのが変更された場合、4 4、および状態であるとすると、200でした、 私たちは、私は、成功した要求を持っていました ページに何かをしたいです。 そして、私たちは見てみましょう 何の例で その何かは、第二にあるかもしれません。 それでは、今私が定義されています 私の無名関数、 私の応答関数たびに readyStateの変更。 

それでは、私は開く必要があり Openメソッドを使用して要求。 そして、私はその要求を送信します。 そしてのは、見てみましょう より具体的な例 AJAXは、当社のウェブページ上で何ができるかの。 だから私はここに非常に単純なを持っています home.htmlというページ。 そして、私は情報を持って行きます ここでは、ドロップダウンメニューのいくつかの並べ替え。 

そして、我々は、1秒間にこれを再検討します。 しかし、私たちは今取るべきだと思います 実際のソースコードを見てください。 だから、私はhome.htmlを開くつもりです。 そして、我々は何が起こっているのかがわかります。 そこでここでは非常に上部にまで、私が持っています 起こっているいくつかのJavaScriptのもの。 

そしてここで、私は明らかにしてい IDがinfodivあるDIV、 そして、いくつかの情報 そこに行くために起こっています。 そして私は、このフォームを持っています。 そして、この内部 フォーム、私は何かを持っています これは、選択と呼ばれます ただ、ドロップダウンメニューです さまざまなオプションの束を持ちます。 そして、どうやらそれが変化したときに、時 選択されたオプションを有しています 変更、私がコールするつもりです いくつかの機能cs50Info、 そして私はするつもりです this.valueに渡し、 これはどこを指し どのオプションを選択しました、 その値は、ここでのオプションはこれらのいずれかであります 値=等しい空、「ブラムバーグ、 " 「ボーデン」「ちゃん」と「マラン。」 

それでは、実際にかもしれません 私はこれを行う場合はこちら起こりますか？ さて、見てみましょう blumberg.htmlを見てください。 それだけだように見えます 一部のHTMLのスニペット。 そして実際に、私が何を望んでいます ここで起こってい 私はプラグインできるようにするつもりされています 私のWebページに直接このHTML リロードすることなく、 ページ、その結果、 私は、ドロップダウンからハンナを選択 メニュー、ハンナの詳細については、 具体的には、この情報 ここblumberg.htmlで、 ページ上に表示するものです。 そして、私はリフレッシュする必要はありません。 そして、私は、誰か他の人を選択した場合 その情報が表示さだろう。 私はこれをどのように行うのですか？ 繰り返しますが、これは必要です 私たちは、いくつかのAJAXを使用しています。 だから、我々はajax.js.を開きます そしてここで、cs50Infoその関数です。 名前は何もされていない場合、私は返します。 場合、私は何もするつもりはありません 空のオプションが選択されています。 そうでなければ、私はするつもりです 新しいのXMLHttpRequestを作成します。 そして私は、ときに言うつもりです readyStateの変更は、この関数を呼び出します。 

そして、readyStateのであれば 4、ステータスが200です、 ここで少しです ライン13上のjQueryの。 しかし、私がやっているすべては言っています、 infodivの内容を変更します 私のように戻ったものは何でもすることが 私のHttpRequestからの応答。 

私のHttpRequestとは何ですか？ まあ、それはそうです ここでライン18および19に。 18行目、私は基本的に準備しています 名+ .htmlのためのGETリクエスト。 そして再び、名前がここにあります た引数 cs50Infoにパラメータとして渡されました。 

したがって、基本的に、私が誰かのを渡しています オプションの設定された、名前 我々はで見たこと ドロップダウンメニューを形に。 私はその名前を取得しています。 そして私は私があなたを好きと言っています 私のためにそのfile.htmlを入手してください、 そして、その要求を送信します。 

そしてその結果、onreadystatechangeが起こっています リスニング、待って待っていることにします そして、readyStateのまで、待っています 4で、ステータスが200です。 だから、提供されるのを準備ができて、 その要求は成功しました。 それがある場合そして、それがために起こっています infodivの内容を変更します 私が戻った応答テキストであることを。 

それでは、どのようにこれを見てみましょう 実際に働くかもしれません。 だから私たちは私のブラウザに向かうだろう 窓、そして私たちがここで見てみましょう。 それでは、見てみましょう 何は、AJAX、ここで起こっています。 だから我々は誰かを選択します ドロップダウンメニューから。 したがって、この場合には、してみましょう ただハンナを選択します。 そして予告そのハンナさん 情報が変更されました、 私はany--を持っていなかった私の ページが完全にリロードされませんでした。 ものが滞在しました。 スタッフのほとんどは、宿泊しました。 AJAXテストは変化しませんでした。 ボタン自体は、この ドロップダウンメニューを変更しませんでした。 しかし、そこに情報が変更をしました。 そして、どのように応じて すぐに私のコンピュータに移動し、 あなたが実際にコンテンツいることを見るかもしれません 消えた後、実際に再表示されます すぐに。 それがされたコンテンツです infodivから削除し、 そして、その後に置き換え 新しい非同期要求。 

だから私はそれが言うように切り替えた場合、 Rob--と再びは、見て、 そして多分私達は実際にそれが表示されます 消えるとすぐに再表示されます。 あなたはそれを参照してください？ どのようにそれだけで、離れてポップ そしてそれは補充しますか？ それはAJAXリクエストです 場所を取るの一種。 そしてそうに応じて 人私は私は、選択しました 別の非同期を作ります 別のファイルへのリクエスト 私は自分のサーバー上に持っていること。 私のと内容 infodivが更新され、 私が選択したこれらのどれに基づきます。 だから、本当にAJAXで全部です。 それは、私たちはこれらの非同期を行うことができます リクエスト、ページを更新。 せずに ページ全体を更新し、 我々は新たな取得するつもりです することにより、そこからコンテンツ サーバへの新しい新鮮な要求。 だから、私たちのページがなることができます かなりよりダイナミック。 

そして、我々は多くを得るよう あなたは、と、より高度な 以下のようなものを得るかもしれません たとえば、メールの受信トレイ、 どこに何もする必要はありません。 あなたは、クリックする必要はありません ドロップダウンメニューか何かをクリックして、 そして突然、あなたの最新の 電子メールには、最上部に表示されます。 それはまた、単にAjaxリクエストです。 アヤックスはあなたを要求しています サーバー、メールサーバー、 すべての情報を介して送信します 最新の電子メールについて、 そしてあなたが見るもの変えます 電子メールのあなたの最も新しい設定する画面が表示されます。 そして、あなたは新しいものを持っている場合で そこに、そのdi​​v要素の、コンテンツ 反映するように変更されます 更新されたコンテンツ。 私はダグロイドです。 これはCS50です。