[AJAX] Rafraichir les données automatiquement

**thecatz** · 08/02/2013, 16h03

Bonjour,
J'ai une nouvelle question, cette fois ci sur le rafraichissement de données une fois celles ci récupérées en Ajax.

je range le resultat de ma demande ajax dans une variable MonAjax : "MonAjax.responseText;" Cette réponse fait appel à un fichier php qui contient une valeur qui change toutes les minutes. Et donc j'aimerais faire en sorte que la réponse ajax affiche cette valeur sans avoir besoin de faire F5 .

J'ai essayé de mettre un setInterval mais cela n'a aucun effet.
Voici le code complet au cas où :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
46
47
48
49
50
51
52
53
54
55
 
<html>
<head>
 <script src="js/gauge.js" type="text/javascript" language="javascript"></script>
 
<script type='text/JavaScript'>
 
 
function maFonctionAjax()
{
  var MonAjax;
  if (window.XMLHttpRequest)
  {
    // Mozilla, Safari, ...
    MonAjax = new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    // IE
    MonAjax = new ActiveXObject('Microsoft.XMLHTTP');
  }
  else
  {
    alert("Votre navigateur n'est pas adapté pour faire des requêtes AJAX...");
    MonAjax = false;
  }
 
  MonAjax.onreadystatechange = function()
  {
    if (MonAjax.readyState == 4 && MonAjax.status == 200)
    {
 
	  document.getElementById("ma_div").innerHTML = MonAjax.responseText;
    }
  };
 
  MonAjax.open('GET',"compt.php",true);
 
  MonAjax.send(null);
}
 
maFonctionAjax();
 
window.onload = function(){setInterval("refresh",1000)};
		</script>
 
</head>
 
<body>
		<div id="ma_div"></div>
		<canvas id="nbr" width="200" height="120"></canvas>
 
	</body>
 
</html>

Merci

**Bovino** · 08/02/2013, 16h15

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.onload = function(){setInterval("refresh",1000)};

Encore une fois, un peu de lecture : Les fonctions de rappel (callback) ou les utilisations cachées de eval()

Ca pourrait t'être utile de chercher un peu avant de poster...

**thecatz** · 08/02/2013, 16h22

Merci, je ne savais pas que cela se nommait comme ça, je vais donc lire la documentation.

**Bovino** · 08/02/2013, 16h30

Certes, mais se renseigner sur la syntaxe de setTimeout() aurait dû être ton premier réflexe avant de poster...

**thecatz** · 08/02/2013, 16h54

Voici mon raisonnement : SetTimeout indique un délai avant exécution et setInterval déclenche une opération à intervalles réguliers . Donc vu que je recherche a rafraichir automatiquement ma valeur je dois bien utiliser setInterval. J'ai donc lu la documentation, j'ai pas trop tout compris mais dans mon cas je devrait utiliser cette syntaxe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval(maFonction, délai);

et donc ici je souhaite déclencher maFonctionAjax toutes les x secondes pour quelles s’exécute et donc afficher la nouvelle valeur.
Donc j'ai écris

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.onload = function(){setInterval(maFonctionAjax(),1000)};

Mais bien sur cela ne marche pas.

**thecatz** · 08/02/2013, 17h15

J'ai fini par trouver tout seul :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 setInterval('maFonctionAjax()', 1000)

Avec les balises codes !!!

**Bovino** · 08/02/2013, 17h20

Ah... ça fait plaisir de voir que tu n'as pas lu le lien donné...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval(maFonctionAjax, 1000)

est préférable à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval('maFonctionAjax()', 1000)

quant à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval(maFonctionAjax(), 1000)

c'est une grosse faute : cela affecte au timer la valeur de l'exécution de la fonction et non l'exécution de la fonction elle-même.

**thecatz** · 08/02/2013, 17h56

Ok, merci c'est noté je ne ferais plus cette erreur. Par contre j'ai tout de même une autre interrogation, dans mon cas j'utilise un élément graphique qui affiche une gauge et je recherche à la faire s’animer suivant la valeur renvoyer par la partie ajax.

Cette valeur est contenue dans ma fonction maFonctionAjax qui est récupéré en httprequest dans une page php. Le tout vas dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

MonAjax.responseText

. Ensuite je passe cette valeur en argument dans une deuxième fonction celle qui affiche ma gauge ( élément graphique)

Mais avec l'utilisation de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval(maFonctionAjax, 10000)

, je me suis rendu compte que cela rafraichissait tout l’élément graphique alors que j'aurais voulu ne rafraichir que la valeur. Je pense que de rafraichir maFonctionAjax et la bonne solution car elle va chercher toutes les x secondes la nouvelles valeurs en httpRequest mais c'est apres que j'ai un problème, comment faire en sorte que la fonction gauge ne se rafraichisse pas complétement, mais juste l'argument transmit reponse se rafraichisse.

