Quali sono le differenze tra JSON e JSONP?

Formato saggio, tipo di file saggio e uso pratico saggio?

JSONP è JSON con imbottitura. Cioè, hai messo una stringa all'inizio e un paio di parentesi attorno ad essa. Per esempio:

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

Il risultato è che è possibile caricare JSON come file di script. Se in precedenza hai impostato una funzione chiamata func, tale funzione verrà chiamata con un argomento, ovvero i dati JSON, al termine del caricamento del file di script. Di solito viene utilizzato per consentire AJAX tra siti con dati JSON. Se sai che example.com sta offrendo file JSON che assomigliano all'esempio JSONP sopra indicato, allora puoi usare codice come questo per recuperarlo, anche se non sei nel dominio example.com:

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

Fondamentalmente, non sei autorizzato a richiedere dati JSON da un altro dominio tramite AJAX a causa della stessa politica di origine. AJAX consente di recuperare i dati dopo che una pagina è già stata caricata, quindi eseguire un codice / chiamare una funzione una volta restituita. Non possiamo usare AJAX ma ci è permesso iniettare <script>tag nella nostra pagina e quelli possono fare riferimento a script ospitati su altri domini.

Di solito lo useresti per includere librerie da un CDN come jQuery . Tuttavia, possiamo abusare di questo e usarlo per recuperare i dati! JSON è già valido JavaScript ( per la maggior parte ), ma non possiamo semplicemente restituire JSON nel nostro file di script, perché non abbiamo modo di sapere quando lo script / dati ha terminato il caricamento e non abbiamo modo di accedervi a meno che non sia assegnato a una variabile o passato a una funzione. Quindi quello che facciamo invece è dire al servizio web di chiamare una funzione per nostro conto quando è pronto.

Ad esempio, potremmo richiedere alcuni dati da un'API di borsa e, insieme ai nostri soliti parametri API, diamo una richiamata, come ?callback=callThisWhenReady. Il servizio web avvolge poi i dati con la nostra funzione e lo restituisce in questo modo: callThisWhenReady({...data...}). Ora non appena lo script viene caricato, il browser tenterà di eseguirlo (come di consueto), che a sua volta chiama la nostra funzione arbitraria e ci fornisce i dati desiderati.

Funziona in modo molto simile a una normale richiesta AJAX tranne per il fatto che invece di chiamare una funzione anonima, dobbiamo usare le funzioni denominate.

jQuery in realtà supporta questo per te senza soluzione di continuità creando una funzione con un nome univoco per te e spegnendola, che a sua volta eseguirà il codice desiderato.

JSONP consente di specificare una funzione di callback a cui viene passato l'oggetto JSON. Ciò consente di ignorare la stessa politica di origine e caricare JSON da un server esterno nel JavaScript sulla pagina Web.

JSONP sta per "JSON con padding" ed è una soluzione alternativa per il caricamento di dati da domini diversi. Carica lo script nell'intestazione del DOM e quindi puoi accedere alle informazioni come se fossero caricate sul tuo dominio, evitando così il problema tra domini.

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

Ora possiamo richiedere JSON tramite AJAX utilizzando JSONP e la funzione di callback che abbiamo creato attorno al contenuto JSON. L'output dovrebbe essere JSON come oggetto che possiamo quindi utilizzare i dati per ciò che vogliamo senza restrizioni.

JSONP è essenzialmente, JSON con codice aggiuntivo, come una chiamata di funzione racchiusa tra i dati. Permette di agire sui dati durante l'analisi.

JSON

JSON (JavaScript Object Notation) è un modo conveniente per trasportare dati tra applicazioni, specialmente quando la destinazione è un'applicazione JavaScript.

Esempio:

Ecco un esempio minimo che utilizza JSON come trasporto per la risposta del server. Il client effettua una richiesta Ajax con la funzione abbreviata jQuery $ .getJSON. Il server genera un hash, lo formatta come JSON e lo restituisce al client. Il client lo formatta e lo inserisce in un elemento di pagina.

Server:

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

Cliente:

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

Produzione:

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

JSONP (JSON con imbottitura)

JSONP è un modo semplice per superare le restrizioni del browser quando si inviano risposte JSON da domini diversi dal client.

L'unica modifica sul lato client con JSONP è l'aggiunta di un parametro di callback all'URL

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

Cliente:

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

Produzione:

 {
  "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 è JSON con codice aggiuntivo" sarebbe troppo facile per il mondo reale. No, devi avere piccole discrepanze. Qual è il divertimento nella programmazione se tutto funziona ?

Si scopre che JSON non è un sottoinsieme di JavaScript . Se tutto ciò che fai è prendere un oggetto JSON e inserirlo in una chiamata di funzione, un giorno verrai morso da strani errori di sintassi, come lo ero oggi.

JSONP è un modo semplice per superare le restrizioni del browser quando si inviano risposte JSON da domini diversi dal client.

Ma l'implementazione pratica dell'approccio implica sottili differenze che spesso non sono spiegate chiaramente.

Ecco un semplice tutorial che mostra JSON e JSONP fianco a fianco.

Tutto il codice è disponibile gratuitamente su Github e una versione live è disponibile su http://json-jsonp-tutorial.craic.com