[AJAX] Rafraichir les données automatiquement

Version imprimable

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:

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

08/02/2013, 15h15
Bovino

Code:

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...
08/02/2013, 15h22
thecatz

Merci, je ne savais pas que cela se nommait comme ça, je vais donc lire la documentation.
08/02/2013, 15h30
Bovino

Certes, mais se renseigner sur la syntaxe de setTimeout() aurait dû être ton premier réflexe avant de poster...
08/02/2013, 15h54
thecatz

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:

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:

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

Mais bien sur cela ne marche pas.:mouarf:
08/02/2013, 16h15
thecatz

J'ai fini par trouver tout seul :

Code:

setInterval('maFonctionAjax()', 1000)

Avec les balises codes !!!
08/02/2013, 16h20
Bovino

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

Code:

setInterval(maFonctionAjax, 1000)

est préférable à

Code:

setInterval('maFonctionAjax()', 1000)

quant à

Code:

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.
:roll:

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:

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:

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:

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

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:

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:

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