1. ホーム
  2. javascript

[解決済み] JSONPとは何か、なぜ作られたのか?

2022-03-18 17:19:18

質問

JSONはわかるが、JSONPはわからない。 ウィキペディアのJSONに関する文書 は、JSONPの検索結果のトップになっている(いた)。それにはこう書いてある。

<ブロッククオート

JSONP または "JSON with padding" は、呼び出し自体の入力引数としてプレフィックスを指定する JSON 拡張である。

え?何のコール?そんなの意味ないじゃん。JSONはデータフォーマットです。呼び出しはない。

は、その 第2検索結果 という名前の人がいます。 レミー JSONPについてこんなことを書いています。

<ブロッククオート

JSONPはスクリプトタグインジェクションで、サーバーからのレスポンスをユーザーが指定した関数に渡します。

なんとなくわかるんだけど、やっぱり意味がわからない。


では、JSONPとは何でしょうか?なぜ作られたのか(どんな問題を解決するのか)?そして、なぜそれを使うのでしょうか?


追記 : この度、作成した JSONPのための新しいページ に基づいて、JSONPについて明確かつ徹底的な説明がなされています。 ジュベネマ の回答がありました。

解決方法は?

実は、それほど複雑なことではないんです......。

ドメイン example.com にリクエストを行いたい場合、ドメイン example.net . そのためには クロスドメイン の境界、つまり ダメダメ を、ほとんどのブラウザで使用することができます。

この制限を回避するアイテムが <script> タグを使用します。scriptタグを使用する場合、ドメインの制限は無視されますが、通常の環境では、本当に する その結果、スクリプトが評価されるだけです。

入る JSONP . JSONPが有効なサーバーにリクエストを行うとき、サーバーにあなたのページについて少し伝える特別なパラメータを渡します。そうすることで、サーバーは、あなたのページが処理できる方法で、レスポンスをうまくまとめることができるのです。

たとえば、サーバーが callback を使用して、JSONP 機能を有効にします。そうすると、リクエストは次のようになります。

http://www.example.net/sample.aspx?callback=mycallback

JSONPがなければ、これは次のような基本的なJavaScriptオブジェクトを返すかもしれません。

{ foo: 'bar' }

しかし、JSONPでは、サーバーが"callback"パラメータを受け取ると、少し違った形で結果をラップして、次のような結果を返します。

mycallback({ foo: 'bar' });

ご覧の通り、指定したメソッドが呼び出されるようになりました。つまり、ページ内でコールバック関数を定義しているわけです。

mycallback = function(data){
  alert(data.foo);
};

そして、スクリプトが読み込まれると、それが評価され、あなたの関数が実行されるのです。これでクロスドメインリクエストの出来上がりです!

また、JSONPの大きな問題点として、リクエストの制御ができなくなることも指摘しておきます。たとえば、適切な失敗コードを取得する方法がないのです。その結果、リクエストを監視するためにタイマーを使用することになり、これは常に少し疑わしいものです。の提案は JSONRequest は、クロスドメインスクリプティングを許可し、セキュリティを維持し、リクエストを適切に制御できるようにするための素晴らしい解決策です。

最近(2015年)のことです。 CORS は、JSONRequestと比較して推奨されるアプローチです。JSONPは、古いブラウザをサポートするためにまだ有用ですが、セキュリティの影響を考えると、選択の余地がない場合を除き、CORSがより良い選択となります。