Script AJAX avec MooTools

Loader AJAX avec MooTools

Reprenons maintenant le script de mise en place d'un loader AJAX avec MooTools.

L'objet Ajax de MooTools prend en paramètre l'URL de requête ainsi que les actions à effectuer selon le résultat (requête terminée, requête terminée avec succès, erreur).

Commençons par afficher le loader. Ensuite, le principe est quasi identique à celui de jQuery puisque nous avons ici aussi à définir des actions :

• onComplete : lorsque la requête est terminée (qu'elle soit en erreur ou non) : suppression du loader.
• onSuccess : lorsque la requête s'est bien passée : affichage du texte retourné par la requête.
• onFailure : lorsque la requête ne s'est pas correctement déroulée : affichage d'un message d'erreur.

Ensuite, on exécute la requête AJAX avec la méthode .request().

Fichier PHP

/*** Fichier PHP (script.php)
*
* Nous utilisons la fonction sleep() de PHP, permettant
* ici de simuler une latence de 2 secondes du serveur,
* afin de bien visualiser l'effet du "loader",
* puis nous affichons un résultat.
*/

<?php
sleep(2); // Attendre 2 secondes

echo 'Hello World!';
?>

Fichier HTML

<div id="ajaxBox"></div>

Fichier Javascript

// Au chargement de la page
window.addEvent('load', function()
{
// Affichage du loader
ajaxBox_loader(true);

// Préparation de la requête AJAX et définition des actions
var ajax = new Ajax('http://site.com/script.php',
{
onComplete: function()
{
// Suppression du loader
ajaxBox_loader(false);
},
onSuccess: function(pResponseText)
{
// Affichage de la réponse
ajaxBox_setText(pResponseText);
},
onFailure: function()
{
// Affichage d'un message d'erreur
ajaxBox_setText('Error...');
}
});

// Exécution de la requête
ajax.request();
});

// Fonction d'ajout ou de suppression du "loader"
function ajaxBox_loader(pState)
{
// Ajout d'un élement <img> d'id #ajaxBox_loader
if (pState === true)
{
$('#ajaxBox').grab(new Element('img',
{
id: 'ajaxBox_loader',
src: 'loader.gif'
});
}
// Suppression de l'élement d'id #ajaxBox_loader
else
$('#ajaxBox_loader').destory();
}

// Fonction de mise à jour du contenu de la div #ajaxBox
// Ajout d'un element <p> contenant le message, dans le div #ajaxBox
function ajaxBox_setText(pText)
{
$('#ajaxBox').grab(new Element('p'));
}