web-dev-qa-db-ja.com

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

フォーマットは賢い、ファイルの種類は賢く、実用は賢い？

jsonjsonpjavascript
377
Mohammad

JSONPはパディング付きのJSONです。つまり、先頭に文字列を置き、その周りに一対の括弧を入れます。例えば：

//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);
392
Marius

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

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

たとえば、証券取引所のAPIにデータを要求し、通常のAPIパラメータと共に、callThisWhenReadyのようにコールバックを渡します。その後、Webサービスはデータを私たちの関数でラップして、callThisWhenReady({...data...})のように返します。スクリプトがロードされるとすぐに、ブラウザはそれを実行しようとし（通常どおり）、それが今度は任意の関数を呼び出し、必要なデータを入力します。

これは通常のAJAXリクエストとよく似た働きをしますが、無名関数を呼び出す代わりに、名前付き関数を使う必要があります。

jQueryは実際にこれをシームレスにサポートしています。独自の名前の付いた関数を作成して渡すことで、必要なコードが実行されます。

91
mpen

JSONP を使用すると、JSONオブジェクトに渡されるコールバック関数を指定できます。これにより、同じOriginポリシーを迂回して、外部サーバーからWebページのJavaScriptにJSONをロードすることができます。

65
Alex Wayne

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 &amp; 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でなければならず、これを使用することで、制限なしにデータを使用できます。

30
Sankar

JSONPは基本的に、データをラップする関数呼び出しのように、追加のコードを持つJSONです。解析中にデータを処理することができます。

18
Delan Azabani

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

13
Elangovan

「JSONPはコードを追加したJSONです」というのは実社会にとっては簡単すぎるでしょう。いいえ、違いはほとんどありません。すべてがうまく機能したら、プログラミングの楽しさは何ですか？

結局のところ JSONはJavaScriptのサブセットではありません 。 JSONオブジェクトを受け取ってそれを関数呼び出しでラップするだけである場合、ある日、今日のように奇妙な構文エラーが発生することがあります。

6
Vasiliy Faronov

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

しかし、このアプローチの実際的な実装には、明確に説明されていないことが多い微妙な違いがあります。

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

すべてのコードはGithubから無料で入手でき、ライブバージョンは http://json-jsonp-tutorial.craic.com にあります。

0
faridcs