No olvides que en las ciencias cualquier problema casi siempre tiene varias resoluciones, no obstante nosotros te compartimos lo más óptimo y eficiente.
Solución:
Prefacio:
Esta respuesta tiene más de seis años. Si bien los conceptos y la aplicación de JSONP no han cambiado (es decir, los detalles de la respuesta aún son válidos), debe buscar usar CORS siempre que sea posible (es decir, su servidor o API lo admite, y el soporte del navegador es adecuado), como JSONP tiene riesgos de seguridad inherentes.
JSONP (JSON con relleno) es un método comúnmente utilizado para eludir las políticas entre dominios en los navegadores web. (No puede realizar solicitudes AJAX a una página web que el navegador perciba como un servidor diferente).
JSON y JSONP se comportan de manera diferente en el cliente y el servidor. Las solicitudes JSONP no se envían utilizando el XMLHTTPRequest y los métodos de navegador asociados. en cambio un
JSON Request:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function ()
if (xhr.readyState == 4 && xhr.status == 200)
// success
;
;
xhr.open("GET", "somewhere.php", true);
xhr.send();
JSONP Request:
var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';
document.getElementsByTagName("head")[0].appendChild(tag);
The difference between a JSON response and a JSONP response is that the JSONP response object is passed as an argument to a callback function.
JSON:
"bar": "baz"
JSONP:
foo( "bar": "baz" );
This is why you see JSONP requests containing the callback parameter, so that the server knows the name of the function to wrap the response.
This function must exist in the global scope at the time the
'field': 'value'
... y tenía una URL similar, excepto que usaba JSONP, a la que pasó el nombre de la función de devolución de llamada 'myCallback' (generalmente se hace dándole un parámetro de consulta llamado 'devolución de llamada', por ejemplo http://example.com/dataSource?callback=myCallback). Entonces volvería:
myCallback('field':'value')
... que no es solo un objeto, sino un código que se puede ejecutar. Entonces, si define una función en otra parte de su página llamada myFunction y ejecuta este script, se llamará con los datos de la URL.
Lo bueno de esto es que puede crear una etiqueta de secuencia de comandos y usar su URL (completa con callback parámetro) como el src attribute, y el navegador lo ejecutará. Eso significa que puede eludir la política de seguridad del 'mismo origen' (porque los navegadores le permiten ejecutar etiquetas de secuencias de comandos de fuentes distintas al dominio de la página).
Esto es lo que hace jQuery cuando realiza una solicitud ajax (usando .ajax con 'jsonp' como el valor para el dataType propiedad). P.ej
$.ajax(
url: 'http://example.com/datasource',
dataType: 'jsonp',
success: function(data)
// your code to handle data here
);
Aquí, jQuery se encarga del nombre de la función de devolución de llamada y el parámetro de consulta, lo que hace que la API sea idéntica a otras llamadas ajax. Pero a diferencia de otros tipos de solicitudes ajax, como se mencionó, no está restringido a obtener datos del mismo origen que su página.
JSONP es una forma de eludir la política del mismo origen del navegador. ¿Cómo? Me gusta esto:
El objetivo aquí es hacer una solicitud a otherdomain.com y alert el nombre en la respuesta. Normalmente haríamos una solicitud AJAX:
$.get('otherdomain.com', function (response)
var name = response.name;
alert(name);
);
Sin embargo, dado que la solicitud se envía a un dominio diferente, no funcionará.
Podemos realizar la solicitud a través de un y $.get('otherdomain.com') dará lugar a que se realice la misma solicitud:
