Tips: JSONP e bye bye “same domain policy”
Molte volte capita di scontrarsi con i limiti imposti dalla security del SAME DOMAIN POLICY, ma grazie a JSONP (che è un complemento del formato dati JSON) è possibile bypassare questa imposizione presente nei browser.
JSONP è un modello che consente a una pagina WEB di poter utilizzare dati in formato JSON che arrivano da un Server appartenente ad un dominio diverso dal chiamante (Cross Domain).
Come poter bypassare il limite imposto dai browser.
Per ovviare al limite imposto dal browser occorre agire sull’unico tag html che non viene bloccato ovvero il tag <script> andando ad usare il parametro src e poi andando a definire una funzione JS che verrà eseguita dalla funzione di callBack.
Con JSONP, il browser fornisce un “prefisso” Javascript al server nell’URL src per il tag script; per convenzione il browser fornisce il prefisso come argomento nella stringa inviata al Server, per esempio per la TimeLine di twitter (http://www.twitter.com/statuses/user_timeline/99252766.json?callback=twitterCallback&count=10) twitterCallback è l’argomento passato nella query string al Server, poi il Server stesso fa il “wrapper” della sua risposta JSON con questo prefisso prima di inviarla al browser. La risposta che riceve il browser non è un semplice “dato”, ma uno script, esempio per twitter: twitterCallback([{“in_reply_to_user_id_str”:null,”text”:”ciao”}])
che quindi il browser interpreta e se nella pagina vi è una funzione con lo stesso nome (twitterCallback) questa viene eseguita e viene modificato lo stato del browser.
Esempio di uso di JSONP per la TimeLine di Twitter
<html>
<head>
<script language=”javascript”>
function twitterCallback (obj){
alert (‘inside’);
var html = ”;
for (var i = 0; i < obj.length; i++) {
//alert (obj[i].text);
html += ‘<li>’ + obj[i].text + ’ (’ + obj[i].created_at + ‘)</li>’;
}
document.getElementById(‘twitter_list’).innerHTML = html;
}
</script>
</head>
<body >
<div id=”twitter_list”></div>
<script type=”text/javascript” src=”http://www.twitter.com/statuses/user_timeline/99252766.json?callback=twitterCallback&count=10”> </script>
</body>
</html>
Con questo semplice esempio è possibile, per esempio, aggiungere un div nel vostro sito con gli ultimi 10 “cinguettii” che avete inviato a Twitter, facile no?
JSONP ha sfortunatamente alcuni limiti nell’uso di JSONP che sono:
1. quello di supportare solo richieste GET;
2. non avere un handler degli errori che necessita di inserire nel payload l’errore così da poter essere opportunamento trattato al ritorno alla pagina HTML
Per poter gestire più facilmente il caso di success o error da parte del Server, senza dover gestire noi l’errore è possibile usare DOJO ed in particolare dojo.script.get.
Esempio
dojo.require(“dojo.io.script”);
dojo.io.script.get({
callbackParamName : “callback”,
url: “http://miositoWeb.com/getData?id=2”,
load : function(response, ioArgs) { console.log(response);return response;},
error : function(response, ioArgs) {console.log(response);return response;}
});
Dove occorre porre particolare attenzione che callbackParamName non è il nome della funzione da richiamare, ma il parametro di callback definito dal Servizio Server. La funzione che verrà eseguita in caso di success è la funzione load.
Comunque nei prossimi POST vedremo un esempio di uso di dojo.
p.s.:
Vi ricordo che per ricavare il VS Twitter ID dovete:
1. http://api.twitter.com/1/users/show/<user>.xml
Ovvero nel mio caso:
http://api.twitter.com/1/users/show/pmilani72.xml
Per avere le info sul vostro utente ed in particolare ricavere il valore riportato nel tag <id>
2. Poi accedete alla TimeLine con:
http://www.twitter.com/statuses/user_timeline/<YourID>.json?callback=twitterCallback&count=10ovvero:
http://www.twitter.com/statuses/user_timeline/99252766.json?callback=twitterCallback&count=10
