Se simplifier AJAX avec Prototype

Une application Web est un dialogue client / serveur. Le serveur est en écoute et attend que les clients viennent lui demander un service. Un serveur HTTP répond aux requêtes HTTP. Il passe à différents programmes les paramètres envoyés par le client. Ces programmes retournent du code HTML au serveur qui termine la transaction en faisant suivre ce code au client, dans une réponse HTTP.

Jusqu'à il y a peu (les technologies du Web évoluent très vite), les applications Web étaient synchrones. C'est-à-dire que l'utilisateur effectue une action sur une page Web, son navigateur envoie la requête au serveur, interprète sa réponse et charge la nouvelle page correspondant au code reçu. Pendant tout cet échange, l'utilisateur a lâché sa souris pour attendre sagement de voir apparaître ce qu'il a demandé.

Aujourd'hui, il est possible de passer outre ce fonctionnement par l'utilisation toute récente de ce qui est désigné par l'acronyme bien connu : AJAX, soit : Asynchronous JavaScript And XML.
Alors, AJAX, qu'est-ce que c'est donc ?! Déjà, ce n'est pas UNE technologie. C'est l'utilisation conjointe de différentes technologies. Ensuite, on ne peut pas réellement dire que c'est une NOUVELLE technologie. Tout dépend du point de vue en fait. Les éléments qui lui servent de base (HTML, DOM, JavaScript, XML et objet XmlHttpRequest) lui sont bien antérieurs. Mais c'est l'utilisation de ces éléments qui est nouvelle.

Le pivot central est l'objet XmlHttpRequest (XHR). C'est le portage par Mozilla de l'objet XmlHttp développé par Microsoft et intégré à Internet Explorer 5 en tant qu'objet ActiveX. Cet objet permet d'envoyer des requêtes HTTP et de récupérer les données retournées par le serveur. Au fur et à mesure de l'avancée du traitement de la requête HTTP côté client puis côté serveur, l'objet passe par différents états. A chaque changement d'état, il déclenche un événement. Il est donc possible de suivre facilement la progression du traitement.

Il s'agit toujours d'échanges HTTP entre un client et un serveur mais cet échange est transparent pour l'utilisateur. Il n'attend plus forcément le chargement d'une nouvelle page en restant inactif. Son navigateur attend une réponse mais l'utilisateur, lui, a toujours la main. Classiquement, AJAX est utilisé pour mettre à jour dynamiquement une partie d'une page Web.

Le principal intérêt d'AJAX est d'apporter beaucoup plus d'interactivité aux applications Web. L'utilisateur n'a plus besoin de valider une page entière pour que ses actions soient prises en compte, il peut modifier l'interface à chaque clic. On évite ainsi le problème de la page blanche qui est affichée pendant quelques secondes le temps de charger toutes les données. Cette page blanche peut parfois dérouter l'utilisateur inexpérimenté.

L'autre avantage de réduire le volume des données transférées à chaque appel est que cela réduit le temps nécessaire au serveur pour répondre. On peut donc avoir des réactions quasi instantanées aux actions de l'utilisateur.

Un autre avantage est de décharger le serveur d'une partie du travail. Il collecte les informations demandées et les renvoie au client. A ce dernier de savoir quoi en faire, grâce à du code JavaScript. Son pendant négatif direct est la nécessité de disposer d'un navigateur Web supportant le JavaScript. Sans cela, impossible de naviguer correctement.

Il peut aussi y avoir un problème pour le développeur. Utiliser les technologies AJAX rajoute du code JavaScript et sans cadre précis, ce code finira par être brouillon et difficilement maintenable.

Attention aussi aux abus ! A trop chercher l'interactivité, on perd en accessibilité. AJAX peut également soulever des questions au niveau de la sécurité et du référencement.

Voilà ma définition d'un framework : ensemble de bibliothèques / classes / fonctions et de conventions permettant le développement rapide d'applications. Donne un cadre structuré et impose une rigueur entraînant la production de code fiable et facile à maintenir. Vous pouvez aussi consulter la définition de framework dans le dictionnaire de Developpez.com.

Etant un développeur CakePHP convaincu, l'intérêt d'utiliser ce genre de "cadres de travail" me paraît juste évident. Aux débuts du Web, développer ses pages statiques en HTML dans son coin, ça passait. Aujourd'hui on parle dynamique et on parle surtout efficace, rapide, sûr. Non aux développements à l'artisanal au fond du garage pour un code cochon. Dites oui aux frameworks ! Vive le code lisible ! Aimez-vous les uns les autres. Pardon...

Le JavaScript est généralement le parent pauvre du développement Web. Ce n'est évidemment pas une règle générale mais le code est souvent réalisé rapidement, pour répondre aux besoins sans chercher à affiner, tant que ça marche. Et il faut tester sur tous les navigateurs puisqu'aucun ne supporte le même standard. Prototype c'est le chevalier en armure rutilante qui vient sur son fier destrier blanc immaculé sauver le pauvre développeur de ces horreurs. Il vous offre les moyens d'écrire du code concis et clair. Se chargeant des problèmes de navigateurs et autres tâches pénibles, il vous laisse vous concentrer sur l'aspect métier, ce que doit faire votre code. Et pour ça, on lui dit un grand merci !

