JavaScript  »  Articoli  »  Programmazione Javascript 

Server JSONP

Lo script server-side è abbastanza banale e non presenta criticità. Guardiamo subito il sorgente:

<?php 

$books = array(); 

$books[] = array("id" => "b1", "title" => "title1-biblio1", "author" => "author1-biblio1"); 
$books[] = array("id" => "b1", "title" => "title2-biblio1", "author" => "author2-biblio1"); 
$books[] = array("id" => "b1", "title" => "title3-biblio1", "author" => "author3-biblio1"); 
$books[] = array("id" => "b1", "title" => "title4-biblio1", "author" => "author4-biblio1"); 
$books[] = array("id" => "b1", "title" => "title5-biblio1", "author" => "author5-biblio1"); 

echo $_GET['cb'] ."(".json_encode($books).");"; 

?>

In questo esempio i dati sono stati scritti direttamente nel codice per semplicità, ma ovviamente in un'applicazione davvero utile i libri dovrebbero essere salvati in un datastore sia esso un database o un file xml. Una volta riempito il vettore $books esso viene encodato in JSON tramite la funzione json_encode e la stringa ritornata viene anticipata con il parametro cb ricevuto e le corrette parentesi in modo da generare una chiamata alla funzione JavaScript.

Se il server ricevesse una chiamata a libri.php?cb=update_table l'output generato sarà infatti cosi:

update_table({ .... } );

In questo modo la funzione di callback può essere invocata automaticamente una volta scaricato tutto lo script sulla macchina client.

Ovviamente è stato mostrato lo script utilizzato solamente per la biblioteca numero 1, ma le altre si comportano esattamente allo stesso modo.

Guardiamoci attorno

Librerie JavaScript

Nonostante implementare un client JSONP non sia un compito molto arduo (e l'esempio visto ne è la prova) è sempre meglio, una volta capita la tecnica e i meccanismi nascosti, utilizzare una libreria che permetta una migliore suddivisione dei compiti all'interno dell'applicazione e una maggiore sicurezza e configurabilità.

Ultimamente sono molti i framework che hanno aggiunto al loro set di funzioni anche alcuni componenti in grado di effettuare richieste JSONP.

Nelle ultime versioni di JQuery la funzione $.getJSON è stata estesa ed è ora disponibile anche per richieste JSONP. L'esempio di utilizzo proposto nella documentazione ufficiale è simile a questo:

var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?"
$.getJSON(url, function(data){
  showMyData(data);
});

Basta infatti creare un url assoluto che punti ad un host diverso da quello originario e che contenga un punto interrogativo al posto del parametro callback. In automatico il motore interno di JQuery sostituirà questo punto interrogativo con una funzione interna definita a runtime (e distrutta una volta completata la richiesta) che invocherà la funzione passata come parametro a $.getJSON. Con questo approccio JQuery “nasconde” l'intera implementazione di JSONP all'utilizzatore.

Un buon esempio funzionante che utilizza le API di Flickr è presente su questa pagina.

Anche Dojo Toolkit presenta alcune funzionalità per realizzare applicazioni basate su JSONP com per esempio la funzione dojo.io.script.get() che permette di scaricare script utilizzando il tag apposito. Per approfondire vi rimando a questo documento.

Servizi web JSONP

La crescita di questa tecnica ha in qualche modo costretto i principali portali web che non volessero restare indietro tecnologicamente ad esportare alcuni servizi e API anche utilizzando JSONP. In questo paragrafo analizzeremo alcuni di questi servizi disponibili a chiunque.

Quello che presenta maggiori funzionalità da questo punto di vista è senza dubbio Flickr, la community di video e foto sharing. Ciascun servizio esporto è disponibile anche in formato JSONP tramite l'utilizzo del parametro format=json. Oltre all'invio di questo parametro è necessario allegare alla richiesta il metodo server-side da invocare (basta dare un'occhiata a questa guida per trovare il metodo richiesto), la API key richiedibile in maniera totalmente gratuita e ovviamente la callback (di default viene utilizzata jsonFlickrApi ma comunque consiglio di utilizzarne una propria).

Per approfondire sull'utilizzo di JSONP il miglior punto di partenza rimane la documentazione ufficiale.

Un altro sito che permette l'utilizzo remoto tramite JSONP è il famoso motore di ricerca Yahoo che tra i tanti servizi esposti permette anche di effettuare ricerche utilizzando il proprio motore di ricerca. Per approfondimenti vi consiglio di leggere questo documento.

Altri articoli

Altre guide

Altre newsletter