AJAX cross-domain avec flXHR

L'objet de ce court article est de montrer comment faire des requêtes AJAX entre deux domaines distincts. Par défaut et pour des raisons de sécurité ce type d'appel AJAX est interdit.

Cette interdiction oblige donc à passer par un intermédiaire (proxy) qui exécute directement la requête (en réalité, il invoque l'URL) pour :

  • en récupérer la réponse ;
  • et la transmettre au JavaScript.

Ensuite, au développeur de faire ce qu'il souhaite de la réponse.

Le plugin Flash Player ne supportant pas les communications synchrones, la librairie flXHR ne permet donc pas les appels synchrones.
Cette librairie vous est utile si vous n'avez besoin que de faire des appels asynchrones.
2 commentaires Donner une note à l'article (4.5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Prérequis

Sur le serveur cible des requêtes AJAX

  • Il est nécessaire d'y installer un fichier de règles d'autorisation interdomaine crossdomain.xml (spécifications Flash sur ®adobe.com).
  • Le fichier de règles crossdomain.xml placé sur un domaine distant A, autorise ou non l'accès aux fichiers de ce domaine A depuis le domaine B où est installée la librairie flXHR.
  • Un exemple de fichier crossdomain.xml autorisant des sites externes à accéder à des ressources internes via AJAX.
 
Sélectionnez

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/crossdomain-
policy.dtd">
	<cross-domain-policy>
		<site-control permitted-cross-domain-policies="master-only"/>
		<allow-access-from domain="*"/>
		<allow-http-request-headers-from domain="*" headers="*"/>
	</cross-domain-policy>
  • Installer le fichier crossdomain.xml à la racine du serveur cible de la requête AJAX.

Déploiement des librairies sur votre site web

  • Décompresser le fichier flXHR-1.0.5.zip téléchargé préalablement (voir ).
  • Installer le contenu du dossier flensed-1.0/deploy/ dans le dossier intégrant vos scripts JavaScript.

Requêteur AJAX

La première chose à faire est d'inclure dans votre page Web le fichier flXHR.js :

Ce fichier (cette librairie) a des dépendances qu'il vous faut installer aussi (voir ).

 
Sélectionnez

<script type="text/JavaScript" src="./js/flXHR.js"></script>

Ensuite, nous pouvons travailler sur notre fonction AJAX que nous appellerons callAJAX.

Notre méthode AJAX va gérer deux événements distincts :

  • le premier pour la gestion des erreurs en cas d'échec de la requête appellera la fonction handleError(errObj) ;
  • le second pour le traitement à effectuer au retour de la requête AJAX appellera la fonction handleLoading(XHRobj).

Nous intégrerons directement la définition de ces deux fonctions dans la définition de la fonction callAjax.
Dans notre exemple, nous n'avons paramétré notre fonction qu'avec l'URL cible de notre requête AJAX, libre à vous de la paramétrer selon vos besoins.

Le corps de la fonction callAjax :

 
Sélectionnez

function callAJAX(url) {
	var flproxy = new flensed.flXHR( {
		xmlResponseText : false,
		onerror : function handleError(errObj) {
			// ici on indique ce que l'on fait en cas d'erreur
			// toutes les informations relatives à l'erreur
			// sont stockées dans l'objet errObj
		},
		onreadystatechange : function handleLoading(XHRobj) {
			if (XHRobj.readyState == 4) {
				// ici on indique ce que l'on fait
				// avec la réponse à la requête
				// AJAX stockée dans XHRobj.responseText;
			}
		}
	});
		// ici on a le choix entre la méthode GET ou POST pour appeler l'URL
	flproxy.open("GET", url);
	flproxy.send(null);
}

Il suffit d'appeler la méthode callAJAX avec pour paramètre l'URL cible pour effectuer la requête AJAX.

Remerciements

Je tiens à remercier eusebe19 et jacques_jean pour leur relecture attentive de cet article.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+