Was sind die Unterschiede zwischen JSON und JSONP?

Question

In Bezug auf Format, Dateityp und praktische Verwendung?

Answer 1

JSON

JSON (JavaScript-Objekt-Notation) ist ein bequemer Weg, um Daten zwischen Anwendungen zu transportieren, insbesondere wenn das Ziel eine JavaScript-Anwendung ist.

Exemple :

Hier ist ein minimales Beispiel, das JSON als Transportmittel für die Serverantwort verwendet. Der Client stellt eine Ajax-Anfrage mit der jQuery-Shorthand-Funktion $.getJSON. Der Server generiert einen Hash, formatiert ihn als JSON und gibt ihn an den Client zurück. Der Client formatiert diesen und fügt ihn in ein Seitenelement ein.

Server:

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

Kunde:

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

Ausgabe:

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

JSONP (JSON mit Auffüllung)

JSONP ist eine einfache Möglichkeit, Browser-Beschränkungen beim Senden von JSON-Antworten aus verschiedenen Domänen vom Client aus zu umgehen.

Die einzige Änderung auf der Client-Seite mit JSONP ist das Hinzufügen eines Callback-Parameters zur URL

Server:

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

Kunde:

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

Ausgabe:

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

Answer 2

"JSONP ist JSON mit zusätzlichem Code" wäre zu einfach für die reale Welt. Nein, man muss kleine Unstimmigkeiten haben. Wo bleibt der Spaß am Programmieren, wenn alles funktioniert einfach ?

Es stellt sich heraus JSON ist keine Teilmenge von JavaScript . Wenn Sie nur ein JSON-Objekt nehmen und es in einen Funktionsaufruf verpacken, werden Sie eines Tages von seltsamen Syntaxfehlern heimgesucht, so wie ich heute.

Answer 3

JSONP ist eine einfache Möglichkeit, Browser-Beschränkungen beim Senden von JSON-Antworten aus verschiedenen Domänen vom Client aus zu umgehen.

Bei der praktischen Umsetzung des Konzepts gibt es jedoch subtile Unterschiede, die oft nicht klar erläutert werden.

Hier ist ein einfaches Tutorial, das JSON und JSONP Seite an Seite zeigt.

Der gesamte Code ist auf Github frei verfügbar und eine Live-Version findet sich unter http://json-jsonp-tutorial.craic.com