[解決済み] JSONPとは何か、素人目にもわかるように説明してくれる人はいませんか？[重複）。

2022-03-24 22:59:11

質問

知っている JSONP は JSON をパディングで囲んでいます。

JSONとは何か、JSONをどう使うかは理解している jQuery.getJSON() . しかし、私はその概念を理解していません。 callback JSONPを導入する際に

どなたか、この仕組みを説明していただけませんか？

どのように解決するのですか？

前置き

この回答は6年以上前のものです。JSONPの概念と応用は変わっていませんが (つまり、この回答の詳細はまだ有効です)、以下のことを行う必要があります。可能な限りCORSを使用する (つまり、あなたのサーバーまたは API はそれをサポートしブラウザサポートが適切です）。 JSONPとしては、固有のセキュリティリスクがある .

JSONP ( パディング付きJSON ) は、一般的に使用される方法です。ウェブブラウザのクロスドメインポリシーをバイパスすることができます。(ブラウザによって異なるサーバーにあると認識されたWebページに対してAJAXリクエストを行うことは許可されていません)。

JSONとJSONPは、クライアントとサーバーで異なる挙動をします。JSONPリクエストは、クライアントとサーバー上で XMLHTTPRequest と関連するブラウザのメソッドを使用します。その代わりに <script> タグが作成され、そのソースにはターゲットの URL が設定されます。このスクリプトタグは、DOMに追加されます（通常は <head> 要素)を使用します。

JSONのリクエストです。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // success
  };
};

xhr.open("GET", "somewhere.php", true);
xhr.send();

JSONPのリクエストです。

var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';

document.getElementsByTagName("head")[0].appendChild(tag);

JSONレスポンスとJSONPレスポンスの違いは、JSONPレスポンス・オブジェクトがコールバック関数の引数として渡される点です。

JSONです。

{ "bar": "baz" }

JSONPです。

foo( { "bar": "baz" } );

を含む JSONP リクエストを見かけるのはこのためです。 callback これは、レスポンスをラップする関数の名前をサーバーが知っているようにするためです。

この関数 が存在する必要があります。 グローバルスコープで その時 は <script> タグはブラウザによって評価されます（リクエストが完了した時点）。

JSONレスポンスとJSONPレスポンスの処理のもう一つの違いは、JSONレスポンスでのパースエラーは、responseText をtry/catch文の中に記述します。JSONPレスポンスの性質上、レスポンスのパースエラーはキャッチできないJavaScriptパースエラーとなります。

どちらの形式でも、リクエストを開始する前にタイムアウトを設定し、レスポンスハンドラでタイムアウトをクリアすることで、タイムアウトエラーを実装することができます。

jQueryの使用

を使用することの有用性 jQuery を使用して JSONP リクエストを行う場合、jQuery は以下のことを行います。 すべての作業 をバックグラウンドで提供します。

デフォルトでは、jQueryは &callback=? は、AJAX リクエストの URL に含まれています。 success 関数に一意な名前をつけて、グローバルスコープに公開します。そして、クエスチョンマーク ? で &callback=? という名前を付けます。

比較可能なJSON/JSONPの実装

以下は、レスポンスオブジェクトを想定しています。 { "bar" : "baz" }

JSONです。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById("output").innerHTML = eval('(' + this.responseText + ')').bar;
  };
};

xhr.open("GET", "somewhere.php", true);
xhr.send();

JSONPです。

function foo(response) {
  document.getElementById("output").innerHTML = response.bar;
};

var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';

document.getElementsByTagName("head")[0].appendChild(tag);

[解決済み] JSONPとは何か、素人目にもわかるように説明してくれる人はいませんか？[重複）。

質問

どのように解決するのですか？

前置き

JSONのリクエストです。

JSONPのリクエストです。

JSONです。

JSONPです。

jQueryの使用

比較可能なJSON/JSONPの実装

JSONです。

JSONPです。

関連

最新

おすすめ