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

393

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

Mohammad
fuente
13
Consulte Explicar JSONP .
Matthew Flaschen
1
Gracias por el enlace, hay muy buena información allí.
Mohammad
44
¿Es un método más rápido que el otro? Por ejemplo, si usa XMLHttpRequest para OBTENER una solicitud (obviamente al mismo dominio ya que es ajax 'normal'), o si usa el método JSONP (que no usará XMLHTTPRequest), ¿será uno más rápido que el otro? Sé que depende de varios factores, pero ¿alguien hizo comparaciones de velocidad?
Yuval A.

Respuestas:

405

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);
Mario
fuente
3
¿Todavía hay un punto para que JSONP suponga que puede configurar CORS para permitir solicitudes de origen cruzado?
y3sh
Tal vez sea un poco tarde, pero sin embargo, quiero dar respuesta a su pregunta para los demás. No, si usa el JSONP, descartó todas las ventajas de CORS (llamé ventaja debido al problema de seguridad). Le recomiendo que implemente CORS correctamente. le ayudará sobre problemas de seguridad y también un mejor enfoque en arquitectura.
Dogan
101

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.

mpen
fuente
2
¿Separado de qué? JSON tampoco es un idioma
nickf
66
@nickf: Sí ... estaba buscando la palabra correcta ... ¿cómo lo llamarías entonces? "formato de intercambio de datos" según json.org.
mpen
o más legible: JSON: un objeto javascript en "notación de texto". ¿Te gustaría toString () un objeto Java quizás?
Sam Vloeberghs
FWIW: @SamVloeberghs: es un poco engañoso decir que el JSON representa un objeto javascript. Puede ser cualquier dato, de cualquier idioma o base de datos, que sea representable como pares y matrices de nombre-valor. Y se requieren convenciones adicionales para realizar un viaje de ida y vuelta con precisión a cualquier objeto JS; consulte JSON: Tipos de datos nativos no compatibles . En particular, JS Date regresa en el otro extremo como una cadena. weblog.west-wind.com/posts/2014/jan/06/…
ToolmakerSteve
66

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.

Alex Wayne
fuente
30

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 &amp; 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.

Sankar
fuente
18

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.

Delan Azabani
fuente
13

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

Elangovan
fuente
6

"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.

Vasiliy Faronov
fuente
0

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

faridcs
fuente