Quais são as diferenças entre JSON e JSONP?

Formato sábio, tipo de arquivo sábio e uso prático sábio?

JSONP é JSON com preenchimento. Ou seja, você coloca uma corda no início e um par de parênteses em torno dela. Por exemplo:

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

O resultado é que você pode carregar o JSON como um arquivo de script. Se você configurou anteriormente uma função chamada func, essa função será chamada com um argumento, que é os dados JSON, quando o arquivo de script terminar de carregar. Isso geralmente é usado para permitir AJAX entre sites com dados JSON. Se você souber que o example.com está servindo arquivos JSON que se parecem com o exemplo JSONP fornecido acima, é possível usar um código como este para recuperá-lo, mesmo se você não estiver no domínio 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);

Basicamente, você não tem permissão para solicitar dados JSON de outro domínio via AJAX devido à política de mesma origem. O AJAX permite que você busque dados depois que uma página já foi carregada e execute algum código / chame uma função assim que ela retornar. Não podemos usar o AJAX, mas temos permissão para injetar <script>tags em nossa própria página e eles podem fazer referência a scripts hospedados em outros domínios.

Normalmente, você usaria isso para incluir bibliotecas de uma CDN como o jQuery . No entanto, podemos abusar disso e usá-lo para buscar dados! O JSON já é JavaScript válido ( na maioria das vezes ), mas não podemos simplesmente retornar o JSON em nosso arquivo de script, porque não temos como saber quando o script / dados terminou de carregar e não temos como acessá-lo, a menos que seja atribuído a uma variável ou passado para uma função. Portanto, o que fazemos é dizer ao serviço da Web para chamar uma função em nosso nome quando estiver pronto.

Por exemplo, podemos solicitar alguns dados de uma API da bolsa de valores e, juntamente com nossos parâmetros habituais da API, oferecemos um retorno de chamada, como ?callback=callThisWhenReady. O serviço web, em seguida, quebra os dados com a nossa função e devolve-lo como este: callThisWhenReady({...data...}). Agora que o script é carregado, seu navegador tenta executá-lo (normalmente), que por sua vez chama nossa função arbitrária e nos fornece os dados que desejávamos.

Funciona como uma solicitação AJAX normal, exceto que, em vez de chamar uma função anônima, precisamos usar funções nomeadas.

O jQuery, na verdade, suporta isso perfeitamente para você, criando uma função com nome exclusivo para você e passando adiante, que, por sua vez, executará o código desejado.

JSONP permite que você especifique uma função de retorno de chamada que é transmitida ao seu objeto JSON. Isso permite ignorar a mesma política de origem e carregar o JSON de um servidor externo no JavaScript da sua página da web.

JSONP significa "JSON with Padding" e é uma solução alternativa para carregar dados de diferentes domínios. Ele carrega o script no cabeçalho do DOM e, portanto, você pode acessar as informações como se fossem carregadas em seu próprio domínio, ignorando a questão entre domínios.

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

Agora podemos solicitar o JSON via AJAX usando JSONP e a função de retorno de chamada que criamos em torno do conteúdo JSON. A saída deve ser o JSON como um objeto, para que possamos usar os dados para o que quisermos, sem restrições.

JSONP é essencialmente JSON com código extra, como uma chamada de função agrupada em torno dos dados. Ele permite que os dados sejam acionados durante a análise.

JSON

JSON (JavaScript Object Notation) é uma maneira conveniente de transportar dados entre aplicativos, especialmente quando o destino é um aplicativo JavaScript.

Exemplo:

Aqui está um exemplo mínimo que usa JSON como o transporte para a resposta do servidor. O cliente faz uma solicitação Ajax com a função abreviada do jQuery $ .getJSON. O servidor gera um hash, formata-o como JSON e retorna para o cliente. O cliente formata isso e o coloca em um elemento da página.

Servidor:

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

Resultado:

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

JSONP (JSON com preenchimento)

JSONP é uma maneira simples de superar as restrições do navegador ao enviar respostas JSON de diferentes domínios do cliente.

A única alteração no lado do cliente com JSONP é adicionar um parâmetro de retorno de chamada à URL

Servidor:

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

Resultado:

 {
  "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 com código extra” seria muito fácil para o mundo real. Não, você tem pequenas discrepâncias. Qual é a graça da programação se tudo funcionar ?

Acontece que JSON não é um subconjunto de JavaScript . Se tudo o que você faz é pegar um objeto JSON e envolvê-lo em uma chamada de função, um dia você será mordido por estranhos erros de sintaxe, como eu era hoje.

JSONP é uma maneira simples de superar as restrições do navegador ao enviar respostas JSON de diferentes domínios do cliente.

Mas a implementação prática da abordagem envolve diferenças sutis que geralmente não são explicadas claramente.

Aqui está um tutorial simples que mostra JSON e JSONP lado a lado.

Todo o código está disponível gratuitamente no Github e uma versão ao vivo pode ser encontrada em http://json-jsonp-tutorial.craic.com