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

Question

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

Answer 1

JSONP es JSON con relleno, es decir, coloca una cuerda 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 previamente configuró una función llamada func, se llamará a esa función con un argumento, que es el dato JSON, cuando el archivo de script finaliza la carga. Esto generalmente se usa para permitir AJAX entre sitios con datos JSON. Si sabe que example.com está sirviendo archivos JSON que se ven como el ejemplo dado anteriormente JSONP, entonces usted puede utilizar un código como éste para recuperarlo, incluso si usted 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 2

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

Normalmente debería utilizar esto para incluir bibliotecas desde una CDN como jQuery. ¡Sin embargo, podemos abusar de esto y usarlo para buscar datos en su lugar! JSON ya es JavaScript válido (en su mayor parte), pero no podemos simplemente devolver JSON en nuestro archivo de script, porque no tenemos forma de saber cuándo el script/datos ha terminado de cargarse 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é lista.

Por ejemplo, podríamos solicitar algunos datos de una API de la bolsa de valores, y junto con nuestros parámetros de API habituales, le daremos una devolución de llamada, como callThisWhenReady. El servicio web luego envuelve los datos con nuestra función y los devuelve así: callThisWhenReady({...data...}). Ahora, tan pronto como se carga 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 admite sin problemas creando una función con un nombre único para usted y pasándola, que a su vez ejecutará el código que desea.

Answer 3

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

Answer 4

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

Answer 5

"JSONP es JSON con código adicional" sería demasiado fácil para el mundo real. No, tienes pequeñas discrepancias. ¿Cuál es la diversión en la programación si todo solo funciona?

Resulta JSON is not a subset of JavaScript. Si todo lo que hace es tomar un objeto JSON y envolverlo en una llamada a función, un día será mordido por extraños errores de sintaxis, como lo estaba yo hoy.

Answer 6

JSONP significa "JSON con relleno" y es una solución para cargar datos de diferentes dominios.Carga la secuencia de comandos en el encabezado del DOM y, por lo tanto, puede acceder a la información como si estuviera cargada en su propio dominio, evitando así el problema del 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 hemos creado en torno al contenido de JSON. La salida debe ser el JSON como un objeto que luego podemos utilizar los datos para lo que queramos sin restricciones.

Answer 7

JSON

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

Ejemplo:

Aquí está un ejemplo mínimo que utiliza JSON como el transporte de 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:Difference between json & 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 cuando se envían las respuestas JSON desde diferentes dominios del cliente. El único cambio en el lado del cliente con JSONP es añadir 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 
}