jQueryを使ったAjax入門

JSONPレスポンスデータの取得

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

ぜひご覧ください。

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

字幕

このレッスンでは jQuery を使ってAjax を実行しJSONP 形式のレスポンスデータを取得する方法について解説していきます。まずはダウンロードしてきたこちらの頭が 03_07 から始まるフォルダーの中に入っているこれら3つのファイルをエディターで開いて下さい。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。今回はこちらの index.js ファイルとこちらの data2.json ファイルを主に使っていきます。それではまずこちらのindex.js ファイルから見ていきましょう。前回のレッスンで JSONP にアクセスするための Ajax の設定を行いました。変更したのは此方の部分でしたね。それでは今回は実際にJSONP のデータにアクセスしてそしてその中に含まれている値にアクセスしてみたいと思います。それでは今回注目して頂きたい部分はこちらの done の中ですね。此方の部分となります。この JSONP を利用してAjax のリクエストを行った場合これは基本的にその結果に対する処理の方法は JSON の時と変わりません。 こちらの done の中のfunction の中にあるこちらのデータの変数に対してこの JSONP の形式で取得してきた此方の部分の JSON のデータが格納されてきます。ですので通常の Json ファイルに対してAjax でアクセスした時と全く同じ結果が返ってくるといった形になります。後は Json ファイルの時と同様にその Json の中に含まれているデータにアクセスできます。その方法も JSON の時と全く同じ方法になります。今回は以前のレッスンでも解説した、こちらの items の中の配列の中にあるこのオブジェクトの要素この3つの要素に対してすべて順番にアクセスしていくという処理をこちらの$.each の関数の部分で実行しています。この部分のプログラムは JSON の時と全く変更はありません。それでは実際にこれらの3つのファイルをサーバー上に設置してブラウザーで動作を確認してみたいと思います。これがそれら3つのファイルをサーバー上に設置してその中の index.html にアクセスした状態となってます。それではこちらの「外部データを取得する」というボタンをクリックしてみましょう。 するとこの様に「成功」というダイアログが表示されてするとこの様に Ajax の結果が表示されてきました。この様に Ajax でJSONP を使って取得してきたデータに対してもJSON と同じ様な形でその中のデータにアクセスすることができます。以上でレッスンは終了です。今回は jQuery を使ってAjax を実行しJSONP 形式のレスポンスデータを取得する方法について解説いたしました。

jQueryを使ったAjax入門

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

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

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

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

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