[Fuente: http://es.wikipedia.org/wiki/JSONP]
JSONP o “JSON con padding” es una técnica de comunicación utilizada en los programas JavaScript para realizar llamadas asíncronas a dominios diferentes. JSONP es un método concebido para suplir la limitación de AJAX entre dominios, que únicamente permite realizar peticiones a páginas que se encuentran bajo el mismo dominio y puerto por razones de seguridad.
Razón del JSONP
Bajo la política del mismo origen (SOP), un código JavaScript cargado en un dominio no tiene permiso para obtener datos de otro dominio. Sin embargo, esta restricción no se aplica a la etiqueta <script>
de HTML, para la cual se puede especificar en su atributo src
la URL de un script alojado en un servidor remoto.
Cómo funciona
Para realizar llamadas asíncronas entre distintos dominios, los datos se obtienen cargando un script que contiene el objeto JSON.
<script type="text/javascript" src="http://servidor.ejemplo.com/datos.json"></script>
De por sí, esto provocaría un error de sintaxis ya que el navegador estaría tratando de interpretar JSON crudo como JavaScript. Y aún suponiendo que el navegador interpretase el objeto JSON como un objeto literal de JavaScript, sin estar asignado a una variable no sería accesible.
{ "api_key": "224Wrf2asfSDfcea23reSDfqW", "status": "good", "name": "wikipedia", "date": "27-09-1995" }
En la técnica de JSONP, el objeto JSON se devuelve envuelto en la llamada de una función. De esta forma, una función ya definida en el entorno de JavaScript podría manipular los datos JSON.
jsonCallback ({ "api_key": "224Wrf2asfSDfcea23reSDfqW", "status": "good", "name": "wikipedia", "date": "27-09-1995" });
Por convención, el nombre de la función de retorno se especifica mediante un parámetro de la consulta, normalmente, utilizando jsonp
o callback
como nombre del campo en la solicitud al servidor.
<script type="text/javascript" src="http://servidor.ejemplo.com/datos.json?callback=parseJSON"></script>
Padding
Aunque el padding es generalmente el nombre de la función que envuelve al objeto JSON, también es posible asignar el objeto a una variable o realizar cualquier otra sentencia o declaración de JavaScript. La petición JSONP no es JSON crudo y no es analizada como tal, por lo que se puede devolver cualquier expresión válida de JavaScript, y no tiene porqué incluir JSON.
Insertar elemento script
El uso de JSONP sólo tiene sentido si se quiere realizar una llamada asíncrona a otro dominio, por ello es necesario manipular el DOM para insertar un elemento <script>
en la cabecera de la página, ya que una vez cargado el documento, no es posible escribir en él.
function loadScript (id, src, callback) { // Crear elemento var script = document.createElement("script"); // Atributos del script script.setAttribute("type", "text/javascript"); script.setAttribute("src", src + "?callback=" + callback); script.setAttribute("id", id); // Insertar script en la cabecera document.getElementsByTagName("head")[0].appendChild(script); }
No obstante, es más frecuente utilizar alguna librería de manipulación del DOM como jQuery o Mootools para apoyarse.