JSONとJSONPの違いは何ですか？

フォーマットは賢く、ファイルタイプは賢く、実用は賢明ですか？

JSONPは、パディング付きのJSONです。つまり、最初に文字列を置き、その前後に括弧を2つ付けます。例えば：

//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});

その結果、JSONをスクリプトファイルとしてロードできます。以前にという関数を設定したfunc場合、スクリプトファイルの読み込みが完了すると、その関数は1つの引数（JSONデータ）で呼び出されます。これは通常、JSONデータを使用したクロスサイトAJAXを可能にするために使用されます。example.comが上記のJSONPの例のようなJSONファイルを提供していることがわかっている場合は、example.comドメインに属していない場合でも、次のようなコードを使用してファイルを取得できます。

function func(json){
  alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);

基本的に、同じ生成元のポリシーにより、AJAXを介して別のドメインからJSONデータをリクエストすることはできません。AJAXを使用すると、ページが既にロードされた後にデータをフェッチし、コードが実行された後に関数を呼び出すことができます。AJAXは使用できませんが、注入は許可されています<script>、独自のページにタグれており、他のドメインでホストされているスクリプトを参照することが許可されています。

通常、これを使用してjQueryなどのCDNからのライブラリを含めます。ただし、これを悪用して、代わりにデータをフェッチするために使用することができます。JSONはすでに有効なJavaScript（ほとんどの場合））ですが、スクリプト/データの読み込みがいつ完了したかを知る方法がなく、アクセスしない限り、JSONをスクリプトファイルに返すことはできません。変数に割り当てられるか、関数に渡されます。代わりに、準備ができたら、代わりに関数を呼び出すようにWebサービスに指示します。

たとえば、証券取引所APIからいくつかのデータをリクエストし、通常のAPIパラメータとともに、などのコールバックを提供します?callback=callThisWhenReady。次に、Webサービスは関数でデータをラップし、次のように返しますcallThisWhenReady({...data...})。スクリプトが読み込まれるとすぐに、ブラウザーはそれを（通常どおり）実行しようとします。これにより、任意の関数が呼び出され、必要なデータが提供されます。

これは、匿名関数を呼び出す代わりに、名前付き関数を使用する必要があることを除いて、通常のAJAX要求とほとんど同じように機能します。

jQueryは、一意に名前が付けられた関数を作成してそれを渡すことにより、実際にシームレスにこれをサポートします。これにより、必要なコードが実行されます。

JSONPを使用すると、JSONオブジェクトに渡されるコールバック関数を指定できます。これにより、同じオリジンポリシーをバイパスして、外部サーバーからウェブページのJavaScriptにJSONを読み込むことができます。

JSONPは「JSON with Padding」の略で、さまざまなドメインからデータをロードするための回避策です。スクリプトをDOMのヘッドにロードするので、自分のドメインにロードされているかのように情報にアクセスでき、クロスドメインの問題を回避できます。

jsonCallback(
{
    "sites":
    [
        {
            "siteName": "JQUERY4U",
            "domainName": "http://www.jquery4u.com",
            "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets."
        },
        {
            "siteName": "BLOGOOLA",
            "domainName": "http://www.blogoola.com",
            "description": "Expose your blog to millions and increase your audience."
        },
        {
            "siteName": "PHPSCRIPTS4U",
            "domainName": "http://www.phpscripts4u.com",
            "description": "The Blog of Enthusiastic PHP Scripters"
        }
    ]
});

(function($) {
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.sites);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);

これで、JSONPとJSONコンテンツの周りに作成したコールバック関数を使用して、AJAX経由でJSONをリクエストできます。出力はオブジェクトとしてのJSONである必要があり、オブジェクトは何でも制限なしにデータを使用できます。

JSONPは基本的に、データをラップした関数呼び出しのような追加のコードを含むJSONです。これにより、解析中にデータを操作できます。

JSON

JSON（JavaScript Object Notation）は、特に宛先がJavaScriptアプリケーションである場合に、アプリケーション間でデータを転送する便利な方法です。

例：

以下は、サーバー応答のトランスポートとしてJSONを使用する最小限の例です。クライアントは、jQuery省略関数$ .getJSONを使用してAjaxリクエストを作成します。サーバーはハッシュを生成し、それをJSONとしてフォーマットして、クライアントに返します。クライアントはこれをフォーマットし、ページ要素に配置します。

サーバ：

get '/json' do
 content_type :json
 content = { :response  => 'Sent via JSON',
            :timestamp => Time.now,
            :random    => rand(10000) }
 content.to_json
end

クライアント：

var url = host_prefix + '/json';
$.getJSON(url, function(json){
  $("#json-response").html(JSON.stringify(json, null, 2));
});

出力：

  {
   "response": "Sent via JSON",
   "timestamp": "2014-06-18 09:49:01 +0000",
   "random": 6074
  }

JSONP（JSON with Padding）

JSONPは、クライアントからさまざまなドメインからJSON応答を送信するときのブラウザー制限を克服する簡単な方法です。

JSONPを使用したクライアント側の唯一の変更は、URLにコールバックパラメータを追加することです

サーバ：

get '/jsonp' do
 callback = params['callback']
 content_type :js
 content = { :response  => 'Sent via JSONP',
            :timestamp => Time.now,
            :random    => rand(10000) }
 "#{callback}(#{content.to_json})"
end

クライアント：

var url = host_prefix + '/jsonp?callback=?';
$.getJSON(url, function(jsonp){
  $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
});

出力：

 {
  "response": "Sent via JSONP",
  "timestamp": "2014-06-18 09:50:15 +0000",
  "random": 364
}

リンク： http : //www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

「JSONPは追加のコードを含むJSONである」というのは現実の世界では簡単すぎるでしょう。いいえ、違いはほとんどありません。すべてがあれば、プログラミングでの楽しみは何ですかだけの作品？

判明したJSONはJavaScriptのサブセットではありません。JSONオブジェクトを取得して関数呼び出しでラップするだけだと、ある日、今日のような奇妙な構文エラーに悩まされることになります。

JSONPは、クライアントからさまざまなドメインからJSON応答を送信するときのブラウザー制限を克服する簡単な方法です。

しかし、アプローチの実際の実装には、しばしば明確に説明されない微妙な違いが含まれます。

JSONとJSONPを並べて表示する簡単なチュートリアルを次に示します。

すべてのコードはGithubで無料で入手でき、ライブバージョンはhttp://json-jsonp-tutorial.craic.comで見つけることができます。