Was sind die Unterschiede zwischen JSON und JSONP?

Question

In Bezug auf Format, Dateityp und praktische Verwendung?

Answer 1

JSONP ist JSON mit Auffüllung. Das heißt, Sie setzen eine Zeichenkette an den Anfang und ein Paar Klammern um sie herum. Zum Beispiel:

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

Das Ergebnis ist, dass Sie das JSON als Skriptdatei laden können. Wenn Sie zuvor eine Funktion namens func wird diese Funktion mit einem Argument, nämlich den JSON-Daten, aufgerufen, wenn die Skriptdatei geladen ist. Dies wird normalerweise verwendet, um standortübergreifende AJAX mit JSON-Daten zu ermöglichen. Wenn Sie wissen, dass example.com JSON-Dateien bereitstellt, die wie das oben genannte JSONP-Beispiel aussehen, können Sie Code wie diesen verwenden, um sie abzurufen, auch wenn Sie sich nicht in der example.com-Domäne 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);

Answer 2

Grundsätzlich dürfen Sie aufgrund der Same-Origin-Policy keine JSON-Daten von einer anderen Domain über AJAX anfordern. Mit AJAX können Sie Daten abrufen, nachdem eine Seite bereits geladen wurde, und dann einen Code ausführen/eine Funktion aufrufen, sobald sie zurückkommt. Wir können AJAX nicht verwenden, aber wir dürfen Folgendes injizieren <script> Tags in unsere eigene Seite einfügen und diese dürfen auf Skripte verweisen, die auf anderen Domains gehostet werden.

Normalerweise würden Sie dies verwenden, um Bibliotheken von einem CDN wie z.B. jQuery . Wir können dies jedoch missbrauchen und es stattdessen zum Abrufen von Daten verwenden! JSON ist bereits gültiges JavaScript ( zum größten Teil ), aber wir können nicht einfach JSON in unserer Skriptdatei zurückgeben, weil wir nicht wissen können, wann das Skript/die Daten fertig geladen sind, und wir haben keine Möglichkeit, darauf zuzugreifen, es sei denn, es wird einer Variablen zugewiesen oder an eine Funktion übergeben. Stattdessen weisen wir den Webdienst an, eine Funktion in unserem Namen aufzurufen, wenn er bereit ist.

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

Sie funktioniert ähnlich wie eine normale AJAX-Anfrage, nur dass wir keine anonyme Funktion aufrufen, sondern 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.

Answer 3

JSONP ermöglicht es Ihnen, eine Callback-Funktion anzugeben, der Ihr JSON-Objekt übergeben wird. Auf diese Weise können Sie die Ursprungsrichtlinie umgehen und JSON von einem externen Server in das JavaScript auf Ihrer Webseite laden.

Answer 4

JSONP steht für "JSON with Padding" und ist ein Workaround für das Laden von Daten aus verschiedenen Domains. Es lädt das Skript in den Kopf des DOM und somit können Sie auf die Informationen zugreifen, als ob sie auf Ihrer eigenen Domäne geladen wurden, 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 das JSON über AJAX mit JSONP und der Callback-Funktion anfordern, die wir um den JSON-Inhalt herum erstellt haben. Die Ausgabe sollte das JSON als Objekt sein, das wir dann ohne Einschränkungen für die Daten verwenden können, die wir wollen.

Answer 5

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