[解決済み] JSONPとは何か、なぜ作られたのか?
質問
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がより良い選択となります。
関連
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み] 正しいJSONコンテンツタイプは何ですか?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] リフレクションとは何か、なぜ有用なのか?
-
[解決済み] MVPとMVC、その違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
vueのグローバルがscss(mixin)を導入。
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
Vueのフィルタの説明
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
[解決済み] JSONPとは何か、素人目にもわかるように説明してくれる人はいませんか?[重複)。