javascript - entre - jsonp vs json

¿De qué se trata JSONP?

Question

Entiendo a JSON, pero no a JSONP. El documento de Wikipedia en JSON es (fue) el resultado de búsqueda superior para JSONP. Dice esto:

JSONP o "JSON con relleno" es una extensión JSON en la que se especifica un prefijo como un argumento de entrada de la llamada en sí.

Eh ¿Que llamada? Eso no tiene ningún sentido para mí. JSON es un formato de datos. No hay llamada.

El segundo resultado de búsqueda es de un tipo llamado Remy , que escribe esto sobre JSONP:

JSONP es una inyección de etiquetas de script, que pasa la respuesta del servidor a una función especificada por el usuario.

Puedo entender eso, pero aún no tiene ningún sentido.

Entonces, ¿qué es JSONP? ¿Por qué fue creado (qué problema resuelve)? ¿Y por qué lo usaría?

Anexo : Acabo de crear una nueva página para JSONP en Wikipedia; ahora tiene una descripción clara y completa de JSONP, basada en la respuesta de jvenema .

Answer 1

Antes de entender JSONP, necesita conocer el formato JSON y XML. Actualmente, el formato de datos más utilizado en la web es XML, pero XML es muy complicado. Hace a los usuarios inconvenientes para procesar incrustados en páginas web.

Para que JavaScript pueda intercambiar datos fácilmente, incluso como el programa de procesamiento de datos, utilizamos la redacción de acuerdo con los objetos JavaScript y desarrollamos un formato de intercambio de datos simple, que es JSON. JSON se puede utilizar como datos, o como un programa de JavaScript.

JSON se puede incrustar directamente en JavaScript, al usarlos se puede ejecutar directamente cierto programa JSON, pero debido a las restricciones de seguridad, el mecanismo de Sandbox del navegador deshabilita la ejecución del código JSON entre dominios.

Para hacer que JSON pueda ser pasado después de la ejecución, desarrollamos un JSONP. JSONP omite los límites de seguridad del navegador con la funcionalidad de devolución de llamada de JavaScript y la etiqueta <script>.

En resumen, explica qué es JSONP, qué problema resuelve (cuándo usarlo).

Answer 2

En realidad no es demasiado complicado ...

Supongamos que está en el dominio example.com y desea realizar una solicitud al dominio example.net. Para hacerlo, debe cruzar los límites de los dominios, un no-no en la mayoría de las aplicaciones.

El único elemento que omite esta limitación son las etiquetas <script>. Cuando utiliza una etiqueta de secuencia de comandos, la limitación del dominio se ignora, pero en circunstancias normales, no puede hacer nada con los resultados, la secuencia de comandos simplemente se evalúa.

Ingrese JSONP. Cuando realiza su solicitud a un servidor que está habilitado para JSONP, pasa un parámetro especial que le informa al servidor un poco sobre su página. De esa manera, el servidor puede resumir su respuesta de una manera que su página puede manejar.

Por ejemplo, digamos que el servidor espera un parámetro llamado "devolución de llamada" para habilitar sus capacidades JSONP. Entonces su solicitud se vería como:

http://www.example.net/sample.aspx?callback=mycallback

Sin JSONP, esto podría devolver algún objeto JavaScript básico, como por ejemplo:

{ foo: ''bar'' }

Sin embargo, con JSONP, cuando el servidor recibe el parámetro "devolución de llamada", envuelve el resultado de forma un poco diferente, devolviendo algo como esto:

mycallback({ foo: ''bar'' });

Como puede ver, ahora invocará el método que especificó. Entonces, en su página, define la función de devolución de llamada:

mycallback = function(data){
alert(data.foo);
};

Y ahora, cuando se cargue el script, se evaluará y se ejecutará su función. ¡Voila, peticiones de dominio cruzado!

También vale la pena señalar el único problema importante con JSONP: se pierde mucho control de la solicitud. Por ejemplo, no hay una manera "agradable" de recuperar los códigos de falla adecuados. Como resultado, terminas usando temporizadores para monitorear la solicitud, etc., lo que siempre es un poco sospechoso. La propuesta para JSONRequest es una gran solución para permitir scripts de dominios cruzados, mantener la seguridad y permitir el control adecuado de la solicitud.

