{"id":1482,"date":"2012-10-11T06:00:05","date_gmt":"2012-10-11T04:00:05","guid":{"rendered":"http:\/\/www.manuelmarangoni.it\/sir-bit\/?p=1482"},"modified":"2013-05-26T13:59:54","modified_gmt":"2013-05-26T12:59:54","slug":"ajax-chiamate-e-invio-post-a-siti-esterni","status":"publish","type":"post","link":"https:\/\/www.manuelmarangoni.it\/sir-bit\/1482\/ajax-chiamate-e-invio-post-a-siti-esterni\/","title":{"rendered":"Ajax – Chiamate e invio post a siti esterni"},"content":{"rendered":"

Le applicazioni Ajax, nel web, sono state una vera rivoluzione, visto che permettono di ricaricare un codice specifico senza dover fare il refresh completo della pagina.
\nSe ancora non avete ben chiaro come funziona l’Ajax o vi scontrate con la prima volta con questo meccanismo, vi invito a dare un’occhiata a un mio vecchio articolo<\/a> prima di proseguire, dove mostro le basi del suo utilizzo con un esempio completo.<\/p>\n

In tempi recenti mi sono trovato nella situazione di dover “contattare” un server esterno usando Ajax, cio\u00e8 a dover effettuare una chiamata Ajax dal sito www.primosito.it al sito www.altrosito.it<\/strong> . E qui mi sono scontrato con la sua pi\u00f9 grossa limitazione.
\nPer questioni di sicurezza, infatti, questo tipo di chiamate esterne (che prendono il nome di cross domain<\/em>) sono proibite dai browser. La limitazione \u00e8 utile per evitare reindirizzamenti da parte di craker, ma pu\u00f2 darci fastidio quando – per esempio – dobbiamo controllare la login dell’utente passando attraverso un sito (e un database) che non \u00e8 nostro.<\/p>\n

Fortunatamente esistono dei sistemi per aggirare il problema.
\nL’esempio in questo articolo mostra come inviare dei POST (le cui chiavi sono “email” e “password”) attraverso una chiamata Ajax<\/strong>.
\nPer la comprensione delle script si richiede che abbiate almeno una conoscenza di base dell’ajax. Si richiede inoltre che abbiate la possibilit\u00e0 di chiedere ai gestori del secondo server (dove risiede www.altrosito.it) di salvare una riga di codice nel loro file, che sar\u00e0 la pagina di ricezione dei post.<\/p>\n

Chiamata.php<\/h3>\n

Innanzitutto scaricatevi l’ultima versione di jquery, che potete trovare a questo indirizzo<\/a>.
\nIl nostro file di chiamata (presente sul nostro sito www.primosito.it) prender\u00e0 il nome di “chiamata.php”: qui dovrete includere il jquery scaricato:<\/p>\n

\n\n\n\n
\n
1<\/pre>\n<\/td>\n
\n
<<\/span>script type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"jquery.js\"<\/span>><\/<\/span>script><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Adesso passiamo al codice vero e proprio della pagina.
\nAl click del link “premi”, sar\u00e0 avviata la funzione jquery, che effettuer\u00e0 la chiamata ajax. Come \u00e8 facile vedere, ho imposto che i parametri “email” e “password” siano inviati come POST.
\nQuesti sono gli unici elementi che dovrete modificare<\/strong> nello script, oltre all’url di destinazione: quest’ultimo dovr\u00e0 puntare alla pagina del secondo sito che si occuper\u00e0 di raccogliere i dati POST (nel nostro caso avr\u00e0 nome “risposta.php”).
\n<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19<\/pre>\n<\/td>\n
\n
<<\/span>script><\/span>\r\njQuery(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\r\n\r\n\t$(<\/span>'#click'<\/span>)<\/span>.click<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\r\n\r\n\t\t$.ajax<\/span>(<\/span>{<\/span>\r\n\t\t  type:<\/span> \"POST\"<\/span>,<\/span>\r\n\t\t  url:<\/span> \"http:\/\/www.altrosito.it\/risposta.php\"<\/span>,<\/span>\r\n\t\t  data:<\/span> {<\/span> email:<\/span> \"prova@gmail.com\"<\/span>,<\/span> password:<\/span> \"password\"<\/span> }<\/span>\r\n\t\t}<\/span>)<\/span>.done<\/span>(<\/span>function<\/span>(<\/span> messaggio )<\/span> {<\/span>\r\n\t\t  alert(<\/span> \"Data Saved: \"<\/span> +<\/span> messaggio )<\/span>;<\/span>\r\n\t\t}<\/span>)<\/span>.fail<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span> alert(<\/span>\"error\"<\/span>)<\/span>;<\/span> }<\/span>)<\/span>;<\/span>\r\n\r\n\t}<\/span>)<\/span>;<\/span>\r\n\r\n}<\/span>)<\/span>;<\/span>\r\n<\/<\/span>script><\/span>\r\n\r\n<<\/span>a href=<\/span>\"javascript:void(0)\"<\/span> id=<\/span>\"click\"<\/span>><\/span>Premi<\/<\/span>a><<\/span>br><<\/span>br><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Cosa succeder\u00e0 se la chiamata avr\u00e0 successo? Tutto quello che sar\u00e0 stampato in “risposta.php” verr\u00e0 restituisto in “chiamata.php” (potrebbe essere il semplice echo di una stringa, oppure interi file xml, ecc.)<\/p>\n
Risposta.php<\/h3>\n
Il file “risposta.php” si occuper\u00e0 di recuperare i POST inviati.
\nCome vedete di seguito, il trucco sta nella prima riga: la funzione header()<\/em> indica quali siti lasciar passare. Nel nostro caso, con un asterisco lasceremo passare un qualsiasi sito<\/strong> che cerchi di contattare la pagina. Al posto dell’asterisco \u00e8 preferibile inserire l’indirizzo di un sito specifico (es: http:\/\/www.primosito.it), in modo da garantire una certa sicurezza al server.<\/p>\n