Voici le résultat actuel des choses, où l'on voit le problème qui saute aux yeux

avec un rafraichissement toutes les 10 sec.

http://www.ledvdclub.powa.fr/zero/

et voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
<head>
 <script src="js/gauge.js" type="text/javascript" language="javascript"></script>
 
<script type='text/JavaScript'>
 
function gauge(reponse){
 
  var gaugeTopTarget = document.getElementById('nbr');
        var gaugeTop = new Gauge(gaugeTopTarget);
 
        gaugeTop.setOptions({
            lines: 12,
            angle: 0.15,
            lineWidth: 0.44,
            colorStart: '#6FADCF',
            colorStop: '#8FC0DA',
            strokeColor: '#E0E0E0'
 
         });
 
        gaugeTop.maxValue = 15000;
        gaugeTop.set(reponse);
        gaugeTop.animationSpeed = 32;
 
};
 
function maFonctionAjax()
{
  var MonAjax;
  if (window.XMLHttpRequest)
  {
    // Mozilla, Safari, ...
    MonAjax = new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    // IE
    MonAjax = new ActiveXObject('Microsoft.XMLHTTP');
  }
  else
  {
    alert("Votre navigateur n'est pas adapté pour faire des requêtes AJAX...");
    MonAjax = false;
  }
 
  MonAjax.onreadystatechange = function()
  {
    if (MonAjax.readyState == 4 && MonAjax.status == 200)
    {
      gauge(MonAjax.responseText);
	  document.getElementById("ma_div").innerHTML = MonAjax.responseText;
 
    }
  };
 
  MonAjax.open('GET',"compt.php",true);
 
  MonAjax.send(null);
}
 
maFonctionAjax();
 
 setInterval(maFonctionAjax, 10000)
		</script>
 
</head>
 
<body>
		<div id="ma_div"></div>
		<canvas id="nbr" width="200" height="120"></canvas>
 
	</body>
 
</html>

Merci

**thecatz** · 13/02/2013, 16h51

bonjour,
J'avance toujours sur ce sujet et en faite j'ai trouver mon erreur mais malgré la lecture des documentations, certaines choses ne sont pas écrites et s'apprennent avec la pratique, ce qui manque chez moi

En faite je prends le cas suivant concret je fais toujours mon appel en httpRequest et je passe en argument la valeur récupérer et j'ai appris à le faire sous la forme : Nom de la fonction(argument){Mes paramètres} . Voici le rendu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function Magauge(reponse) {
 
    var g = new JustGage({
    id: "gauge",
    value: (reponse),
    min: 0,
    max: 20000,
    title: ""
    });
 
	};

Comment puis je faire pour passer mon argument directement dans new JustGage au lieu d'englober le tout dans une fonction Magauge, qui me pose donc des problèmes par la suite avec mon ajax car à chaque requête je recréer complètement la jauge.

voici mon code de test où je passe bien l'argument récupérer en httprequest mais aprés je ne vois pas comment passer l'argument dans créer deux fois mon compteur gauge, et cela me pose ensuite des problèmes avec setInterval...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head>
    <script src="raphael.2.1.0.min.js"></script>
    <script src="justgage.1.0.1.min.js"></script>
</head>
<body>
<div id="gauge" class="200x160px"></div>
    <script>
	function maFonctionAjax()
{
  var MonAjax;
  if (window.XMLHttpRequest)
  {
    // Mozilla, Safari, ...
    MonAjax = new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    // IE
    MonAjax = new ActiveXObject('Microsoft.XMLHTTP');
  }
  else
  {
    alert("Votre navigateur n'est pas adapté pour faire des requêtes AJAX...");
    MonAjax = false;
  }
 
  MonAjax.onreadystatechange = function()
  {
    if (MonAjax.readyState == 4 && MonAjax.status == 200)
    {
      JustGage(MonAjax.responseText);
	 // document.getElementById("ma_div").innerHTML = MonAjax.responseText;
 
    }
 
  };
 
  MonAjax.open('GET',"compt.php",true);
 
  MonAjax.send(null);
}
 
maFonctionAjax();
	function JustGage(reponse) {
 
    var g = new JustGage({
    id: "gauge",
    value: (reponse),
    min: 0,
    max: 20000,
    title: ""
    });
 
	};
    </script>
</body>
</html>

Merci pour votre éventuelle aide

[AJAX] Rafraichir les données automatiquement

AJAX

Discussions similaires

Partager

Partager