Recuperare dati Json cross-domain con Jquery
Come forse molti di voi sapranno, Jacascript, per ragioni di sicurezza, non è in grado di fare richieste AJAX su domini diversi da quello in cui lo Script viene eseguito, infatti se ci provate l'oggetto XMLHttpRequest sarà sempre NULL.
E' necessario quindi ricorrere ad uno stratagemma, che prevede di realizzare una pagina proxy (in PHP in questo esempio) sul proprio dominio, che si occuperà di connettersi alla pagina residente sul dominio esterno per prelevare i dati XML o JSON che ci servono, e successivamente realizzare uno script lato client, che otterrà i dati dal nostro proxy piuttosto che direttamente dalla pagina residente su un altro dominio.
Più o meno la teoria è questa, ma passiamo alla pratica!
Innanzitutto creiamo la nostra pagina proxy.php e mettiamoci dentro il codice per prelevare l'XML o il JSON da una URL esterna. Questo sarà il codice:
$URL=$_GET['URL'];
$URL = rawurldecode($URL);
$URL = stripslashes($URL);
// make sure curl is installed
if (function_exists('curl_init')) {
// initialize a new curl resource
$ch = curl_init();
// set the url to fetch
curl_setopt($ch, CURLOPT_URL, $URL);
// don't give me the headers just the content
curl_setopt($ch, CURLOPT_HEADER, 0);
// return the value instead of printing the response to browser
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// use a user agent to mimic a browser
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0');
$content = curl_exec($ch);
echo $content;
// remember to always close the session and free all resources
curl_close($ch);
} else {
// curl library is not installed so we better use something else
}
Il nostro Script lato server è pronto. Possiamo finalmente passare ad occuparci dello Script lato Client.
Incorporiamo l'ultima versione della libreria Jquery nella pagina, e scriviamo poi il seguente codice:
function get_prod()
{
$url="http://www.urlesterno.it";
$.ajax({
type: "GET",
url: "proxy.php?URL=" + $url,
dataType: 'json',
success: function(msg){
//IN questo caso ciclo i dati JSON ottenuti
for(var n = 0; n < msg.length; n++)
{
tipo=msg[n].type;
&n
bsp; typology=msg[n].typology;
alert (tipo + typology)
}
},
error:function(XMLHttpRequest, status, error){
//MESSAGGI PER RISALIRE ALL ERRORE
alert("XMLHttpRequest: "+XMLHttpRequest);
alert("Impossibile recuperare i Dati: "+status);
alert("Error: "+error);
alert("XMLHttpRequest readyState: "+XMLHttpRequest.readyState);
alert("XMLHttpRequest responseText: "+XMLHttpRequest.responseText);
},
beforeSend: function(){
//alert("BEFORELOADING")
},
complete: function(){
//alert("COMPLETE")
}
});
}
Il gioco è fatto il ciclo che trovate dentro success è quello che serve per leggere tutti i dati ricevuti tramite JSON.
Buon Lavoro :-)