web-dev-qa-db-de.com

Was sind die Unterschiede zwischen JSON und JSONP?

Formatweise, Dateityp und praktische Verwendung?

369
Mohammad

JSONP ist JSON mit Padding, das heißt, Sie setzen eine Zeichenfolge an den Anfang und ein Paar Klammern. Zum Beispiel:

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

Das Ergebnis ist, dass Sie die 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 vollständig geladen ist. Dies wird normalerweise verwendet, um standortübergreifende AJAX mit JSON-Daten zuzulassen. Wenn Sie wissen, dass example.com JSON-Dateien bereitstellt, die wie das oben angegebene JSONP-Beispiel aussehen, können Sie folgenden Code verwenden, um ihn abzurufen, 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);
387
Marius

Grundsätzlich ist es nicht erlaubt, JSON-Daten von einer anderen Domäne über AJAX aufgrund der Same-Origin-Richtlinie anzufordern. Mit AJAX können Sie Daten abrufen, nachdem eine Seite bereits geladen wurde, und anschließend einen Code ausführen/eine Funktion aufrufen, wenn 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 Skripts verweisen, die in anderen Domänen gehostet werden. 

Normalerweise würden Sie dies verwenden, um Bibliotheken aus einem CDN wie jQuery aufzunehmen. Wir können dies jedoch missbrauchen und stattdessen Daten abrufen! JSON ist (zum größten Teil) bereits gültiges JavaScript, aber wir können JSON nicht einfach in unserer Skriptdatei zurückgeben, da wir nicht wissen, wann das Skript/die Daten vollständig geladen wurden einer Variablen zugewiesen oder an eine Funktion übergeben werden. Stattdessen sagen wir dem Webservice, dass er eine Funktion in unserem Namen aufrufen soll, wenn er fertig ist.

Beispielsweise können wir einige Daten von einer Börse-API anfordern und zusammen mit unseren üblichen API-Parametern geben wir ihr einen Rückruf, wie callThisWhenReady. Der Webservice verpackt die Daten dann mit unserer Funktion und gibt sie folgendermaßen zurück: callThisWhenReady({...data...}). Sobald das Skript geladen ist, versucht Ihr Browser, es auszuführen (wie üblich), was wiederum unsere beliebige Funktion aufruft und uns die gewünschten Daten gibt.

Es funktioniert ähnlich wie eine normale AJAX - Anforderung, außer dass Sie eine anonyme Funktion aufrufen müssen, sondern benannte Funktionen verwenden müssen.

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 den gewünschten Code ausführt.

84
mpen

JSONP ermöglicht Ihnen die Angabe einer Callback-Funktion, die Ihr JSON-Objekt übergeben wird. Auf diese Weise können Sie dieselbe Origin-Richtlinie umgehen und JSON von einem externen Server in das JavaScript auf Ihrer Webseite laden.

62
Alex Wayne

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

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

Jetzt können wir den JSON über AJAX mit JSONP und der Callback-Funktion anfordern, die wir um den JSON-Inhalt erstellt haben .. Die Ausgabe sollte JSON als Objekt sein, das wir dann ohne Einschränkungen für die gewünschten Daten verwenden können .

30
Sankar

JSONP ist im Wesentlichen JSON mit zusätzlichem Code, wie ein Funktionsaufruf, der die Daten umgibt. Es ermöglicht, dass die Daten während der Analyse verarbeitet werden.

18
Delan Azabani

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-Kürzelfunktion $ .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 Auffüllen)

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

Die einzige Änderung auf 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-eine-differenzen-zwischen-json-und-jsonp.html

13
Elangovan

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

Stellt sich heraus JSON ist keine Untermenge von JavaScript . Wenn Sie nur ein JSON-Objekt nehmen und in einen Funktionsaufruf einschließen, werden Sie eines Tages von seltsamen Syntaxfehlern gebissen, wie ich es heute war.

6
Vasiliy Faronov

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

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 .

0
faridcs