Sans cadre spécial pour utiliser AJAX, il faut disposer d'une fonction spécifique qui va d'abord instancier un objet XmlHttpRequest, de différentes façons suivant le navigateur utilisé. Elle doit ensuite associer une fonction aux changements d'états de l'objet XHR (appelons la xhrStateChange). Elle doit enfin ouvrir une connexion avec le serveur en spécifiant une URL et éventuellement des paramètres.

La main passe ensuite à la fonction que nous avons nommée xhrStateChange. Elle est appelée à chaque changement d'état de l'objet XHR. On peut lui demander d'exécuter du code suivant l'état qui lui est indiqué. La transaction est considérée terminée avec succès lorsque xhr.readyState vaut 4 et lorsque xhr.status vaut 200 (ou plus généralement quand il est inférieur à 400). Quand c'est le cas, il faut ensuite passer la réponse du serveur à une fonction qui va se charger de mettre à jour la page Web avec ces nouvelles informations.

Vous pouvez regarder le code proposé par siddh dans cet article pour voir ce qu'il est nécessaire de mettre en oeuvre dans ce type de fonctionnement.

Avec Prototype, plus besoin de vous embêter à savoir si votre script crée correctement l'objet XHR ou si vous attendez bien le bon état. Vous créez un objet, auquel vous indiquez la page à interroger, les éventuels paramètres et la fonction à appeler quand la réponse a été reçue. C'est un exemple simple, il est possible de préciser plus de choses mais nous verrons les détails plus tard. Une ligne peut donc suffire à gérer la requête asynchrone, sans avoir à se préoccuper des problèmes liés à la plateforme d'exécution du JavaScript !

A noter que pour des raisons de sécurité, les requêtes AJAX ne peuvent être faites que vers des URLs de même domaine que la page contenant le JavaScript en cours d'exécution (c'est-à-dire même protocole, même serveur et même port). Ceci vaut pour AJAX en général, Prototype n'a rien à voir là-dedans. Pour passer outre il faut par exemple passer par un "proxy" en PHP (lit le document demandé et en retourne le contenu) ou demander à l'utilisateur de diminuer les paramètres de sécurité de son navigateur.

L'un des paramètres (optionnel) est donc une liste d'options. Elle est passée sous forme d'un élément au format JSON (assimilable à un tableau associatif). Voici les différentes options accessibles et les valeurs qu'il est possible d'indiquer :

Les callbacks représentent différents points du cycle d'exécution d'une requête. Il est possible d'associer du code à ces étapes. Pour la liste complète des callbacks : la documentation officielle ou la traduction sur developpez.com (v1.4.0). Il faut être prudent en les utilisant car certains sont implémentés différemment suivant les navigateurs.

Les deux callbacks qui sont le plus couramment utilisés sont "onSuccess" et "onFailure". Les deux sont invoqués quand une requête est terminée. onSuccess si le code d'état de la requête est entre 200 et 299, onFailure sinon.
Ils reçoivent deux paramètres :
- L'objet XHR (souvent appelé "transport") ;
- L'évaluation JSON de la réponse si réception d'un en-tête X-JSON, null sinon.

• Ajax.Request(url[, options])
• Objet de base pour traiter les requêtes AJAX : instancie un objet XHR, envoie la requête au serveur et reçoit sa réponse. Il vous laisse indiquer quoi demander et quoi faire de la réponse.
• Paramètres : URL de la page à interroger et liste optionnelle des options.

new Ajax.Request(
	'http://mon-domaine.com/ma/page.php',
	{
		method: 'get',
		parameters: {nom1: valeur1, nom2: valeur2},
	}
);

Voir une page exemple

• Ajax.Updater(container, url[, options])
• Effectue les mêmes opérations que Request puis met à jour le contenu d'un élément de la page avec les données TEXTE reçues (celles contenues dans responseText).
• Paramètres : identifiant de l'élément DOM à mettre à jour, URL de la page à interroger et liste optionnelle des options. En plus des options décrites plus haut, l'objet Updater en propose deux autres :

• Updater('monDiv'...) : c'est toujours l'élément monDiv qui est concerné ;
• Updater({ success: 'monDiv' }...) : l'élément monDiv n'est mis à jour qu'en cas de réussite de la requête ;
• Updater({ success: 'monDiv', failure: 'monAutreDiv' }...) : le texte de la réponse sera affiché dans l'élément monDiv en cas de réussite ou dans l'élément monAutreDiv en cas d'échec.

new Ajax.Updater(
	'monDiv',
	'http://mon-domaine.com/ma/page.php',
	{
		method: 'get',
		parameters: {nom1: valeur1, nom2: valeur2},
		insertion: Insertion.Bottom
	}
);

