[AJAX] affichage image-script toutes les 5 secondes

Version imprimable

16/02/2011, 18h03
phillag

[AJAX] affichage image-script toutes les 5 secondes

Bonjour,
Je souhaite afficher sous une forme ou une autre une grandeur provenant
d'une requête php et la rafraichir toutes les 5 secondes.
Comme par exemple afficher l'heure ou bien une valeur boursière.
Cette grandeur est accessible par un script php.
J'ai exploré plusieurs solutions.
Si je fais un refresh de la page automatique, on voit la page vibrer
dans le navigateur toutes les 5 secondes.
Je peux faire une frame et ne rafraichir que la sous page de la frame
mais ce n'est pas esthétique.
Je sais afficher cette grandeur sous forme d'une image en créant l'image
avec la bibliothèque graphique php ou perl mais comment l'actualiser
toutes les 5 secondes dans le code html?
Utiliser javascript? le xhtml?
merci d'avance pour votre aide
16/02/2011, 18h08
andry.aime

Bonsoir,

Utilise setInterval pour lancer une requête AJAX toute les 5 secondes.

A+.
26/02/2011, 23h25
phillag

merci andry

merci andry mais comment recuperer avec setinterval() une variable
d'un script php?
Je ne trouve que des exemples compliqué sur cette fonction dans
la littérature du web.
merci d'avance
27/02/2011, 15h40
phillag

je ne m'en sors pas

j'ai vraiment besoin d'aide.
J'ai juste besoin de charger toutes les secondes une variable "string" de
10 caractères fabriqués par une page php extérieure à la page.
je ne comprends pas d'être obligé d'utiliser les jQuery.
C'est du béton armé, c'est pas compatible avec tous les navigateurs
et en plus il faut charger 150k octets de librairies dans la page, ce qui
alourdit la page considérablement.

je pense à une autre méthode
il est possible de déclarer les variables javascript dans la page php
et de faire appel au script une fois par seconde avec setinterval depuis
la page html?
quelque chose comme cela:

setinterval (<script type="text/javascript" src="page.php">,100)

ou bien en utilisant eval? setinterval( eval(./page.php),100)

merci d'avance pour votre aide.
27/02/2011, 20h21
Vil'Coyote

soit tu rafraichit ta page toute les 10 seconde et tu utilises tes deux méthodes (j'ai pas vérifié si elles sont bonne)

soit tu utilise de l'ajax pour appeler ta page et rafraîchir uniquement la zone de ton image.

et lorsque l'on dit ajax non ne parle pas forcément d'utiliser une librairie javascript comme jquery ou autre. tu peux très bien générer ton appel manuellement.

tu peux jeter un oeil à ça : http://siddh.developpez.com/articles/ajax/

Salut,

Essaie ce 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test</title>
		<script type="text/javascript">//<![CDATA[
                        var xhr=null;
                        var ajaxDelay=5000;
                        var ajaxTimer=null;
                        var ajaxinUse=false;
 
                        function ajaxCreate(){
                                var e;
                                if(xhr)return xhr;
                                if(window.XMLHttpRequest){
                                        try{xhr=new XMLHttpRequest();}
                                        catch(e){xhr=null;}
                                }
                                else if(window.ActiveXObject){
                                        try{xhr=new ActiveXObject('Msxml2.XMLHTTP');}
                                        catch(e){
                                                try {xhr=new ActiveXObject('Microsoft.XMLHTTP');}
                                                catch(e){xhr=null;}
                                        }
                                }
                                if(!xhr)alert('Impossible de créer une instance XMLHTTP');
                                return xhr;
                        }
 
                        function ajaxProc(){
                                if(ajaxinUse||!ajaxCreate())return false;
                                ajaxinUse=true;
                                xhr.open('GET','page.php?time='+Math.random(),true);
                                xhr.onreadystatechange=function(){
                                        var e;
                                        try{
                                                if(xhr.readyState===4){
                                                        if(xhr.status===200||xhr.status===0){
                                                                document.getElementById('var').innerHTML=xhr.responseText;
                                                        }
                                                        ajaxinUse=false;
                                                        ajaxTimer=setTimeout(ajaxProc,ajaxDelay);
                                                }
                                        }catch(e){
                                                try{
                                                        xhr.onreadystatechange=function(){}
                                                        xhr.abort();
                                                }catch(e){}
                                                finally{
                                                        ajaxinUse=false;
                                                        ajaxTimer=setTimeout(ajaxProc,ajaxDelay);
                                                }
                                        }
                                }
                                xhr.send(null);
                        }
 
                        window.onload=function(){ajaxProc();};
                //]]>
                </script>
	</head>
	<body>
		<div id="var"></div>
	</body>
</html>

02/03/2011, 16h27
phillag

merci à tous
le code de eric2a fonctionne bien, j'arrive à transmettre le contenu
dynamiquement. Je ne suis pas loin du but.
J'ai un dernier soucis.
Tout le contenu texte s'affiche dans les balises <div id=ajax>
or je ne voudrais utiliser qu'une variable à chaque fois
j'ai donc modifié en faisant un eval comme cela
Code:

1 2 3 reponse=xhr.responseText); eval(reponse); document.getElementById('ajax').innerHTML=v1;
mais l'ennui, c'est que le texte de la variable v1 s'affiche automatiquement dans la balise div sans que je fasse de document.write.
Or je voudrais utiliser la variable v1 comme variable javascript pour des
calcul js à l'intérieur de div et non l'afficher comme texte.
Il n'existe pas de innerJavascript?
merci encore de votre aide précieuse.
02/03/2011, 22h11
Eric2a
Avec cette ligne

Code:

var reponse=xhr.responseText;

La variable reponse contient déjà la valeur souhaitée.

Par exemple si la réponse est censée être un pseudo...
Code:

1 2 3 4 5 6 7 8 var reponse=xhr.responseText; var s=''; if(reponse!='') s='Bonjour '+reponse+' ! La forme ?'; else s='Je parle pas aux inconnus.'; document.getElementById('ajax').innerHTML=s;
Ou alors, j'ai pas compris.
02/03/2011, 22h47
phillag

merci eric2a

je n'arrive pas à faire sortir la variable réponse.
lorsque je fais par exemple, un alert(reponse) à l'interieur de deux balise
<script></script> dans la page, il s'affiche "undefine"
lorsque j'écris

Code:

windows.onload=function(){ajaxProc() ; alert(reponse);}

rien ne s'affiche.
Pour résumer, je n'arrive pas ) faire sortir la chaine reponse de l'intérieur
de cette parenthèse:

Code:

xhr.onreadystatechange=function(){....}

Je ne comprends pas cette expression, est-ce une fonction?
elle n'est appelée de nulle part, pourquoi?
En résumé:
Je voudrais faire sortir, soit la variable réponse toute entière c'est à dire
xhr.reponseText, ou bien alors, l'ensemble de clés, valeurs contenu dans "reponse" (l'une ou l'autre des deux solution).
merci d'avance.
03/03/2011, 11h27
Eric2a
Pour que la variable reponse ne soit plus locale à la fonction :

On la déclare avec les autres variables globales.
Code:

1 2 3 4 5 var xhr=null; var ajaxDelay=5000; var ajaxTimer=null; var ajaxinUse=false; var reponse='';
On n'utilise plus le mot-clé var dans la fonction.

Code:

reponse=xhr.responseText;

Citation:

Envoyé par Phillag

xhr.onreadystatechange=function(){....}
Je ne comprends pas cette expression

Je te recommande de suivre le lien conseillé par andry.aime & Vil'Coyote.
03/03/2011, 23h48
phillag

merci eric2a

Mais, rien à faire, je n'arrive pas à faire transiter de variable depuis
l'intérieur des parenthèses de la fonction:

Code:

xhr.onreadystatechange=function(){....}

vers la page dynamique cible.
Lorsque j'écris par exemple:

Code:

reponse="essai";

entre ces parenthèses, quelle que soit la manière dont je déclare
la variable "reponse" en local ou bien dans le script, avec ou sans
le mot clé "var", elle ne veut pas sortir.
La seule manière de la faire sortir est alert(reponse) ou bien HTMHinner
et cela depuis l'intérieur de ces parenthèses.
J'ai fait l'essai depuis les fonctions ajaxproc et ajaxcreate et là aucun
problème, les variables sortent. Mais depuis l'interieur de la fonction:
onreadystatechange, impossible!
J'ai fait une recherche sur le net, et il semble que innerHTM ou bien alert
depuis l'intérieur des parenthèses soit toujours utilisé dans les appels ajax.

