☰

JSONP とは何かを、わかりやすい言葉で説明してくれる人はいますか? [重複] 質問する

tag-icon • tag-icon jquery jsonp
JSONP とは何かを、わかりやすい言葉で説明してくれる人はいますか? [重複] 質問する

パディング付きでJSONPあることはわかっています。JSON

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

これがどのように機能するかを誰か説明してくれませんか?

ベストアンサー1

序文：

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

JSONP ( JSON with Padding ) は、Web ブラウザーのクロスドメイン ポリシーを回避するためによく使用される方法です。(ブラウザーによって別のサーバーにあると認識される 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 応答の処理で注意すべきもう 1 つの違いは、JSON 応答の解析エラーは、responseText を評価する試行を try/catch ステートメントでラップすることでキャッチできるということです。JSONP 応答の性質上、応答の解析エラーはキャッチできない JavaScript 解析エラーを引き起こします。

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

jQueryの使用

使用の有用性jQueryJSONP リクエストを行う際の利点は、jQuery がバックグラウンドですべての作業を実行することです。

デフォルトでは、jQuery では&callback=?AJAX リクエストの URL に を含める必要があります。jQuery は指定された関数を取得し、それに一意の名前を割り当てて、グローバル スコープで公開します。次に、内の疑問符を割り当てられた名前に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);

おすすめ記事