Agitez votre trafic avec Oseox, Plus de 400 cours gratuits.
Profitez de nos meilleurs conseils, Recevez notre newsletter pro !
Loader AJAX avec jQuery
Réécrivons le script de mise en place d'un loader AJAX, avec jQuery cette fois.
La méthode $.get() de jQuery prend en paramètre l'URL de requête et renvoie un objet jXHR sur lequel on vient ajouter les actions à effectuer selon le résultat (requête terminée, requête terminée avec succès, erreur).
Ici, nous commençons par afficher le loader, puis nous exécutons la requête. Sur cette requête, nous définissons les actions :
- .complete : lorsque la requête est terminée (toujours appelée, peut importe si la requête s'est bien déroulée ou non) : suppression du loader.
- .success : lorsque la requête s'est bien déroulée : affichage du texte retourné par la requête.
- .error : lorsque la requête ne s'est pas bien déroulée : affichage d'un message d'erreur.
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
/*** HTML ***/
<div id="ajaxBox"></div>
Fichier JAVASCRIPT
/*** Javascript ***/
// Au chargement de la page
$(window).load(function()
{
// Affichage du loader
ajaxBox_loader(true);
// Execution de la requête
$.get('http://site.com/script.php')
.complete(function()
{
// Suppression du loader
ajaxBox_loader(false);
})
.success(function(pXhr)
{
// Affichage de la réponse
ajaxBox_setText(pXhr.responseText);
})
.error(function()
{
// Affichage d'un message d'erreur
ajaxBox_setText('Error...');
});
});
// 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').append('<img id="ajaxBox_loader" src="loader.gif" />');
// Suppression de l'élement d'id #ajaxBox_loader
else
$('#ajaxBox_loader').remove();
}
// 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').append('<p>'+ pText +'</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.
