JSONP: JSON con padding

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