jQueryを使ったAjax入門

Ajaxの実行とJSONレスポンスデータの取得

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryを使って実際にAjaxを実行し、JSON形式のレスポンスデータを取得する方法について解説致します。
講師:
05:18

字幕

このレッスンでは jQuery を使って実際に Ajax を実行しJson 形式のレスポンスデータを取得する方法について解説していきます。まずはダウンロードしてきたこちらの頭が 03_01 のフォルダーの中に入っている、これら3つのファイルをエディターで開いて下さい。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って、今回のレッスンの解説を進めていきたいと思います。今回、利用するファイルはこの3つのファイルの内こちらの index.js ファイルとそしてこちらの data1.json ファイルとなります。こちらの data1.json ファイルは今回の解説のために用意したJson 形式のデータファイルとなっています。今回は実際にこちらのdata1.json ファイルにAjax でアクセスしてみたいと思います。ではこちらの index.js ファイルを見ていきます。まずはこちらの data1.json ファイルにアクセスするためにAjax の設定を行っていきましょう。まずこちらですね。Ajax の設定項目の中にあるこの urlこれはターゲットとなるurl ですが、今回は変数 target_url を指定していて、そしてその変数は此方の部分で作成しています。 今回は此方の data1.json ファイルこれはこちらの index.html ファイルと同じ階層にあるファイルのためにこの様に相対パスでdata1.json と書いておきます。これで target_url の設定が完了しました。そして残りのこちらの部分ですね。まずこちらの type に関しては今回は get を指定していますがこの type に関してはAjax の際にリクエストパラメーターを付加して送信する場合に必要となりますので今回は別になくても大丈夫です。では次にこちらの dataType ですが、今回は Json 形式のデータを取りに行きますのでこちらには json と書いておきます。そして url は先ほど設定いたしましたね。これで Ajax の設定が完了しました。それでは次にこちらの成功した場合の done の中の処理を見ていきましょう。done の中には成功した場合alert で「成功」というダイアログを出してそしてこちらの部分ですね。こちらが注目して頂きたい部分になるのですがconsole.log というものを使ってこちらの data という変数この変数にアクセスしてそしてデータの中身をブラウザーのコンソールに表示しようとしています。 この data にはAjax でリクエストが成功した場合にその結果のデータが格納されてくる変数となりますが今回の場合、成功した場合はこの data1.json のなかに書いてあるこの json のデータがこのデータの中に格納されてきます。それを console.log を使って確認しましょうということですね。それでは実際にこれらのファイルをサーバー上に設置してその動作を確認してみたいと思います。これがサーバーに設置した index.htmlファイルにアクセスしている状態です。まずはこの状態でブラウザーの開発ツールを起動しておきましょう。今回のこのコースではブラウザーは Firefox を使っていますが開発ツールは他の Chrome 等といったブラウザーにも搭載されています。Firefox の場合はまずこちらのボタンを押してそしてこちらの「開発ツール」をクリックします。そしてその次にこちらの「Web コンソール」をクリックします。するとこの様な画面が表示されてきます。では実施にこちらの「外部データを取得する」というボタンをクリックしてみましょう。するとこの様に「成功」という文字がダイアログで表示されてきます。 そして OK を押すとこちらの部分に何か表示されてきました。これが先程の console.log で出力されたデータ変数の中身となっています。こちらのオブジェクトをクリックするとこの様に下に表示されてきましたね。これは先程の data1.jsonのなかに書かれていたJson 形式のデータですね。それが見やすい形でこの様に表示されてきてる形となります。この様に表示されてきているということは今回の Ajax でのリクエストは無事成功したという形になりますね。それではエディターに戻ります。以上でレッスンは終了です。今回は jQuery を使って実際に Ajax を実行しJson 形式のレスポンスデータを取得する方法について解説いたしました。

jQueryを使ったAjax入門

AjaxとはAsynchronous JavaScript + XML の略で、JavaScriptを使って非同期通信を利用しWebサイトのコンテンツを動的に書き換える手法です。このコースではモダンなWebサイト作るうえで必須の技術となっているAjaxjについて、その機能を簡単に実装できるjQueryを使って解説します。

1時間30分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年09月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。