¿Cuáles son las diferencias entre JSON y JSONP?

¿Formato inteligente, tipo de archivo inteligente y uso práctico inteligente?

JSONP es JSON con relleno. Es decir, pones una cadena al principio y un par de paréntesis a su alrededor. Por ejemplo:

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

El resultado es que puede cargar el JSON como un archivo de script. Si anteriormente configuró una función llamada func, entonces esa función se llamará con un argumento, que son los datos JSON, cuando el archivo de script se haya cargado. Esto generalmente se usa para permitir AJAX entre sitios con datos JSON. Si sabe que example.com está sirviendo archivos JSON que se parecen al ejemplo JSONP proporcionado anteriormente, puede usar un código como este para recuperarlo, incluso si no está en el 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);

Básicamente, no puede solicitar datos JSON de otro dominio a través de AJAX debido a la política del mismo origen. AJAX le permite obtener datos después de que una página ya se haya cargado, y luego ejecutar algún código / llamar a una función una vez que regrese. No podemos usar AJAX, pero podemos inyectar <script>etiquetas en nuestra propia página y esas pueden hacer referencia a scripts alojados en otros dominios.

Por lo general, usaría esto para incluir bibliotecas de un CDN como jQuery . Sin embargo, podemos abusar de esto y usarlo para buscar datos. JSON ya es JavaScript válido ( en su mayor parte ), pero no podemos devolver JSON en nuestro archivo de secuencia de comandos, porque no tenemos forma de saber cuándo la secuencia de comandos / datos ha terminado de cargarse y no tenemos forma de acceder a menos que sea asignado a una variable o pasado a una función. Entonces, lo que hacemos es decirle al servicio web que llame a una función en nuestro nombre cuando esté lista.

Por ejemplo, podríamos solicitar algunos datos de una API de bolsa y, junto con nuestros parámetros habituales de API, le devolvemos la llamada, como ?callback=callThisWhenReady. El servicio web a continuación, envuelve los datos con nuestra función y lo devuelve como esto: callThisWhenReady({...data...}). Ahora, tan pronto como se cargue el script, su navegador intentará ejecutarlo (como es normal), lo que a su vez llama a nuestra función arbitraria y nos proporciona los datos que queríamos.

Funciona de manera muy similar a una solicitud AJAX normal, excepto que en lugar de llamar a una función anónima, tenemos que usar funciones con nombre.

jQuery en realidad lo soporta sin problemas para usted al crear una función con un nombre único para usted y pasarla, lo que a su vez ejecutará el código que desea.

JSONP le permite especificar una función de devolución de llamada que se pasa su objeto JSON. Esto le permite omitir la misma política de origen y cargar JSON desde un servidor externo en JavaScript en su página web.

JSONP significa "JSON con relleno" y es una solución alternativa para cargar datos de diferentes dominios. Carga la secuencia de comandos en la cabeza del DOM y, por lo tanto, puede acceder a la información como si estuviera cargada en su propio dominio, evitando así el problema de dominio cruzado.

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

Ahora podemos solicitar el JSON a través de AJAX usando JSONP y la función de devolución de llamada que creamos en torno al contenido de JSON. El resultado debe ser el JSON como un objeto que luego podemos usar los datos para lo que queramos sin restricciones.

JSONP es esencialmente JSON con código adicional, como una llamada de función envuelta alrededor de los datos. Permite que se actúe sobre los datos durante el análisis.

JSON

JSON (JavaScript Object Notation) es una forma conveniente de transportar datos entre aplicaciones, especialmente cuando el destino es una aplicación de JavaScript.

Ejemplo:

Aquí hay un ejemplo mínimo que usa JSON como el transporte para la respuesta del servidor. El cliente realiza una solicitud de Ajax con la función abreviada de jQuery $ .getJSON. El servidor genera un hash, lo formatea como JSON y lo devuelve al cliente. El cliente formatea esto y lo coloca en un elemento de 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));
});

Salida:

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

JSONP (JSON con relleno)

JSONP es una forma sencilla de superar las restricciones del navegador al enviar respuestas JSON desde diferentes dominios desde el cliente.

El único cambio en el lado del cliente con JSONP es agregar un parámetro de devolución de llamada a la 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));
});

Salida:

 {
  "response": "Sent via JSONP",
  "timestamp": "2014-06-18 09:50:15 +0000",
  "random": 364
}

Enlace: http://www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

"JSONP es JSON con código adicional" sería demasiado fácil para el mundo real. No, tienes que tener pequeñas discrepancias. ¿Qué tiene de divertido programar si todo funciona ?

Resulta que JSON no es un subconjunto de JavaScript . Si todo lo que haces es tomar un objeto JSON y envolverlo en una llamada de función, un día serás mordido por extraños errores de sintaxis, como lo hice hoy.

JSONP es una forma sencilla de superar las restricciones del navegador al enviar respuestas JSON desde diferentes dominios desde el cliente.

Pero la implementación práctica del enfoque implica diferencias sutiles que a menudo no se explican claramente.

Aquí hay un tutorial simple que muestra JSON y JSONP lado a lado.

Todo el código está disponible gratuitamente en Github y se puede encontrar una versión en vivo en http://json-jsonp-tutorial.craic.com