Je crois donc que si on veut traiter du code avant de l'écrire dans la
page cible (par exemple, separer les clés-valeurs, modifier l'affichage en
fonction des valeurs numériques renvoyées par la page php) ,il faut
traiter le code à l'intérieur des parenthèse de "onreadystatechange"
et il me semble que l'on n'a pas d'autre choix.
Quelqu'un peut-il me confirmer cela.
04/03/2011, 02h17
Eric2a

Qu'entends-tu par "page dynamique cible" ?

Il nous faudrait voir ton code actuel pour pouvoir t'aider.

Et j'insiste sur le fait qu'il est nécessaire de lire l'article :

:arrow: Web 2.0, allez plus loin avec AJAX et XMLHttpRequest
23/03/2011, 19h08
phillag

J'ai bien lu la documentation indiquée et je m'en suis même bien
imprégné.
La question que je pose porte sur les limites du code proposé et sur un problème de fond qui n'est pas évoqué dans la documentation.
J'ai réalisé mon application en utilisant le code proposé et comme
dans ce code en utilisant la transmission par innerHtml.
J'ai bien récupéré les données xml générées par la page php.
J'ai parsé ces données dans la boucle de la méthode "ajaxproc"
puis j'ai renvoyé les ensembles clés valeurs dans les pages html
respectives cibles en utilisant la fonction InnerHTML.
Mon problème est que j'y est passé deux jours complets.
Ayant plusieurs pages qui accedent au script ajax, et qui demandent des
sous ensembles clés-valeurs différentes,j'ai été obligé de
gèrer tous les cas possibles dans la boucle "ajaxproc"
La raison en est que si par malheur, on envoie une donnée ne
correspondant pas à un id contenu dans la page htm, l'ensemble du script js de la page html plante.
Le codage est donc très strict.
J'ai fait une recherche sur le web pour savoir si on pouvait envoyer une
chaine directement dans le script js de la page html mais, je n'ai rien
trouvé. Les deux seules manières d'envoyer une chaine dans la page
que l'on trouve dans la littérature sont: par la fonction alert ou bien
par innerHTML et dans les deux cas, il est impossible d'utiliser la chaine
pour la traiter dans un autre script que le script ajax de la page html.
(je voudrais traiter la chaine dans un autre bout de code js situé ailleur
dans la page html que dans la boucle "ajaxproc")
Je commence à comprendre qu'il s'agit bien d'une limitation inhérente au système ajax qui rend ce truc là aussi difficile à utiliser
Mais, je voudrais comprendre le pourquoi des choses.
Qu'est ce qui dans l'architecture client-serveur rend impossible la transmission directe d'une chaine autrement que par innerHTML?
merci d'avance de votre aide.
24/03/2011, 02h26
nadox

Rien ne t'empêche d'utiliser plusieurs script pour chaque pages.

Par contre, je crois que tu semble mélanger les choses. Les "document.write" dont tu parle sont exécutés en javascript, mais au moment du chargement de la page par le navigateur. Alors que là il s'agît de données chargé après. Les calculs que tu veux faire dans la div en affichant les résultats avec "document.write" sont déjà effectués. Par ailleurs, il est très déconseillé d'utiliser "document.write" après le chargement de la page par le navigateur.
Le innerHTML dont ne saisi apparemment pas l'effet permet de modifier le contenu du HTML après, d'une façon plus "propre"(et encore).
Le javascript est avant tout événementiel !
Sachant que tes données sont récupérées régulièrement, si tu as des calculs JS à faire avant d'afficher les résultats, il faut effectivement le faire avec la variable reponse avant de l'injecter dans le HTML (innerHTML). Par contre si tu as besoin de faire des calculs avec des données provenant de plusieurs requêtes, il te faut une mécanique javascript un peu plus conséquente.
Il s'agît alors de stocker les résultats dans des variables partagées 'globales'(toute variable déclarée directement dans la page), et d'agir dessus avec des fonctions.

Un code est toujours strict ! Si tu y trouve trop de contrainte, c'est peut-être que tu ne connais pas suffisament javascript.

Bon je ne sais pas si j'ai pu te permettre de comprendre un peu mieux, mais si tu pouvais mettre une exemple de code illustrant tes difficultées, on pourrais peut-être comprendre un peu mieux ce qui te gêne.

Tu l'aura compris j'espère : le innerHTML n'a aucun rapport avec le modèle client/serveur :s