Voir une page exemple

• Ajax.PeriodicalUpdater(container, url[, options])
• Effectue les mêmes opérations que PeriodicalUpdater mais répétées à intervalles réguliers. Comme Updater, ne prend en compte que le contenu de responseText.
• Paramètres : identifiant de l'élément DOM à mettre à jour, URL de la page à interroger et liste optionnelle des options. PeriodicalUpdater supporte les options de base ainsi que celles apportées par Updater (se référer aux sections dédiées). Il en propose également deux nouvelles :

Remarque : il est possible d'arrêter l'exécution d'un objet PeriodicalUpdater avec la méthode stop(). Pour le relancer, utiliser start().

new Ajax.PeriodicalUpdater(
	'monDiv',
	'http://mon-domaine.com/ma/page.php',
	{
		insertion: Insertion.Bottom,
		frequency: 5
	}
);

Voir une page exemple

C'est la méthode la plus utilisée : pour une requête donnée, on attend un certain type de réponse qui doit subir un traitement précis. Pour cela, lors de la déclaration de la requête, il faut préciser, dans les paramètres, les états auxquels réagir (les callbacks) et leur associer du code à exécuter.

new Ajax.Request(
	'http://mon-domaine.com/ma/page.php',
	{
		method: 'get',
		parameters: {nom1: valeur1, nom2: valeur2},
		onSuccess: function() { alert('Requête terminée avec succès.') },
		onFailure: function() { alert('Requête échouée.') }
	}
);

Si pour un même état de tous les objets XHR, un même code doit être exécuté, il est possible de ne pas l'écrire dans les déclarations de toutes les requêtes. Il suffit de l'enregistrer en tant que "responder".

Ajax.Responders.register({
	onException: function() { alert('Une exception a été levée !') };
});

Il est aussi possible de supprimer ce qui a été enregistré mais pour cela il faut avoir gardé une référence.

responder = function() { alert('Une exception a été levée !') };
Ajax.Responders.register({
	onException: responder
});
 
Ajax.Responders.unregister(responder);

• L'objet XHR (souvent appelé "transport") ;
• L'évaluation json de la réponse si réception d'un en-tête X-JSON, null sinon.

Dans les parties suivantes nous prendrons comme exemple l'instanciation suivante :

new Ajax.Request(
	'server.php',
    {
        onSuccess: function(transport, json) {
            document.write(
                "=> transport.responseText : " + transport.responseText
                + "<br />=> transport.responseXML : " + transport.responseXML
                + "<br />=> json : " + json
            );
        }
    }
);

Si aucun en-tête particulier n'est émis avec la réponse, le flux reçu est stocké dans l'attribut responseText de l'objet XHR.

<?php echo 'Ceci est un test d\'envoi de simple texte.' ?>

=> transport.responseText : Ceci est un test d'envoi de simple texte.
=> transport.responseXML : null
=> json : null

Si par contre un en-tête XML est émis en début de flux de réponse, son contenu sera accessible via les attributs responseText et responseXML.

<?php
header("Content-type: text/xml");
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
<root>
	<data>Donnee 1</data>
	<data>
		<sub1>Donnee 2</sub1>
		<sub2>Donnee 3</sub2>
	</data>
</root>

=> transport.responseText :  Donnee 1   Donnee 2  Donnee 3
=> transport.responseXML : [object XMLDocument]
=> json : null

responseText contient sous forme de texte l'ensemble de la réponse (balises et données). Les balises ne sont pas affichées dans notre exemple puisque le navigateur a essayé de les interprêter.
responseXML contient la réponse sous forme de flux XML et peut être manipulé comme tel.

Le JSON (JavaScript Object Notation) est plus simple, plus lisible et plus léger que le XML. Comme en plus, Prototype en facilite l'évaluation, il est conseillé de l'utiliser quand c'est possible. Si un en-tête X-JSON est émis en début de flux de réponse, Prototype l'analyse automatiquement et stocke le résultat dans l'objet json.
Il est possible de générer du JSON en PHP, soit avec l'implémentation native depuis PHP 5.2 soit en utilisant cette librairie.

<?php
$datas = array(
    'root' => array(
        'data' => 'Donnee 1', 
        'otherData' => array(
            'sub1' => 'Donnee 2',
            'sub2' => 'Donnee 3'
        )
    )
);
 
header("X-JSON: " . json_encode($datas));
?>

<?php
$datas = array(
    'root' => array(
        'data' => 'Donnee 1', 
        'otherData' => array(
            'sub1' => 'Donnee 2',
            'sub2' => 'Donnee 3'
        )
    )
);
 
require_once('JSON.php');
$json = new Services_JSON();
header("X-JSON: " . $json->encode($datas));
?>

=> transport.responseText :
=> transport.responseXML : null
=> json : [object Object]

L'objet json est alors facilement exploitable. Dans notre exemple, pour accéder à la valeur de "sub1", il suffit de passer par "json.root.otherData.sub1".