Mise en place d’un loader AJAX

Script d'un loader Ajax

Pour mettre en place un système d'AJAX loader, souvent une petit image gif animée, nous commençons par insérer l'image dans le DOM via Javascript avant d’exécuter la requête AJAX. Ensuite, lorsque la requête AJAX est terminée, on le retire, toujours via Javascript.

Nous créons donc une fonction Javascript ajaxBox_loader() permettant, via le DOM, d'ajouter ou de retirer l'image de loader selon le paramètre qui lui est passé (true ou false). Un temps de latence factice de 2 secondes a ici été ajouté (dans le fichier PHP), afin de bien visualiser l'effet de loader.

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, déclencher la fonction ajaxBox_update()
window.onload = ajaxBox_update;




// Fonction effectuant la requête AJAX

function ajaxBox_update()
{
// Afficher le loading
ajaxBox_loader(true);

// Récupération de l'objet XHR
var xhr = getXhr();

// On assigne une fonction qui, lorsque l'état de la requête change, va traiter le résultat
xhr.onreadystatechange = function()
{
// readyState 4 = requête terminée
if (xhr.readyState == 4)
{
// status 200 = page requêtée trouvée
if (xhr.status == 200)
ajaxBox_setText(xhr.responseText);
// Page non trouvée
else
ajaxBox_setText('Error...');

// Stopper le loading
ajaxBox_loader(false);
}
};

// Préparation et éxecution de la requête
var url = 'http://site.com/script.php';
xhr.open('GET', url, true);
xhr.send(null);
}




// Fonction ajoutant ou supprimant le 'loader'

function ajaxBox_loader(pState)
{
// Ajout de l'image de loader
if (pState === true)
{
// Ajout d'un élement <img> d'id #ajaxBox_loader
var ajaxBox = document.getElementById('ajaxBox');
var img = ajaxBox.appendChild(document.createElement('img'));
img.id = 'ajaxBox_loader';
img.src = 'loader.gif';
}
// Suppression de l'image de loading
else
{
// Suppression de l'élement #ajaxBox_loader
var ajaxBox_loader = document.getElementById('ajaxBox_loader');
if (ajaxBox_loader)
ajaxBox_loader.parentNode.removeChild(ajaxBox_loader);
}
}




// 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)
{
var elt = document.getElementById('ajaxBox');
var p = elt.appendChild(document.createElement('p'));
p.appendChild(document.createTextNode(pText));
}