Script AJAX avec jQuery

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>');
}