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

jsonp response example

Question

Formato sabio, tipo de archivo sabio y uso práctico sabio?

Answer 1

"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 la programación 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 a función, un día serás mordido por extraños errores de sintaxis, como lo era hoy.

Answer 2

Básicamente, no se le permite 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 regresa. No podemos usar AJAX, pero se nos permite inyectar etiquetas <script> en nuestra propia página y se les permite hacer referencia a scripts alojados en otros dominios.

Por lo general, usaría esto para incluir bibliotecas desde un CDN como jQuery . Sin embargo, podemos abusar de esto y usarlo para obtener datos en su lugar. JSON ya es un JavaScript válido (en su mayor parte), pero no podemos devolver JSON en nuestro archivo de script, porque no tenemos forma de saber cuándo ha terminado de cargarse el script / datos y no tenemos forma de acceder a él 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é listo.

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

Funciona de forma 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 realmente admite esto perfectamente para usted al crear una función con un nombre único para usted y pasarla, que a su vez ejecutará el código que desea.

Answer 3

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

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

El resultado es que puede cargar el JSON como un archivo de script. Si previamente configuró una función llamada func , entonces se llamará a esa función con un argumento, que son los datos JSON, cuando el archivo de script haya terminado de cargarse. 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 dado anteriormente, entonces 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);

Answer 4

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

Answer 5

JSONP significa "JSON con relleno" y es una solución para cargar datos de diferentes dominios. Carga la secuencia de comandos en la cabecera 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 utilizando JSONP y la función de devolución de llamada que creamos alrededor del contenido de JSON. La salida debe ser el JSON como un objeto que luego podemos usar los datos para lo que queramos sin restricciones.

Answer 6

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

Answer 7

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 Ajax con la función abreviada jQuery $ .getJSON. El servidor genera un hash, lo formatea como JSON y lo devuelve al cliente. El cliente formatea esto y lo pone en un elemento de página.

Enlace: Diferencia entre json y jsonp.

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
}