Was sind die Unterschiede zwischen JSON und JSONP?

393

In Bezug auf Format, Dateityp und praktische Verwendung?

Mohammad
quelle
13
Siehe Bitte erläutern Sie JSONP .
Matthew Flaschen
1
Vielen Dank für den Link, dort gibt es einige wirklich gute Informationen.
Mohammad
4
Ist eine Methode schneller als die andere? Wenn Sie beispielsweise XMLHttpRequest verwenden, um eine Anforderung abzurufen (an dieselbe Domäne, offensichtlich, da es sich um einen "normalen" Ajax handelt), oder wenn Sie die JSONP-Methode verwenden (die XMLHTTPRequest nicht verwendet), ist eine schneller als die andere? Ich weiß, dass es von mehreren Faktoren abhängt - aber hat jemand Geschwindigkeitsvergleiche durchgeführt?
Yuval A.

Antworten:

405

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);
Marius
quelle
3
Gibt es noch einen Grund für JSONP, vorausgesetzt, Sie können CORS so konfigurieren, dass Cross-Origin-Anforderungen zulässig sind?
y3sh
Vielleicht etwas spät, aber ich möchte Ihre Frage für andere beantworten. Nein, wenn Sie JSONP verwenden, haben Sie alle CORS-Vorteile verworfen (ich habe den Vorteil aufgrund des Sicherheitsproblems genannt). Ich empfehle Ihnen, CORS ordnungsgemäß zu implementieren wird Ihnen bei Sicherheitsproblemen und einem besseren Ansatz für die Architektur helfen.
Dogan
101

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.

mpen
quelle
2
Von was trennen? JSON ist auch keine Sprache
Nickf
6
@nickf: Ja ... ich habe nach dem richtigen Wort gesucht ... wie würdest du es dann nennen? "Datenaustauschformat" laut json.org.
Mpen
oder besser lesbar: JSON: ein Javascript-Objekt in "Textnotation". Wie würden Sie vielleicht ein Java-Objekt toString ()?
Sam Vloeberghs
FWIW: @SamVloeberghs - Es ist etwas irreführend zu sagen, dass der JSON ein Javascript-Objekt darstellt. Es können beliebige Daten aus einer beliebigen Sprache oder Datenbank sein, die als Name-Wert-Paare und Arrays dargestellt werden können. Zusätzliche Konventionen sind erforderlich, um ein JS-Objekt genau zu umgehen - siehe JSON: Nicht unterstützte native Datentypen . Insbesondere kommt JS Date als Zeichenfolge am anderen Ende zurück. weblog.west-wind.com/posts/2014/jan/06/...
ToolmakerSteve
66

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.

Alex Wayne
quelle
30

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 &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 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.

Sankar
quelle
18

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.

Delan Azabani
quelle
13

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

Elangovan
quelle
6

"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.

Vasiliy Faronov
quelle
0

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

faridcs
quelle