[AJAX] Animation durant requête

Bonjour,

j'ai une requête SQL qui prend environ 5 sec à s'afficher totalement.
Comment afficher une animation par dessus (div) durant ce temps de chargement ?

Merci.

Bonsoir,

Adapte ce code à ton besoin

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
    <head>
        <title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
        <script type='text/JavaScript'>
 
             function getXhr(){
                                var xhr = null; 
                if(window.XMLHttpRequest) // Firefox et autres
                   xhr = new XMLHttpRequest(); 
                else if(window.ActiveXObject){ // Internet Explorer 
                   try {
                            xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                else { // XMLHttpRequest non supporté par le navigateur 
                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
                   xhr = false; 
                } 
                                return xhr
            }
 
            function go(){
                var xhr = getXhr()
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                        document.getElementById('divResultatRequete').innerHTML=xhr.responseText;
                        document.getElementById('gifLoad').style.display="none";
                    }else{
                        document.getElementById('gifLoad').style.display="inline";
                    }
                }
                xhr.open("GET","ajax.php",true);
                xhr.send(null);
            }
        </script>
    </head>
    <body onload="go()">
        <img src="tonGifAnime.gif" style="display:none" id="gifLoad"/>
        <div id="divResultatRequete"></div>        
    </body>
</html>

Le tutoriel est ici: Web 2.0, allez plus loin avec AJAX et XMLHttpRequest

A+.

Salut,

Comme te le dis Andry, tu affiche une image (avec display:block par exemple) quand ta requête est en cours.

Quand la requête est terminée et que tu reviens en js, tu cache l’image (display:none).

C'est ce qui est le plus simple.

En plus de cela, voici un lien qui contient des chouettes effets :

http://www.ajaxload.info/#preview

Courage

beegees