Agitez votre trafic avec Oseox, Plus de 400 cours gratuits.
Profitez de nos meilleurs conseils, Recevez notre newsletter pro !
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'));
}
Une question ? Venez la poser sur notre forum développement web !
A propos de l'auteur
Antoine Beaumont est Consultant Web et Développeur indépendant. Fort d'une expérience construite au sein de grandes agences Web-marketing, pour tous types de comptes, il accompagne désormais les professionnels dans leurs projets Web, de façon souple et objective.
