Faire de l’Ajax avec mootools

Continuons notre petite exploration des fonctionnalités de Mootools en découvrant à quel point ce dernier nous facilite la mise en place d’appels Ajax. Cet article aurait même pu s’appeler : “de l’utilité de l’usage d’un framework Javascript” tant notre propos est ici surtout de comparer l’approche Ajax traditionnelle et celle utilisant un framework.

Qu’est-ce qu’un framework ?
Au sens large, c’est un cadre de travail destiné à améliorer la productivité ainsi que la qualité de code du développeur. Plus concrètement ce sont principalement des bibliothèques de fonctions parfois accompagnées de conventions de codage. L’intérêt ? Imaginez que vous recommenciez indéfiniment à coder à partir de zéro, réinventant la roue à chaque fois. Si vous avez déjà plusieurs développements derrière vous, vous savez que vous êtes souvent amenés à réutiliser le même code. Un framework ce sont des briques logicielles éprouvés qui répondent efficacement à des problématiques récurrentes. Bon passons au code.

L’Ajax façon grand mère.

function getXhr(){
	var xhr = null; 

		if(window.XMLHttpRequest)
			xhr = new XMLHttpRequest(); 

		else if(window.ActiveXObject){
			try {
			         xhr = new ActiveXObject("Msxml2.XMLHTTP");
			         } catch (e) {
			             xhr = new ActiveXObject("Microsoft.XMLHTTP");
			         }
			}
			else {
			  alert("Votre navigateur ne supporte pas Ajax");
			  xhr = false;
				}
                                return xhr
			}

function InsertDiv(ajax_url, calque){
	var xhr = getXhr()

		xhr.onreadystatechange = function(){

			if(xhr.readyState == 4 && xhr.status == 200){

				if(calque != 'none') {

				document.getElementById(calque).innerHTML = xhr.responseText;

					}
				}
			}

			xhr.open("GET",'ajax_url',true);
			xhr.send(null);
		}

En bref la fonction getXhr permet d’instancier un objet XMLHttpRequest dont nous avons besoin pour communiquer avec le serveur. La fonction InsertDiv prend en paramètres l’url qui sera chargé de nous répondre et le calque qui recevra le contenu de cette réponse par un assez brutal InnerHTML. Je passe les détails sur le “onreadystatechange“, “readyState” et “status“, qui dépasseraient du cadre de cet article. Il serait évidement possible d’améliorer cette fonction de multiples manière, ne serais-ce par exemple qu’en prévoyant une réponse en cas d’erreur 404.

Nous avons ici choisi d’envoyer nos données en GET mais nous pourrions tout aussi bien les envoyer en POST en remplaçant les dernières lignes par :

	xhr.open("POST","ajaxLivre.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

	var = document.getElementById('maVariableId');
	maVariable = var.options[var.selectedIndex].value;
	xhr.send("maVariable="+maVariable);

Il faut admettre que même si nous avons un contrôle total sur notre code, ce dernier va vite devenir assez lourd. Imaginez les contorsions que vous allez devoir faire ne serais-ce que pour récupérer les paramètres en post si vous avez une dizaine de champs dans votre formulaire et plusieurs formulaire tant qu’on y est. Cela peut facilement tourner vite au casse tête. Et mootools face à ça ?

L’Ajax fête des fleurs !

Vous pouvez directement commencer par aller voir la démo proposé sur le site de mootools :
http://demos.mootools.net/Form.Send

Intéressons nous maintenant au code Javascript :

window.addEvent('domready', function() {

	$('monForm').addEvent('submit', function(e) {

		e.stop();

		var log = $('ajaxdiv').empty().addClass('ajax-loading');

		this.set('send', {onComplete: function(response) {

			log.removeClass('ajax-loading');
			log.set('html', response);
		}});

		//Send the form.
		this.send();
	});
});

Le fonctionnement est très simple : “monForm” est l’identifiant de votre formulaire qui devra être renseigné dans la balise <form>. Comme dans le précédent article, on a ajouté un gestionnaire d’événement. Cette fois pour le submit. Ce qui nous évite un tout moche “onsubmit=” dans la déclaration du formulaire. e.stop() nous permet d’éviter que le formulaire soit envoyé. “ajaxdiv” c’est ma div qui recevra le retour du serveur. Ici on le vide (empty) et on affiche un petit loader Ajax (addClass(’ajax-loading’)). Au retour du serveur (onComplete) on retire le loader (removeClass) et on affiche la réponse.

Remarquez deux petites choses qui finiront si nécessaire par définitivement confirmer l’élégance du procédé. D’une part, la déclaration du formulaire reste à un identifiant près ce qu’elle serait si on n’utilisait pas Ajax :

<form method=”POST” action=”monUrlAjax” id=”monForm”>

D’autre part, l’ensemble des variables du formulaire est envoyé comme ce serait le cas avec un formulaire normal sans avoir rien de plus à préciser que le nom des champs et leur valeur.

Conclusion

Je pense que ce petit exemple vous aura montré tout l’intérêt que peut avoir une approche via framework face à une approche classique. Bien sur utiliser un framework est moins bas niveau que l’appel direct à l’objet XMLHttpRequest, nos possibilités sont donc légérement réduites et le code un peu plus lourd. Mais au final le framework nous offre largement tout ce que nous avons besoin de faire et l’argument quand à la lourdeur est plus que discutable (surtout concernant mootools). Et cela est sans commune mesure face aux gains réalisés en terme de qualité de code et de maintenance.

Effet de slide avec mootools

Mootools est un excellent framework JS léger et modulaire qui saura vous rendre bien des services. Dans ce petit tutorial nous allons voir comment avec quelques lignes de code mettre en place un effet de slide simple et efficace. Pour commencer vous pouvez directement télécharger ici le code js.

L’archive comprend le code du framework et un fichier d’exemple avec différents effets de slide verticaux et horizontaux. Nous allons nous intéresser au toggle vertical, mais la démarche reste la même quel que soit l’effet choisi. Voici le code :

<script language="JavaScript" type="text/javascript">
<!--
window.addEvent('domready', function() {

	var myVerticalSlide = new Fx.Slide('slide');
	myVerticalSlide.toggle();

	$('v_toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.toggle();
	});

});
// -->
</script>

Evidemment il faudra veiller à ce que le framework soit bien appelé et conformément à l’exemple ci-dessus on mettra notre contenu dans une div avec un id égal à “slide”. Pour expliquer rapidement le code on met en place un gestionnaire d’événement au chargement du DOM. Lorsque un élément identifié par “v_toggle” sera cliqué cela lancera l’effet de slide.