Was sind die Unterschiede zwischen JSON und JSONP?

In Bezug auf Format, Dateityp und praktische Verwendung?

JSONP ist JSON mit Auffüllung. Das heißt, Sie setzen am Anfang eine Zeichenfolge und ein Paar Klammern darum. Zum Beispiel:

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

Das Ergebnis ist, dass Sie JSON als Skriptdatei laden können. Wenn Sie zuvor eine aufgerufene funcFunktion eingerichtet haben, wird diese Funktion mit einem Argument aufgerufen, nämlich den JSON-Daten, wenn die Skriptdatei geladen ist. Dies wird normalerweise verwendet, um standortübergreifendes AJAX mit JSON-Daten zu ermöglichen. Wenn Sie wissen, dass example.com JSON-Dateien bereitstellt, die dem oben angegebenen JSONP-Beispiel ähneln, können Sie Code wie diesen zum Abrufen verwenden, auch wenn Sie sich nicht in der Domäne example.com befinden:

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

Grundsätzlich dürfen Sie JSON-Daten aufgrund von Richtlinien mit demselben Ursprung nicht über AJAX von einer anderen Domäne anfordern. Mit AJAX können Sie Daten abrufen, nachdem eine Seite bereits geladen wurde, und dann Code ausführen / eine Funktion aufrufen, sobald sie 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 auf Skripte verweisen, die in anderen Domänen 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 ( größtenteils ) bereits gültiges JavaScript , aber wir können JSON nicht einfach in unserer Skriptdatei zurückgeben, da wir nicht wissen können, wann das Skript / die Daten vollständig geladen wurden, und wir nur dann darauf zugreifen können, wenn dies der Fall ist einer Variablen zugewiesen oder an eine Funktion übergeben. Stattdessen weisen wir den Webdienst an, eine Funktion in unserem Namen aufzurufen, wenn sie bereit ist.

Zum Beispiel könnten wir einige Daten von einer Börsen-API anfordern und zusammen mit unseren üblichen API-Parametern einen Rückruf geben, wie z ?callback=callThisWhenReady. Der Webdienst umschließt dann die Daten mit unserer Funktion und gibt sie wie folgt zurück : callThisWhenReady({...data...}). Sobald das Skript geladen ist, versucht Ihr Browser (wie gewohnt), es auszuführen, was wiederum unsere beliebige Funktion aufruft und uns die gewünschten Daten zuführt.

Es funktioniert ähnlich wie eine normale AJAX-Anfrage, außer dass wir anstelle einer anonymen Funktion benannte Funktionen verwenden müssen.

jQuery unterstützt dies nahtlos für Sie, indem es eine eindeutig benannte Funktion für Sie erstellt und diese weitergibt, die dann wiederum den gewünschten Code ausführt.

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

JSONP steht für "JSON with Padding" und ist eine Problemumgehung zum Laden von Daten aus verschiedenen Domänen. Das Skript wird in den Kopf des DOM geladen, sodass Sie auf die Informationen zugreifen können, als ob sie in Ihre eigene Domäne geladen worden wären, wodurch das domänenübergreifende Problem umgangen wird.

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 den JSON über AJAX mit JSONP und der Rückruffunktion anfordern, die wir für den JSON-Inhalt erstellt haben. Die Ausgabe sollte der JSON als Objekt sein, mit dem wir die Daten dann ohne Einschränkungen für alles verwenden können, was wir wollen.

JSONP ist im Wesentlichen JSON mit zusätzlichem Code, wie ein Funktionsaufruf, der um die Daten gewickelt wird. Damit können die Daten während des Parsens bearbeitet werden.

JSON

JSON (JavaScript Object Notation) ist eine bequeme Möglichkeit, Daten zwischen Anwendungen zu transportieren, insbesondere wenn das Ziel eine JavaScript-Anwendung ist.

Beispiel:

Hier ist ein minimales Beispiel, das JSON als Transport für die Serverantwort verwendet. Der Client stellt eine Ajax-Anforderung mit der jQuery-Kurzfunktion $ .getJSON. Der Server generiert einen Hash, formatiert ihn als JSON und gibt diesen an den Client zurück. Der Client formatiert dies und fügt es 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

Klient:

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

JSONP ist eine einfache Möglichkeit, Browserbeschränkungen zu überwinden, wenn JSON-Antworten von verschiedenen Domänen vom Client gesendet werden.

Die einzige Änderung auf der Clientseite mit JSONP besteht darin, der URL einen Rückrufparameter hinzuzufügen

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

Klient:

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
}

Link: http://www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

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

Es stellt sich heraus, dass JSON keine Teilmenge von JavaScript ist . Wenn Sie nur ein JSON-Objekt in einen Funktionsaufruf einbinden, werden Sie eines Tages von seltsamen Syntaxfehlern gebissen, wie ich es heute war.

JSONP ist eine einfache Möglichkeit, Browsereinschränkungen zu überwinden, wenn JSON-Antworten von verschiedenen Domänen vom Client gesendet werden.

Die praktische Umsetzung des Ansatzes beinhaltet jedoch subtile Unterschiede, die oft nicht klar erklärt werden.

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

Der gesamte Code ist bei Github frei verfügbar. Eine Live-Version finden Sie unter http://json-jsonp-tutorial.craic.com