[AJAX] affichage image-script toutes les 5 secondes

**phillag** · 16/02/2011, 18h03

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

**andry.aime** · 16/02/2011, 18h08

Bonsoir,

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

A+.

**phillag** · 26/02/2011, 23h25

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

**phillag** · 27/02/2011, 15h40

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.

**Vil'Coyote** · 27/02/2011, 20h21

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/

**Eric2a** · 27/02/2011, 22h29

Salut,

Essaie ce code...

Code html :

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
<!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>

[AJAX] affichage image-script toutes les 5 secondes

AJAX

Vue hybride

Discussions similaires

Partager

Partager