En estos días (2015), CORS es el enfoque recomendado en comparación con JSONRequest. JSONP sigue siendo útil para la compatibilidad con navegadores antiguos, pero dadas las implicaciones de seguridad, a menos que no tenga otra opción, CORS es la mejor opción.

Answer 3

JSONP es una gran manera de evitar errores de secuencias de comandos entre dominios. Puede consumir un servicio JSONP únicamente con JS sin tener que implementar un proxy AJAX en el lado del servidor.

Puedes usar el servicio b1t.co para ver cómo funciona. Este es un servicio gratuito de JSONP que le permite minimizar sus URL. Aquí está la url a utilizar para el servicio:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

Por ejemplo, la llamada, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

volvería

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

Y, por lo tanto, cuando ese comando se haya cargado en tu js como un src, se ejecutará automáticamente cualquier nombre de JavaScript que deberías implementar como función de devolución de llamada:

function minifyResultsCallBack(data)
{
document.getElementById("results").innerHTML = JSON.stringify(data);
}

Para realizar la llamada JSONP, puede hacerlo de varias maneras (incluido el uso de jQuery), pero aquí hay un ejemplo de JS puro:

function minify(urlToMinify)
{
url = escape(urlToMinify);
var s = document.createElement(''script'');
s.id = ''dynScript'';
s.type=''text/javascript'';
s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
document.getElementsByTagName(''head'')[0].appendChild(s);
}

Un ejemplo paso a paso y un servicio web jsonp para practicar está disponible en: esta publicación

Answer 4

JSONP funciona mediante la construcción de un elemento de "script" (ya sea en el marcado HTML o insertado en el DOM a través de JavaScript), que solicita una ubicación remota del servicio de datos. La respuesta es un javascript cargado en su navegador con el nombre de la función predefinida junto con el parámetro que se pasa, que es la información JSON solicitada. Cuando se ejecuta la secuencia de comandos, se llama a la función junto con los datos JSON, lo que permite que la página solicitante reciba y procese los datos.

Para más información, visite: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

Fragmento de código del lado del cliente

 <!DOCTYPE html>
<html lang="en">
<head>
<title>AvLabz - CORS : The Secrets Behind JSONP </title>
<meta charset="UTF-8" />
</head>
<body>
<input type="text" id="username" placeholder="Enter Your Name"/>
<button type="submit" onclick="sendRequest()"> Send Request to Server </button>
<script>
"use strict";
//Construct the script tag at Runtime
function requestServerCall(url) {
var head = document.head;
var script = document.createElement("script");
script.setAttribute("src", url);
head.appendChild(script);
head.removeChild(script);
}
//Predefined callback function
function jsonpCallback(data) {
alert(data.message); // Response data from the server
}
//Reference to the input field
var username = document.getElementById("username");
//Send Request to Server
function sendRequest() {
// Edit with your Web Service URL
requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
}
</script>
</body>
</html>

Servidor lado pieza de código PHP

<?php
header("Content-Type: application/javascript");
$callback = $_GET["callback"];
$message = $_GET["message"]." you got a response from server yipeee!!!";
$jsonResponse = "{/"message/":/"" . $message . "/"}";
echo $callback . "(" . $jsonResponse . ")";
?>

Answer 5

Porque puede solicitar al servidor que agregue un prefijo al objeto JSON devuelto. P.ej

function_prefix(json_object);

para que el navegador eval "en línea" la cadena JSON como una expresión. Este truco hace posible que el servidor "inyecte" código javascript directamente en el navegador del Cliente y esto sin pasar por alto las restricciones de "mismo origen".

En otras palabras, puede tener intercambio de datos entre dominios .

Normalmente, XMLHttpRequest no permite el intercambio de datos entre dominios directamente (es necesario pasar por un servidor en el mismo dominio) mientras que:

<script src="some_other_domain/some_data.js&prefix=function_prefix >` se puede acceder a los datos desde un dominio diferente al del origen.

También vale la pena señalar: aunque el servidor debe considerarse "confiable" antes de intentar ese tipo de "truco", los efectos secundarios de un posible cambio en el formato del objeto, etc., pueden contenerse. Si se utiliza un function_prefix (es decir, una función js adecuada) para recibir el objeto JSON, dicha función puede realizar comprobaciones antes de aceptar / seguir procesando los datos devueltos.

