AJAX Cross-Domain: JSONP + PHP

En ocasiciones nos encontramos con la necesidad de hacer uso de un servicio web o API externo a nuestro sitio a través de AJAX. Por defecto los navegadores tienen una politica que impide realizar peticiones a otro dominio por razones de seguridad.

Para solventar este problema Bob Ippolito en 2005 propuso el uso de una versión modificada de JSON denominada JSONP. A partir de entonces, muchos sitios y servicios han utilizado esta técnica para que se puedan consumir sus APIs desde una aplicación del lado del cliente.

Hasta hace un par de días, personalmente sólo había utilizado esta técnica desde el lado del consumidor, me parecía algo muy útil, pero nunca me había preocupado del lado del servidor, pero hace poco tuve que implementar un servicio web que debería poder ser accedido a través de una aplicación cliente alojado en otro servidor, por lo que tuve que ponerme a enterarme, y os traigo un tutorial con lo que he aprendido, pongo información tanto del lado del servidor (utilizando PHP), como del lado del cliente (utilizando jQuery).

Lado del servidor

Según la documentación de JSONP, se debe permitir que el cliente añada algo de contenido al JSON devuelto, siendo este englobado en paréntesis, básicamente para que lo que se devuelva sea la “ejecución de un función”, que será creada (de la forma que sea) en el cliente, para su ejecución al finalizar la llamada AJAX.

Por lo tanto, la idea básica es, teniendo un servicio web que devuelva un JSON válido, permitir dos nuevos parámetros: uno para representar el formato que diferenciará las llamadas remotas de las realizadas desde nuestra aplicación (si la hubiera) y otro, el nombre de la función a ejecutar en el cliente. Los nombres típicos de estos parámetros son format (con valor jsonp) y callback (o jsoncallback), aunque no es obligatorio.

El código (en PHP), podría ser algo como:


$format = $_REQUEST['format'];
if($format == "json") {
    if(isset($_REQUEST['callback'])) {
        $callback = $_REQUEST['callback'];
        echo "$callback(" . json_encode($json) . ")";
    } else {
        echo "callbackFunction(" . json_encode($json) . ")";
    }
}

De esta manera, si no se indica una función, indicamos una por defecto, otra opción es no permitirlo y devolver error.
el objecto $json sería la representación de lo que se devolvía desde un principio en el servicio web. Como veis, unicamente hay que concatenar el nombre de la función pasada y los paréntesis. Sencillo, no?

Lado del cliente

Posiblemente sea más conocido, además de que hay muchas formas diferentes de hacerlo, pero voy a poner dos ejemplos usando jQuery.

El primero es la versión más simplista utilizando la función getJSON y la segunda, utilizando la función AJAX completa, con una función aparte incluida.


jQuery.getJSON("http://url.com/directorio/fichero.php?param1=valor1&format=json&callback=?, function(data)
    console.log(data);
}");

 

Con lo que tendríamos una llamada a un JSON que ejecuta la función anónima indicada, en este caso tan simple como imprimir por consola, pero hay iría la lógica, tan complidada como lo que se quiera hacer.

La versión extendida, podría ser:


function logicaCliente(data){
    console.log(data);
}
jQuery.ajax({
    "url": "http://url.com/directorio/fichero.php?param1=valor1&format=json",
    "dataType": "jsonp",
    jsonpCallback: 'logicaCliente'
});

 

Existen multiples variantes de la forma de hacer esto, pero espero que aquellos que en algún momento se encontraran, como yo, perdidos, puedan encontrar ayuda en este pequeño tutorial.

Fuentes:

Blog de Bob Ippolito

Use Jquery

jQuery JSONP

Google Closure: Mejora tu código JavaScript

La gente de Google no deja de sacar aplicaciones o herramientas útiles, todas las semanas nos encontramos con varias entradas en los blogs de Google sobre nuevas ideas que han surgido de la empresa, ya sea por iniciativa propia o como parte del tiempo que los Googlers pueden usar para proyectos propios.

