Caricamenti cross-domain con jsonp e jQuery

Finalmente qualcuno ha spiegato proprio bene quale è il concetto del jsonp:

http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

e qualcuno ha scritto due esempi concreti e senza possibilità di confusione, su come usare jsonp:

http://www.jquery4u.com/json/jsonp-examples/#.UE3rURgdK3p

Da questi due articoli ho finalmente capito bene come funziona il jsonp per  caricare json cross-domain, ovvero quando da un sito ‘http://www.primosito.it’ vogliamo caricare e lavorare con i dati forniti da un altro sito ‘http://www.secondosito.it’, tramite json. Il cross-domain vale anche per i sottodomini, ovvero ‘http://secondo.primosito.it’.

La notizia buona è possibile caricare jsonp senza interventi lato server.

La notizia cattiva è che  è comunque necessario aver accesso al file json che si vuole utilizzare.

Qui di seguito riporto un adattamento molto semplice della procedura con intervento sul json:

- questa è la funzione che chiama il json vero e proprio (con jQuery):

$(document).ready(function(){
var url = ‘http://www.occhioalcuore.it/jquery-jsonp.json’;
$.getJSON(url+”?&callback=?”);
});

Per far diventare la chiamata un jsonp in effetti basta aggiungere il parametro url ‘?&callback=?’; jQuery lo riconoscerà  automaticamente.

Il json dal canto suo dovrà  essere passato come parametro di una funzione (nel nostro caso ‘data’)

Infatti il json avrà  questo aspetto:

data(

{
“glossary”: {
“title”: “Esempio titolo”,

}
}

);

Come si vede in realtà il json è diventato uno script: in questo modo non ci sono problematiche di cross domain (gli script non sono soggetti a queste restrizioni) e la funzione che gestisce i dati viene eseguita non appena il file viene chiamato.

Nella pagina poi dovremmo dichiarare al funzione ‘data’ con ciò che vogliamo che esegua:

data = function(data){
$(‘div’).append(‘<div>’+data.glossary.title+’</div’);
}

 

ESEMPIO IN AZIONE: http://www.adrianisimona.it/jquery-jsonp.html

 

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>