Ajax – Chiamate e invio post a siti esterni

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.
Se 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 prima di proseguire, dove mostro le basi del suo utilizzo con un esempio completo.

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

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

Chiamata.php

Innanzitutto scaricatevi l’ultima versione di jquery, che potete trovare a questo indirizzo.
Il nostro file di chiamata (presente sul nostro sito www.primosito.it) prenderà il nome di “chiamata.php”: qui dovrete includere il jquery scaricato:

1

<script type="text/javascript" src="jquery.js"></script>

Adesso passiamo al codice vero e proprio della pagina.
Al click del link “premi”, sarà avviata la funzione jquery, che effettuerà la chiamata ajax. Come è facile vedere, ho imposto che i parametri “email” e “password” siano inviati come POST.
Questi sono gli unici elementi che dovrete modificare nello script, oltre all’url di destinazione: quest’ultimo dovrà puntare alla pagina del secondo sito che si occuperà di raccogliere i dati POST (nel nostro caso avrà nome “risposta.php”).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script>
jQuery(document).ready(function(){

	$('#click').click(function(){

		$.ajax({
		  type: "POST",
		  url: "http://www.altrosito.it/risposta.php",
		  data: { email: "prova@gmail.com", password: "password" }
		}).done(function( messaggio ) {
		  alert( "Data Saved: " + messaggio );
		}).fail(function() { alert("error"); });

	});

});
</script>

<a href="javascript:void(0)" id="click">Premi</a><br><br>

Cosa succederà se la chiamata avrà successo? Tutto quello che sarà stampato in “risposta.php” verrà restituisto in “chiamata.php” (potrebbe essere il semplice echo di una stringa, oppure interi file xml, ecc.)

Risposta.php

Il file “risposta.php” si occuperà di recuperare i POST inviati.
Come vedete di seguito, il trucco sta nella prima riga: la funzione header() indica quali siti lasciar passare. Nel nostro caso, con un asterisco lasceremo passare un qualsiasi sito che cerchi di contattare la pagina. Al posto dell’asterisco è preferibile inserire l’indirizzo di un sito specifico (es: http://www.primosito.it), in modo da garantire una certa sicurezza al server.

Se tutto andrà a buon fine, nel nostro sito come risposta avremo “Mail esatta”.

1
2
3
4
5
6
7
8
9
10

header('Access-Control-Allow-Origin: *');
if(!isset($_POST['email']) || !isset($_POST['password'])){
	echo "Mancano i parametri";
	die();	
}

if($_POST['email']=='prova@gmail.com' && $_POST['password']=='password')
	echo "Mail esatta";
else
	echo "Errato!";