jQueryを使ったAjax入門

JSONPへのアクセスの為のAjaxの設定

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

ぜひご覧ください。

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

字幕

このレッスンでは jQuery を使ってJSONP 形式のレスポンスデータを取得するための設定方法について解説していきます。まずはダウンロードしてきたこちらの頭が 03_06 から始まるフォルダーの中に入っているこれら3つのファイルをエディターで開いて下さい。そしてこれがそれらのファイルを開いた状態です。今回はこちらの index.js ファイルとそしてこちらの data2.json ファイルを中心に見ていきます。それでは早速ファイルの中身を見ていきましょう。今回は JSONP へアクセスするためのAjax の設定ということですので注目して頂きたい部分はこちらの部分と、こちらの部分になります。そしてこちらの data2.json ファイルにも注目して下さい。では普通の JSON の時とどのように違うのか見ていきましょう。まずこちらの Ajax の設定項目ですがこちらの dataType の方をJSON の場合はこちらにjson と書いておけばよかったのですがJSONP の場合はこの様に jsonp という風に設定しておきます。そしてこちらが新たに登場した設定項目になるのですがjsonpCallback と書いてますね。 これは Ajax のリクエストの対象となる URLファイルの中に書かれているJSONP で利用する関数をこちらに書いてあります。今回、こちらの data2.json ファイルがその JSONP 形式になるのですがこの JSONP 形式の内まずこちらの波括弧から波括弧までの間この部分が JSON のデータ形式となっていてこちらがその関数になっていますので今回はこちらの関数の名前shopData を此方に書いてあげます。この時、この関数の後の括弧までは書く必要ありませんのでご注意下さい。そして最後にターゲットとなる URL ですね。今回はこちらの変数target_url にそのターゲットとなるファイルの URLを書いているのですが今回は data2.json としています。これで JSONP への Ajax のリクエストの設定が完了となります。ですので、主に此方の部分ですね。此方の部分に注意してJSONP にアクセスする時は設定するようにして下さい。以上でレッスンは終了です。今回は jQuery を使ってJSONP 形式のレスポンスデータを取得するための設定方法について解説いたしました。

jQueryを使ったAjax入門

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

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

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

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

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