Was sind die Unterschiede zwischen JSON und JSONP?

Question

Formatweise, Dateityp und praktische Verwendung?

Answer 1

JSONP ist JSON mit Padding, dh Sie setzen eine Zeichenfolge am Anfang und ein Paar Klammern um sie herum. Beispiel:

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

Das Ergebnis ist, dass Sie den JSON als Skriptdatei laden können. Wenn Sie zuvor eine Funktion mit dem Namen func eingerichtet haben, wird diese Funktion mit einem Argument aufgerufen. Dies sind die JSON-Daten, wenn die Skriptdatei geladen wird. Dies wird normalerweise verwendet, um Cross-Site-AJAX mit JSON-Daten zu ermöglichen. Wenn Sie wissen, dass example.com JSON-Dateien dient, die wie die JSONP oben angegebenen Beispiel schauen, dann können Sie folgenden Code verwenden, um es abzurufen, auch wenn Sie nicht auf der Domäne example.com sind:

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); 

Answer 2

Grundsätzlich ist es nicht zulässig, JSON-Daten aus einer anderen Domäne über AJAX anzufordern. AJAX ermöglicht es Ihnen, Daten abzurufen, nachdem eine Seite bereits geladen wurde, und dann einen Code auszuführen/eine Funktion aufzurufen, sobald diese zurückgegeben wird. Wir können AJAX nicht verwenden, aber wir dürfen <script> Tags in unsere eigene Seite einfügen, und diese dürfen Skripts referenzieren, die auf anderen Domains gehostet werden.

Normalerweise würden Sie dies verwenden, um Bibliotheken aus einem CDN wie jQuery einzuschließen. Wir können dies jedoch missbrauchen und stattdessen Daten abrufen! JSON ist bereits (größtenteils) gültiges JavaScript, aber wir können JSON nicht einfach in unsere Skriptdatei zurückgeben, weil wir nicht wissen können, wann das Skript/die Daten geladen sind und wir keine Möglichkeit haben, darauf zuzugreifen, es sei denn, es ist einer Variablen zugewiesen oder an eine Funktion übergeben. Was wir stattdessen tun, ist dem Web-Service zu sagen, dass er eine Funktion in unserem Auftrag aufrufen soll, wenn es fertig ist.

Zum Beispiel könnten wir einige Daten von einer Börse API anfordern, und zusammen mit unseren üblichen API-Parametern, geben wir einen Rückruf, wie callThisWhenReady. Der Webservice wickelt die Daten dann mit unserer Funktion ab und gibt sie wie folgt zurück: callThisWhenReady({...data...}). Sobald das Skript geladen ist, wird Ihr Browser versuchen, es auszuführen (wie üblich), was wiederum unsere willkürliche Funktion aufruft und uns die gewünschten Daten zuführt.

Es funktioniert viel wie eine normale AJAX-Anfrage, außer, anstatt eine anonyme Funktion aufzurufen, müssen wir benannte Funktionen verwenden.

jQuery unterstützt dies tatsächlich nahtlos für Sie, indem Sie eine eindeutig benannte Funktion für Sie erstellen und diese übergeben, die dann wiederum den gewünschten Code ausführt.

Answer 3

JSONP ist im Wesentlichen, JSON mit extra Code, wie ein Funktionsaufruf um die Daten gewickelt. Dadurch können die Daten während des Parsens verarbeitet werden.

Answer 4

JSONP können Sie eine Rückruffunktion angeben, die an Ihr JSON-Objekt übergeben wird. Dadurch können Sie die gleiche Ursprungsrichtlinie umgehen und JSON von einem externen Server in das JavaScript auf Ihrer Webseite laden.

Answer 5

"JSONP ist JSON mit extra Code" wäre für die reale Welt zu einfach. Nein, du musst kleine Diskrepanzen haben. Was ist der Spaß bei der Programmierung, wenn alles gerade funktioniert?

Es erscheint JSON is not a subset of JavaScript. Wenn Sie nur ein JSON-Objekt nehmen und es in einen Funktionsaufruf einfügen, werden Sie eines Tages von seltsamen Syntaxfehlern gebissen, so wie ich es heute war.

Answer 6

JSONP steht für "JSON with Padding" und ist eine Umgehung für das Laden von Daten aus verschiedenen Domänen.Es lädt das Skript in den Kopf des DOM und Sie können somit auf die Informationen zugreifen, als ob sie in Ihrer eigenen Domäne geladen wären, und damit das Cross-Domain-Problem umgehen.

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); 

Jetzt können wir die JSON über AJAX JSONP anfordern und die Callback-Funktion, die wir rund um den JSON Inhalt erstellt. Die Ausgabe sollte der JSON als ein Objekt sein, mit dem wir dann die Daten für alles, was wir wollen, ohne Einschränkungen verwenden können.

Answer 7

JSON

JSON (JavaScript Object Notation) ist ein bequemer Weg, Daten zwischen Anwendungen zu transportieren, vor allem, wenn das Ziel eine Javascript-Anwendung ist.

Beispiel:

Hier ist ein Beispiel, das minimal JSON als Transportmittel für die Server-Antwort verwendet. Der Client erstellt eine Ajax-Anforderung mit der JQuery-Kurzschreibfunktion $ .getJSON. Der Server generiert einen Hash, formatiert ihn als JSON und gibt diesen an den Client zurück. Der Client formatiert dies und legt es in ein Seitenelement.

-Link:Difference between json & jsonp

Server:

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

Auftraggeber:

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

Ausgang:

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

JSONP (JSON mit Padding)

JSONP ist eine einfache Möglichkeit, Browser Einschränkungen zu überwinden, wenn JSON Antworten aus verschiedenen Domänen aus dem Client sendet. Die einzige Änderung auf der Client-Seite mit JSONP ist eine Callback-Parameter an die URL

Server hinzuzufügen:

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 

Auftraggeber:

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

Ausgang:

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