Ajax entre sites Web différents
Première partie: afficher des données prises sur un autre site
L'objet XMLHttpRequest à dans la définition actuelle une limitation, on ne peut charger de données en mode asynchrone que sur le même site.
Cette limitation n'existe pas en Flash, il est possible de récupérer des données sur d'autres sites, avec une mesure de sécurité, c'est que le site qui demande les données soit enregistré dans une liste stockée sur le site qui les fournit.
Mais il est possible de combler cette lacune, d'échanger des données entre sites différents en toute sécurité en utilisant Ajax et un script PHP coté serveur.
Dans un premier temps nous verrons comment lire simplement un fichier sur un autre site, puis ensuite nous expliqueront comment envoyer des données à une autre site avec les mesures de sécurité qui s'imposent.
Le principe
Lorsqu'il ne s'agit que de lire un fichier, le principe est simple:
On suppose que l'autre site contient un fichier de texte nommé ajax-cross-get.txt. On veut afficher son contenu dans une page de ce site.
- On utilise la commande POST pour lancer un script PHP sur ce site. Aucune
donnée ne lui est fournie, par mesure de sécurité il
contient dans une variable l'URL du fichier à récupérer
sur l'autre site.
Il est recommandé de ne pas passer d'URL en paramètre, ce serait une faille de sécurité. - Le script utilise la commande PHP file_gets_content() pour lire le fichier distant.
- Il recopie le contenu dans un fichier nommé ajax-cross-get.txt
sur le présent site.
Là encore il est recommandé de ne pas passer le nom du fichier à écrire en paramètre, ce serait une faille de sécurité critique. - Le fichier est lu avec la commande Ajax GET et son contenu affiché dans la page qui appelle le script.
Noter que les commandes sont enchaînées comme cela est expliqué dans le tutoriel Comment enchaîner des requêtes Ajax.
Aperçu du code des scripts
Le script JavaScript
var xhr = createXHR();
var script = "ajax-cross-get.php";
var filename = "ajax-cross-get.txt";
xhr.onreadystatechange=function()
{
if(xhr.readyState == 4)
{
retrieve(filename);
}
};
xhr.open("POST", script, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(null); La methode POST permet de lancer un script PHP, auquel dans le cas présent on n'envoie aucune donnée. Mais lorsque le script (ci-dessous) est exécuté, et que l'état de l'objet XHR est 4, on appelle la fonction retrieve qui utilise la methode GET pour charger le fichier local ajax-cross-get.txt donné en paramètre et généré par la fonction PHP.
Le script PHP
$url = "http://www.site-distant.tld/ajax-cross-get.txt";
$content = file_get_contents($url);
$nfile = fopen("ajax-cross-get.txt", "w");
if($nfile != false)
{
fwrite($nfile, $content);
fclose($nfile);
} Vous devez changer le contenu de la variable $url et fournir le domaine et l'extension du site réel.
La démo
- Code source JavaScript.
- Code source PHP.
- Archive avec démo et code source.
Contient aussi une démo HTML.