Answer 6

Un ejemplo simple para el uso de JSONP.

client.html

 <html>
<head>
</head>
body>
<input type="button" id="001" onclick=gO("getCompany") value="Company" />
<input type="button" id="002" onclick=gO("getPosition") value="Position"/>
<h3>
<div id="101">
</div>
</h3>
<script type="text/javascript">
var elem=document.getElementById("101");
function gO(callback){
script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = ''http://localhost/test/server.php?callback=''+callback;
elem.appendChild(script);
elem.removeChild(script);
}
function getCompany(data){
var message="The company you work for is "+data.company +"<img src=''"+data.image+"''/ >";
elem.innerHTML=message;
}
function getPosition(data){
var message="The position you are offered is "+data.position;
elem.innerHTML=message;
}
</script>
</body>
</html>

server.php

 <?php
$callback=$_GET["callback"];
echo $callback;
if($callback==''getCompany'')
$response="({/"company/":/"Google/",/"image/":/"xyz.jpg/"})";
else
$response="({/"position/":/"Development Intern/"})";
echo $response;
?>

Answer 7

JSONP es realmente un simple truco para superar la misma política de dominio de XMLHttpRequest . (Como usted sabe, uno no puede enviar la solicitud AJAX (XMLHttpRequest) a un dominio diferente).

Entonces, en lugar de usar XMLHttpRequest , tenemos que usar etiquetas HTML de script , las que usualmente usas para cargar archivos js, para que js obtenga datos de otro dominio. ¿Suena raro?

Thing is - resulta que las etiquetas de script se pueden usar de una manera similar a XMLHttpRequest ! Mira esto:

script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = ''http://www.someWebApiServer.com/some-data'';

Terminará con un segmento de script que se verá así después de cargar los datos:

<script>
{[''some string 1'', ''some data'', ''whatever data'']}
</script>

Sin embargo, esto es un poco inconveniente, ya que tenemos que obtener esta matriz de la etiqueta de secuencia de comandos . Así que los creadores de JSONP decidieron que esto funcionará mejor (y lo es):

script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = ''http://www.someWebApiServer.com/some-data?callback=my_callback'';

¿Observa la función my_callback allá? Entonces, cuando el servidor JSONP recibe su solicitud y encuentra el parámetro de devolución de llamada, en lugar de devolver una matriz js simple, devolverá esto:

my_callback({[''some string 1'', ''some data'', ''whatever data'']});

Vea dónde está el beneficio: ahora obtenemos una devolución de llamada automática (my_callback) que se activará una vez que obtengamos los datos.
Eso es todo lo que hay que saber sobre JSONP : es una devolución de llamada y etiquetas de script.

NOTA: estos son ejemplos simples de uso de JSONP, no son scripts listos para producción.

Ejemplo básico de JavaScript (simple feed de Twitter usando JSONP)

<html>
<head>
</head>
<body>
<div id = ''twitterFeed''></div>
<script>
function myCallback(dataWeGotViaJsonp){
var text = '''';
var len = dataWeGotViaJsonp.length;
for(var i=0;i<len;i++){
twitterEntry = dataWeGotViaJsonp[i];
text += ''<p><img src = "'' + twitterEntry.user.profile_image_url_https +''"/>'' + twitterEntry[''text''] + ''</p>''
}
document.getElementById(''twitterFeed'').innerHTML = text;
}
</script>
<script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
</body>
</html>

Ejemplo básico de jQuery (feed de Twitter simple usando JSONP)

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: ''http://twitter.com/status/user_timeline/padraicb.json?count=10'',
dataType: ''jsonp'',
success: function(dataWeGotViaJsonp){
var text = '''';
var len = dataWeGotViaJsonp.length;
for(var i=0;i<len;i++){
twitterEntry = dataWeGotViaJsonp[i];
text += ''<p><img src = "'' + twitterEntry.user.profile_image_url_https +''"/>'' + twitterEntry[''text''] + ''</p>''
}
$(''#twitterFeed'').html(text);
}
});
})
</script>
</head>
<body>
<div id = ''twitterFeed''></div>
</body>
</html>

JSONP significa JSON con relleno . (Una técnica muy mal llamada, ya que realmente no tiene nada que ver con lo que la mayoría de la gente consideraría como "relleno").