En este caso, se trata de un proyecto que ha surgido del tiempo de varios de los trabajadores de Google para proyectos propios y se trata de una herramienta para optimizar y depurar el JavaScript de las páginas de los desarrolladores.

En concreto se trata de un compilador (Closure Compiler) que se encarga de traducir entre el javascript que se le pasa a una versión mejorada, en el que se elimina el “código muerto” y reescribe y minimiza el código para poder optimizar la carga del mismo por parte de los navegadores. Además, incluye una herramienta de inspección (Closure Inspector) como extensión de Firebug y que permite el mapeo del código, tracearlo e integrar pruebas unitarias al código.

Además, incluye una librería (Closure library) y unas plantillas (Closure Templates) para el uso eficiente de JavaScript en las páginas web.

Esta herramienta puede ser muy útil para los desarrolladores que tenemos grandes archivos JavaScript y que queremos mejorar y optimizar el resultado de nuestras páginas, con lo que se permitiría realizar aplicaciones ricas usando JavaScript al más puro estilo de Google Maps o Gmail.

Vía: Google Code Blog

Modificar la clase de un elemento con JavaScript

Supongo que la mayor parte de la gente ya sabe más o menos como hacerlo, y si no, hay miles de plugins y/o librerías javascript para hacerlo de una forma fácil y sin complicarse la vida. Pero para aquellos que tienen las ganas de hacerlo por ellos mismos y no han conseguido dar con la solución, voy a escribir un pequeño tutorial sobre como modificar la clase de un elemento con javascript.

El punto de partida es entender la idea: se pretende modificar la clase, el atributo class de un elemento de una página html. ¿Para que?, se preguntarán algunos: es bien sencillo, hay veces que resulta útil para poder modificar el estilo del elemento por uno prefijado de antemano y para ello es más fácil modificar su clase por una ya previamente creada y correctamente definida en un documento de hoja de estilo.

Para poder realizar dicha modificación es necesario poder acceder al elemento que queremos modificar, para ello hacemos uso de la función getElementById de JavaScript, que permite acceder a cualquier elemento del documento a través del atributo id. Su uso es algo como:

 document.getElementById('id');

Donde ‘id’ es el atributo id del elemento sobre el que se quiere acceder.

Una vez accedemos al elemento, podemos realizar diferentes acciones sobre el mismo, desde leer su contenido (a través de innerHTML) a modificar diversos aspecto.
Para realizar la modificación de la clase del elemento, se hace uso del atributo class del elemento devuelto por la anterior función, en concreto se podría modificar de la siguiente manera:

document.getElementById('id').className = "nuevoClass";

Donde “nuevoClass” representa el nuevo nombre de la clase que se le quiere dar al elemento.

Se puede realizar modificaciones más complejas, accesos y muchas más cosas por lo que recomiendo jugar un poquito para poder ver que es lo que nos interesa y que es lo que somos capaces de realizar.

Si te interesa este tema, puedes leer mucho más sobre el la modificación del DOM HTML con JavaScript en el manual del w3school.

Selects con vida gracias a jQuery

En esta nueva andadura del blog voy a escribir mucho sobre diseño/desarrollo web, sin lugar a duda una de mis mayores pasiones en el mundo de la informática y como no tengo tiempo ni posibilidad de escribir sobre todo lo que leo y muchas veces es mejor un buen enlace que un mal post, iré poniendo breves post con enlaces de páginas de donde leo información en la que vengan tutoriales/consejos/ayudas interesantes.

Es el caso de éste, en el que he descubierto un nuevo plugin para jQuery (llamado Javascript Image Combobox ) con el que es posible añadir más funcionalidad a los, en general sosos, selects de html, pudiendo añadir imágenes en ellos, se puede leer el artículo en anieto2k.

Colocaré en breves una prueba del mismo en la zona de pruebas.