Diseño y Proagramación Web Madrid. Front-end Developer Madrid. Arquitecto Javascript Madrid - EtnasSoft

Andrea Giammarchi, de Web Reflection, ha creado una función muy sencilla con la que nuestras peticiones de tipo JSONP serán un juego de niños.
La función, podemos descarga directamente desde aquí, ocupa sólo 216 bytes y su uso es muy simple.

JSONP( url, [callback] );

Donde:

• url Una cadena que contiene la URL donde se enviará la petición que debe incluir el nombre del parámetro que usamos para elaborar el callback.
• callback Una función que se ejecuta si la petición tiene éxito.

Ejemplo

El siguiente código extraído directamente de la página del autor nos muestra su funcionamiento:

Código Servidor (PHP)

<?php
if ( isset( $_GET['callback'] ) ) {
  header('Content-Type: application/javascript');
  exit( $_GET['callback'] . '.call( window, "Hello", "JSONP", "!!!" )' );
}
?>

Código Cliente (Javascript)

<!-- the generic HTML page -->
<script src="JSONP.js"></script>
<script>
this.onload = function () {
  JSONP( "test.php?callback", function ( a, b, c ) {
    console.log( [ a, b, ++many, c ].join(" ") );
  });
};
 
// Hello JSONP !!!
</script>

Como podemos comprobar, enviamos la URL junto al nombre del parámetro que utilizaremos para montar la respuesta, en este caso tres valores que asociamos al callback.

Así mismo, podemos montar en la URL tantos parámetros como necesitemos en servidor recordando siempre añadir al final de la cadena el nombre esperado para el callback:

JSONP( 'http://whatever.com/?foo=foo&bar=bar&callback', [callback] );

La función añadirá de forma automática el callback correcto al final de la cadena:

http://whatever.com/?foo=foo&bar=bar&callback=__JSON__123

Conclusión

Esta función resulta una solución simple y ligera para gestionar nuestras peticiones JSONP de una manera simple. Al no parsearse ningún valor, permite una gran flexibilidad en cuanto al formato de la cadena que envíamos al servidor. Podemos cumplir así cualquier requerimiento con la seguridad de que el servidor siempre generará una salida de acuerdo con el parámetro enviado como llamada al callback.

Recursos

La función JSONP puede descargar desde aquí.

Entradas relacionadas:

1. Tutorial JSON
2. Testeando AJAX en jQuery
3. Cadenas de escape: cómo poner tildes en Javascript
4. Includes en Javascript: REQUIRE.JS
5. Trim en Javascript