In questo articolo tratteremo la possibilità di effettuare richieste asincrone con javascript eliminando la limitazione che si ha utilizzando richieste AJAX con l’oggetto XMLHttpRequest (e suoi corrispondenti su Internet Expolorer) per la quale non posso effettuare richieste su domini diversi da quello in cui è ospitata la pagina web richiedente. La soluzione è chiamata JSONP (JSON with Padding). Ovviamente questo sistema ha implicazioni sulla sicurezza, e quindi bisognerà essere cauti nel suo utilizzo.
Nel nostro esempio andremo a calcolare l’area di un cerchio, creando un servizio web che, preso un parametro raggio, restituirà il valore dell’area.
Il formato di comunicazione tra il servizio web ed il client che fa la richiesta sarà JSON.
Ipotizziamo di avere una pagine web simile alla seguente, dove ci sarà una div risultato nella quale apparirà il risultato dell’elaborazione. Prima della chiusura del body è presente l’inclusione del file javascript.
<!doctype html> <html lang="it"> <head> <meta charset="utf-8" /> <title>Calcolo area cerchio JSONP</title> </head> <body> <h1>Calcolo area cerchio</h1> <div id="risultato"> </div> <script src="cerchio.js"></script> </body> </html>
Il file javascript cerchio.js ha al suo interno un oggetto cerchio con due metodi: uno per effettuare la richiesta al servizio web, ed un altro (callback) che visualizzerà il risultato nella pagina web. Potete notare come, oltre a passare il parametro raggio al servizio web, verrà passato anche un riferimento alla funzione javascript che vogliamo eseguire una volta ricevuta la risposta. Si creerà quindi una vera e propria chiamata a questa funzione creando un inclusione di script che ha come indirizzo quello del servizio web. Lanciamo la richiesta al caricamento della pagina tramite cerchio.creaRichiesta();.
var cerchio = {
visualizzaRisultato: function(data) {
var contenitoreRisultato = document.getElementById("risultato");
contenitoreRisultato.innerHTML = data.area;
},
creaRichiesta: function() {
var script = document.createElement("script");
script.src = "http://www.dominiodelservizio.com/area_cerchio.php?callback=cerchio.visualizzaRisultato&raggio=5";
document.body.appendChild(script);
}
}
window.onload = function(){
cerchio.creaRichiesta();
}
Una possibile implementazione lato server del servizio web sarà la seguente:
$raggio = isset($_GET['raggio']) ? $_GET['raggio'] : 1;
$area = $raggio * $raggio * pi();
echo $_GET['callback'].'({"area" : "'.$area.'"})';
in questo modo un esempio di risposta del server sarà: cerchio.visualizzaRisultato({”area” : “78,539816339745″});
A patto di creare sistemi sicuri lato server, JSONP è un ottimo metodo per creare richieste dai nostri javascript. Ha anche lati negativi, come la limitazione nell’utilizzo del formato JSON ed il fatto che per i nostri script sarà difficile intercettare errori 404. Nei casi in cui i nostri servizi sono tutti residenti sullo stesso dominio, il metodo "classico" per creare richieste AJAX rimane quello preferibile.
