Ajaxにおける jsonp、jsonpCallback 使い方まとめ

jQueryのAjaxから外部APIを呼び出したとき。

なぜかこんなエラーが発生・・・

Access to XMLHttpRequest at 'http://express.heartrails.com/api/json?method=getStations&x=139.76608399999998&y=35.681382' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORSエラーが出てしまい、APIからJSONが返ってきません。

この解決方法が jsonp を使うこと

ここでは具体的な事例も交え、
jQueryのAjaxから jsonp を設定する方法をまとめます。

このページの目次

Ajaxでjsonpが必要なのはこういう場面
Ajaxではjsonpでコールバック名を指定できる
実際にjsonp、jsonCallbackを使ってみた

Ajaxでjsonpが必要なのはこういう場面

あるとき路線・駅名の地理情報APIを使ってました。

▼ コチラのAPI

express.heartrails.com

API | HeartRails Express | 路線／駅名／最寄駅データサービス

http://express.heartrails.com/api.html#nearest

路線／駅名／最寄駅データサービス

緯度と経度指定で最寄りの駅データが調べられる奴です。

次の緯度・経度でデータ取得しようとしたんです。、

緯度： 35.681382
経度： 139.766084

試しに書いてみたのが次コード

var apiUrl = 'http://express.heartrails.com/api/json'
  + '?method=getStations&x=139.766084&y=35.681382';
$.ajax({
  url: apiUrl,
  type: 'GET'
})
.done(function(data){
  $.each(data,function(i, item){
    console.log('item : ', item);
  });
});

var apiUrl = 'http://express.heartrails.com/api/json'

+ '?method=getStations&x=139.766084&y=35.681382';

$.ajax({

url: apiUrl,

type: 'GET'

})

.done(function(data){

$.each(data,function(i, item){

console.log('item : ', item);

});

これで冒頭のエラーが出てしまいました。

いわゆるクロスドメイン（CORS）というやつです。

PisukeCode - Web開発まとめ

【JavaScript】blocked by CORS policy エラーの簡単な解決法

https://pisuke-code.com/js-blocked-by-cors-policy-error

たとえば Ajax とか XMLHttpRequest とか Fetch API　とか・・・それで外部スクリプトを呼び出そうとすると起こるのが次のエラーAccess to fetch at 'https://example.com/hoge.php' from origin 'http://outer.example.com/' has been blocked by CORS policyいわゆる CORSエラーと呼ばれてるもので、複数のドメイン間でHTTP通信しようとしたときに起こるらしいです。ここではこのCORSエラーの簡単な解決策についてまとめました。このCORSエラーはどんな時に起きる？自分がこのエラーに遭遇したのはブログパ...

詳しくは上記事で解説した通り。

ただし外部APIの場合、この記事の解決策は使えません。

外部APIのサーバー側でのヘッダー付与なんてできないので。

そこで該当APIのリファレンスを見直してみます。

すると jsonp というパラメーターを発見

▼ 駅情報取得 API ページより引用

jsonp
string （オプション）
JSON 形式のデータを受け取るためのコールバック関数名
JSON 形式のリクエスト URL にのみ対応

コールバック関数名の指定

これがどうやら必須みたいです。

Ajaxではjsonpでコールバック名を指定できる

そこで jsonp が何なのか・・・

少し調べてみました。

公式によると jsonp は次の役割があるみたいです。

▼ jQuery公式によるjsonpの解説

"jsonp": Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.

引用元　：　https://api.jquery.com/jquery.ajax/

▼ この説明の簡単な意訳

"jsonp": JSONPを利用してJSONデータを読み込みする。コールバック名を指定するにはURLの最後に "?callback=?" を付与すればOKです。キャッシュオプションがtrueに設定されていない限り、クエリ文字列パラメーター「_ = [TIMESTAMP]」をURLに追加することにより、キャッシュを無効にします。

Ajax時に dataType: 'jsonp' と渡して使えます。

そしてもう１つ大事なものがあります。

それが jsonpCallback というAjaxオプション

これも公式による説明を引用するとこんな感じ

▼ jQuery公式による jsonpCallback の解説

jsonpCallback
Type: String or Function()
Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. As of jQuery 1.5, you can also use a function for this setting, in which case the value of jsonpCallback is set to the return value of that function.

▼ この説明の簡単な意訳

jsonpCallback
データ型: String or Function()
JSONPリクエスト時のコールバック関数名の指定に使える。この値はjQueryによって生成されたランダムな名前の代わりに使われます。...（中略）...jQuery1.5以降より、この設定に function も使えるようになりました。その場合、jsonpCallbackの値はその関数の戻り値に設定されます。

これにコールバック名を渡して使うみたいですね。

実際にjsonp、jsonCallbackを使ってみた

では先ほどのコードでjsonpを使ってみます。

▼ 先ほど紹介した駅データAPI

express.heartrails.com

API | HeartRails Express | 路線／駅名／最寄駅データサービス

http://express.heartrails.com/api.html#nearest

路線／駅名／最寄駅データサービス

このAPIでは jsonp パラメーターから、レスポンス（JSON形式）を受け取るためのコールバック関数名を指定できるという話でした。

まともなAPIなら、こういったjsonp向けオプションがあるはずです。

それでは、先ほどのコードをjsonp向けに改造します。

▼ このAPIをjsonpで利用するコード例

var apiUrl = 'http://express.heartrails.com/api/json'
  + '?method=getStations&x=139.76608399999998&y=35.681382'
  + '&jsonp=callback';
$.ajax({
  url: apiUrl,
  type: 'GET',
  dataType: 'jsonp',
  jsonpCallback: 'callback'
})
.done(function(data){
  $.each(data,function(i, item){
    console.log(item);
  });
});

var apiUrl = 'http://express.heartrails.com/api/json'

+ '?method=getStations&x=139.76608399999998&y=35.681382'

+ '&jsonp=callback';

$.ajax({

url: apiUrl,

type: 'GET',

dataType: 'jsonp',

jsonpCallback: 'callback'

})

.done(function(data){

$.each(data,function(i, item){

console.log(item);

});

▼ コンソールの出力結果（JSON化済）

{"station":[{"name":"東京","prefecture":"東京都","line":"JR上野東京ライン","x":139.766103,"y":35.681391,"postal":"1000005","distance":"00m","prev":"上野","next":"新橋"},{"name":"東京","prefecture":"東京都","line":"東北新幹線","x":139.766103,"y":35.681391,"postal":"1000005","distance":"00m","prev":null,"next":"上野"},,...

1	{"station":[{"name":"東京","prefecture":"東京都","line":"JR上野東京ライン","x":139.766103,"y":35.681391,"postal":"1000005","distance":"00m","prev":"上野","next":"新橋"},{"name":"東京","prefecture":"東京都","line":"東北新幹線","x":139.766103,"y":35.681391,"postal":"1000005","distance":"00m","prev":null,"next":"上野"},,...

うん、今度はちゃんと取得できました。

APIによってはjsonpの指定は大事みたいですね。

そうしないとクロスドメインで弾かれるので。

以上、Ajaxでの jsonp、jsonpCallback の使い方でした。

ではまた ($・・)/~~~