JSONPとは何者か【JSONとの違い・jQuery.ajaxでの利用】

jQueryゴリゴリな環境でJSONPを用いた非同期通信に触れる機会があったが、そもそもJSONPが何者かすら理解してなかったので調べる。

JSONとJSONPの違い

名前からしてJSONを拡張したものかと思っていたが、JSONPはあくまでスクリプト (JavaScript)。

{
  "key1": "value1",
  "key2": "value2"
}

cb({
  "key1": "value1",
  "key2": "value2",
})

厳密には「返り値であるJSONを引数とした、リクエスト時に指定したコールバックを実行するスクリプト」。

他オリジンからデータを取得するため。

もしXMLHttpRequestやFetch APIを利用してクロスドメインに非同期通信を行おうとするとCORSの制約を受けてしまう。

<script src="https://example.com/items?callback=cb"></script>

しかし上記のように<script>のsrcに指定した場合はその制約を受けないので、

ことによりデータの取得 (+処理の実行) が可能になり、この仕組みがJSONPと呼ばれる。

余談だが筆者の場合、前述の仕組みを大して知らなくても簡単にJSONPを用いた非同期通信が実装できた。

$.ajax({
  type: 'GET',
  url: 'https://example.com/items',
  dataType: 'jsonp',
  success(data) {
    alert(data);
  },
});

というのもjQuery.ajax()はJSONP形式に対応しており、上記のように書くだけで下記の一連の処理をjQueryがよしなにやってくれる。

参考