[AJAX] Barre de chargement pendant une requête mysql

Bonjour à tous, je vais essayer d'être clair en exposant mon problème.

La situation:
J'ai une page avec 3 onglets, chaque onglet utilise ajax pour appeler une page php qui elle fait une requête sur une base de données mysql afin d'afficher les résultats voulus.

J'aimerai savoir si il serait possible, pendant que la requête mysql se fait, d'afficher un "Chargement en cours" et de l'enlever et afficher mes résultats une fois la requête finie.

1 onglet

Code:

---

<a href="javascript:maFonctionAjax('X','Y')">

---

maFonctionAjax

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

function maFonctionAjax(X,Y) { var OAjax; if (window.XMLHttpRequest) OAjax = new XMLHttpRequest(); else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); OAjax.open('POST',"page_avec_script.php",true); OAjax.onreadystatechange = function() { if (OAjax.readyState == 4 && OAjax.status==200) { if (document.getElementById) { if (OAjax.responseText =='true') { /* OK */ document.getElementById('details').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>'; }else{ /* PAS OK */ document.getElementById('details').innerHTML='<font color=RED>'+OAjax.responseText+'</font>'; } } } } OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded'); OAjax.send('X='+X+'&Y='+Y);   }

---

page_avec_script.php

Code:

---

blabla requêtes mysql, affichage des résultats dans un tableau

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

var OAjax; if (window.XMLHttpRequest) OAjax = new XMLHttpRequest(); else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); if(OAjax){document.getElementById('tempo').innerHTML = 'En attente'} // Si l'objet OAjax a pu être créé, on affiche un message dans la div 'tempo' OAjax.open('POST',"page_avec_script.php",true); OAjax.onreadystatechange = function() { if (OAjax.readyState == 4 && OAjax.status==200) { document.getElementById('tempo').innerHTML = ''; // On supprime le message d'attente if (document.getElementById) { if (OAjax.responseText =='true') { /* OK */ document.getElementById('details').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>'; }else{ /* PAS OK */ document.getElementById('details').innerHTML='<font color=RED>'+OAjax.responseText+'</font>'; } } } } OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded'); OAjax.send('X='+X+'&Y='+Y);   }

---

Il ne s'agit que d'un exemple rapide.
Tu peux l'adapter selon tes besoins. En particulier pour effacer le loader, mieux vaut tester uniquement sur readyState == 4 puis faire le test sur status...

Yes, cela fonctionne, c'était si simple... Merci :)

Tu peut générer un gif animé sur http://www.ajaxload.info/ et mettre a la place de "En attente".

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

var OAjax; if (window.XMLHttpRequest) OAjax = new XMLHttpRequest(); else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP'); // // if(OAjax){document.getElementById('tempo').innerHTML = 'En attente'} // Tu peut mettre un Gif animé a la place du texte :   if(OAjax){document.getElementById('tempo').innerHTML = '<img src="./images/loading.gif" />'}   OAjax.open('POST',"page_avec_script.php",true); OAjax.onreadystatechange = function() { if (OAjax.readyState == 4 && OAjax.status==200) { document.getElementById('tempo').innerHTML = ''; // On supprime le message d'attente if (document.getElementById) { if (OAjax.responseText =='true') { /* OK */ document.getElementById('details').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>'; }else{ /* PAS OK */ document.getElementById('details').innerHTML='<font color=RED>'+OAjax.responseText+'</font>'; } } } } OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded'); OAjax.send('X='+X+'&Y='+Y);   }

---