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