AJAX cross-domain avec flXHR

• La librairie JavaScript flXHR: http://flxhr.flensed.com/.
• Téléchargement sur flXHR-1.0.5 ou http://flxhr.flensed.com/download.php.
• Un navigateur ou browser supportant la technologie Flash.

• 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.

<?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é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.

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 ).

<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 :

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.

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