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.