JSONPをjQueryで利用する[Ajax][カーリルAPI]

2016年3月24日

カーリルの図書館APIによる東京都の図書館情報(JSONP)を、jQueryのAjax通信によって取得します。

 

HTTPS化に伴い、現在本記事内のデモ画面は利用できない状態です。

 

Ajaxを利用して外部データをリクエストする場合、セキュリティの関係上そのリクエストは同じドメイン上にしかできません。これをクロスドメイン制約と呼びます。そこで利用されるのがJSONP(JSON with Padding)です。

 

 

スポンサーリンク

 

 

JSONPとは?


 

JSONPを利用すればAjaxによって外部データを取得することができますが、これはscriptタグの仕組みと同じです。例えばjQueryを読み込む際のscriptタグを見て下さい。ドメインをまたがり(クロスドメイン)外部ファイルを読み込んでいます。これと同様の仕組みを利用したのがJSONPによるAjax通信です。

 

scriptタグ

 

今回扱う以下のようなJSONデータは、

コールバックでラップすることによって、JSONPとして扱えるようになります。例えば以下はcallbackという名前でラップしているJSONPです。

 

 

下記のデモ画面ではカーリルの図書館APIにリクエストした東京都千代田区の図書館情報(JSONP)を、jQueryを利用してAjax通信をおこなっています。

 

デモ画面

 

jsonp_ajax.html(デモ画面)

 

6行目

jQueryのバージョンはHosted Librariesを参照

 

15行目

appkeyには、カーリルの図書館APIを利用するためのアプリケーションキーを設定します。以下のページから取得することができます。またAPIの仕様については「図書館API仕様書」を参照して下さい。

 

カーリル APIダッシュボード

 

21行目

dataTypeについて

 

返ってくるデータの型を指定します。

 

22行目

jsonpについて

 

通常JSONPを取得するリクエストをおこなう場合、URLにcallbackという名のパラメータにコールバック関数名を指定します(パラメータとは下記のURLで言えばformatやpref、cityなどの部分)。カーリルのAPIではformatにJSON形式を指定すれば、デフォルトで&callback=callback(callbackという名のパラメータにcallbackという関数名を指定)が設定されています。

 

もしcallbackという名前のパラメータを利用していないAPIの場合は、その名前をjsonpオプションに指定しておく必要があります。例えば下記のように、コールバック関数名を指定するパラメータにexampleCallbackという名前が利用されているとします。

このような場合、jsonpオプションには「 jsonp:exampleCallback, 」と指定しなければいけません。

 

23行目

jsonpCallbackについて

 

jQueryを使ったAjaxでは、コールバック関数名を特に指定せずにリクエストした場合、自動でコールバック関数名が生成されます。もし自分でコールバック関数名を決めたい場合はjsonpCallbackオプションを利用します。

 

特にコールバック関数名を指定しない場合、

下記の例では「jQuery222032393539301119745_1458786388145」という名が自動で付けられているのが分かります(Safariのデバッグ画面)。

コールバック関数名指定なし

 

 

例えば、もしコールバック関数名にtestCallbackという名を自分で指定した場合、

testCallbackという名のコールバック関数名のJSONPが返ってきます(Safariのデバッグ画面)。

コールバック関数名指定

 

27〜29行目

each関数で返ってきたデータ(JSON形式)を表示させています。32〜34行目の繰り返しによる表示と同じです。返ってくる図書館データのキーの種類に関しては下記の関連ページをご参照下さい。今回はformal(公式の図書館名)とurl_pc(図書館のURL)を取得しています。

 

XMLをパースする[simplexml_load_file][カーリルAPI]

 

 

まとめ


 

あらためてJSONPを利用したAjax通信の流れを内部的な仕組みを含めてまとめてみます。

 

1.URLのcallbackパラメータにコールバック関数名を指定しリクエストする。

2.サーバ(API)からJavaScriptのソースコードが返ってくる。

3.そのソースコードの関数(コールバック関数)をHTML上で実行する。

 

 

今回作成した例では、

callbackパラメータにjQueryは

「jQuery222032393539301119745_1458786388145」という生成した名前のコールバック関数名を付けて、カーリルにリクエストし、返ってきた以下のJavaScriptコードを取得し、実行しています。

 

 

その他関連ページ

JSONデータを取得する[json_decode][カーリルAPI]

 

 

 

LINEで送る
Pocket

Copyright © 2018 思考の葉 All Rights Reserved.  プライバシーポリシー