Tutoriel Mootools : Ajax

Comment utiliser mootools :

Pour pouvoir utiliser mootools il faudra télécharger la librairie, pour cela rien de plus simple.

Vous pouvez directement la telecharger sur cette adresse : http://mootools.net/download, vous devrez cocher la case Ajax pour pouvoir utiliser la librairie Ajax.

Spécifications de la classe Ajax de mootools


Classe Ajax - hérite de la classe XHR

La classe Ajax retient deux paramètres principaux :

  • Url : contient l'url du fichier sur lequel s'effectue la requête
  • Options : (facultatif) Un objet contenant les options que vous pourrez donner à votre requete Ajax
  • Méthodes :
  • request : execute la requête Ajax
  • evalScripts : evalue les scripts contenus dans le message reçu
  • getHeader : retourne les headers reçus du fichier executé
  • setHeader : fonction permettant d'ajouter ou de modifier les headers envoyés au script executé
  • send : ouvre la connexion XHR et envoie les informations au fichier
  • cancel : annule la requête en cours
  • Evenements :
  • onRequest : reçoit une fonction qui sera exécutée quand la requête est lancée
  • onStateChange : reçoit une fonction qui sera exécutée quand l'état d'évolution de la requête change
  • onSuccess : reçoit une fonction qui sera exécutée quand la requête est réussie
  • onFailure : reçoit une fonction qui sera exécutée quand la requête est échouée
  • onComplete : reçoit une fonction qui sera exécutée quand la requête est réussie (équivalent à onSuccess)
  • Valeurs :
  • running : contient true si la requête est en cours et false sinon
  • response : un objet contenant la reponse de la requete sous trois formats texte, objet et xml. Pour y accéder il suffit de mettre le nom du format comme champ de l'objet: this.response.xml, this.response.text, this.response.object, vous pourrez y accèder dans l'événement onSuccess
  • data : Vous pouvez fournir les paramêtres de la requete directement sur cette variable sous format d'une requete texte ( x=hello&y=bye ) ou un objet ( { 'x':'hello', 'y':'bye' } ) ou un objet d'élément d'un formulaire
  • update : peut contenir l'élément à mettre à jour avec le message reçu lors du succès de la requête
  • evalScripts : par défaut contient false ; mettre true pour activer l'evaluation du code Javascript contenu dans le message reçu lors du succès de la requête
  • evalResponse: par défaut contient false ; mettre true pour activer l'evaluation de tout le contenu du message reçu lors du succès de la requête, quel que soit le type du code lu
  • Fonctions utiles :
  • Object.toQueryString : retourne un string, c'est une fonction assez utile pour pouvoir transformer directement les champs d'un objet en texte en format requête

Utilisation de la classe Ajax

Une requete simple vers un fichier texte

Méthode :

Pour commencer on spécifie l'url du fichier auquel on veut effectuer la requête :

Note : Vous pourrez voir le fichier en cliquant ici

var url = "http://youssef.boubia.com/tutorials/mootools/ajax/exemple1/fichier.txt";

On va spécifier dans nos options que le message retourné par la requête mette à jour l'élément avec l'id = "exemple_texte_mootools" :

Note : $(id) est une fonction mootools presque equivalente à getElementbyId en javascript, vous pouvez utiliser getElementbyId(id) à sa place pour obtenir l'élément DOM si vous ne désirez pas vous en servir

var options = { update : $('exemple_texte_mootools') };

On crée maintenant l'objet ajax qui va executer cette requête :

var monObjetAjax= new Ajax(url, options);

Il ne reste après qu'a executer la requête :

monObjetAjax.request();

Exemple :

Source :

Vous pouvez télécharger l'exemple fonctionnel ici : ZIP, TAR.GZ

Une requete vers un script PHP

Méthode :

Note : vous pouvez remplacer le script php par n'importe quel script appartenant à n'importe quel language du moment qu'il va fournir du contenu à la requête javascript, par contre pour pouvoir envoyer des informations au script, il faudra que votre document accepte de traiter les informations envoyées avec les méthodes GET ou POST

On spécifie l'url du script :

Note : on suppose que ce script php quand il reçoit dans une variable appelée message en GET contenant la valeur 'Bonjour', il fait un echo de 'Salut' ; sinon il renvoie 'Je ne comprend pas'. Cet exemple présente un cas simple d'échange d'informations et de traitement coté serveur.

On spécifie l'url du script :

var url = "http://youssef.boubia.com/tutorials/mootools/ajax/exemple2/dialogue.php";

On va spécifier dans nos options : 1.la mise à jour de l'élément avec l'id = "exemple_php_mootools", 2.préciser la méthode de requete GET, 3.préciser les données de la requête

var options = { update : $('exemple_php_mootools'), method : 'get', data : 'message=Bonjour' };

On crée l'objet ajax :

var exemple2Ajax= new Ajax(url, options);

On execute la requête :

exemple2Ajax.request();

Exemple :

Veuillez saisir votre message ! ( Saisir 'Bonjour' pour obtenir 'Salut' )

Source :

Vous pouvez télécharger l'exemple fonctionnel ici : ZIP, TAR.GZ

Applications de la classe Ajax

Mooooooooo

Ces exemples restent des exemples de base et les possibilités de la classe sont multiples ainsi que son application.

J'aurais souvent l'occasion dans mes tutoriels de l'utiliser d'une façon plus ou moins complexe, vous aurez donc l'occasion de pouvoir contourner toutes les facettes de cette méthode et de ce qu'elle peut apporter au développment web

La classe peut être appliquée conjointement avec des techniques de développement comme Json, la gestion dynamique du dom, RPC, etc... ; des applications ou solutions en Java, .NET, Flash, etc...

Vu le domaine applicatif assez large d'Ajax, je ne peux détailler assez largement les cas d'utilisation de la méthode que via des tutoriels ou exemples séparés

je vous invite donc pour l'instant à essayer de vous y mettre avec les exemples proposés, de me poster un commentaire avec vos questions et remarques, ou d'attendre tout simplement le nouveau tutoriel de la même catégorie.