[AJAX] Récupérer des données d'un fichier XML et actualiser "en temps réel"

**DunkNukem** · 20/12/2009, 16h18

Bonjour,

Voici mon projet :
- j'ai une application qui récupère des données en temps réel et en fait un fichier XML, qu'elle ne cesse de réécrire en boucle pour qu'il soit actualisé en permanence ;
- je voudrais développer une petite application AJAX qui irait lire ce fichier XML une première fois pour afficher les données dans un beau tableau (de taille variable, donc à générer à la volée à la première lecture du fichier XML) ;
- ensuite, l'application AJAX doit mettre à jour "en temps réel" (en pratique toutes les 0.5 secondes disons) les valeurs des données dans le tableau.

Avant d'aller plus loin :
- j'ai vu ce tuto : http://nicolaspied.developpez.com/ajax-premiers-pas/ ;
- j'ai lu ce topic : http://www.developpez.net/forums/f45...ment-web/ajax/ ;
et ça ne répond pas à mes soucis.

Concrètement, pour l'instant, j'arrive bien à aller lire mon fichier XML une première fois et à en sortir un tableau. (En même temps, c'est très simple, c'est expliqué dans le tuto que j'ai mis en lien ci-dessus

)
Le problème vient quand je veux actualiser les valeurs des données.

Voici mon code :

Fichier myxml.xml

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="iso-8859-1" ?>
<donnees>
<donnee texte="Donnée A" valeur="45"></donnee>
<donnee texte="Donnée B" valeur="12"></donnee>
<donnee texte="Donnée C" valeur="64"></donnee>
<donnee texte="Donnée D" valeur="26"></donnee>
<donnee texte="Donnée E" valeur="89"></donnee>
<donnee texte="Donnée F" valeur="10"></donnee>
<donnee texte="Donnée G" valeur="6"></donnee>
<donnee texte="Donnée H" valeur="322"></donnee>
<donnee texte="Donnée I" valeur="on"></donnee>
</donnees>

Fichier page.html

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
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
      <title>Test XML</title>
      <meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <script type="text/javascript">
var ie5 = (document.getElementById && document.all);
function setXML(xmldocument){
         var t = '<table border="1">';
         var donnees = xmldocument.getElementsByTagName('donnee');
         for (var i=0;i<donnees.length;i++){
             t += '<tr>';
             t += '<td id="donnee'+i+'-texte">';
             t += xmldocument.getElementsByTagName("donnee")[i].getAttribute("texte");
             t += '</td>';
             t += '<td id="donnee'+i+'-valeur">';
             t += xmldocument.getElementsByTagName("donnee")[i].getAttribute("valeur");
             t += '</td>';
             t += '</tr>';
         }
         t += "</table>";
         document.getElementById("affichageData").innerHTML = t;
}
 
function resetXML(xmldocument){
         var h = "rien";
         var donnees = xmldocument.getElementsByTagName('donnee');
         for (var i=0;i<donnees.length;i++){
             document.getElementById("donnee"+i+"-valeur").innerHTML = xmldocument.getElementsByTagTagName("donnee")[i].getAttribute("valeur");
         }
}
 
var xhr = null;
function gen_data(url){
         if(window.XMLHttpRequest) {
                                   xhr = new XMLHttpRequest();
         }else if(window.ActiveXObject){
               xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }else{
               alert("Votre navigateur n'est pas compatible avec AJAX...");
         }
         if(xhr) {
                 xhr.onreadystatechange = function(){
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                          var xmldocument = xhr.responseXML;
                                                          setXML(xmldocument);
                                        }
                 }
                 xhr.open("GET",url,true);
                 xhr.send(null);
         }
}
 
function regen_data(url){
         if(window.XMLHttpRequest) {
                                   xhr = new XMLHttpRequest();
         }else if(window.ActiveXObject){
               xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }else{
               alert("Votre navigateur n'est pas compatible avec AJAX...");
         }
         if(xhr) {
                 xhr.onreadystatechange = function(){
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                          var xmldocument = xhr.responseXML;
                                                          resetXML(xmldocument);
                                        }
                 }
                 xhr.open("GET",url,true);
                 xhr.send(null);
         }
}
 
function start_all(url){
         gen_data(url);
         setInterval(regen_data(url),500);
}
      </script>
</head>
 
<body onload="start_all('myxml.xml');">
      <div id="menu" style="float: left;width: 200px;">
           <div id="affichageData"></div>
      </div>
</body>
</html>

Schématiquement, au chargement de ma page, je lance une fonction start_all, qui lance deux autres fonctions :
- une première, gen_data, qui va utiliser une fonction auxiliaire setXML pour générer le tableau une première fois en le remplissant ;
- une deuxième, regen_data, dans un setInterval, qui va utiliser une fonction auxiliaire resetXML pour actualiser les valeurs du tableau, sans le re-générer entièrement.

Le problème est le suivant : tant que je ne fais que générer le tableau avec gen_data, il n'y a aucun souci ; quand j'ai essayé de rajouter le regen_data, ça ne fonctionne plus.
Sur Firefox, plus rien ne s'affiche du tout. Sur IE, j'ai le tableau initial, mais avec un message "Terminé" (avec un symbole erreur) dans la barre de statut.

Merci d'avance de votre aide précieuse

**andry.aime** · 21/12/2009, 07h49

Bonjour et Bienvenue sur developpez,
Tu déclares la variable xhr en variable globale utilisée par les fonctions gen_data et regen_data que tu les appelles consécutivement sans que la première requête AJAX n'est terminée.

**DunkNukem** · 22/12/2009, 00h25

Merci pour l'accueil, et la réponse

Alors, j'ai l'impression que ça ne plante plus. En revanche, ça ne met pas à jour les valeurs du tableau...
Pour l'instant, pour mes tests, j'ai un fichier XML que j'ai tapé moi-même, je lance le script, je modifie le XML et je regarde ce que ça donne.
En l'occurrence, rien n'est modifié dans la page... :-(

Le plus "bizarre", c'est que j'ai beau actualiser la page, ça ne change rien du tout, je dois la quitter et y revenir pour que les nouvelles valeurs soient enfin affichées.

Info sans doute importante : j'utilise EasyPHP 5.3.0, et c'est sans doute ce qui sera déployé en "production".
J'ai l'impression que c'est une histoire de serveur Apache qui garde en cache la page et ne recharge pas les données. Est-ce possible ? Si oui, y a-t-il moyen de lui spécifier de ne rien garder en cache ?

Merci d'avance

**Bovino** · 22/12/2009, 06h47

http://javascript.developpez.com/faq...Ajax#xhr-cache

**DunkNukem** · 22/12/2009, 18h06

Merci, ça m'a aidé à terminer, désolé de ne pas l'avoir vu tout seul...

Je laisse mon script entier ici, au cas où...

# myxml.xml

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
<?xml version="1.0" encoding="iso-8859-1" ?>
<donnees>
<categorie titre="Catégorie 1">
<donnee texte="Donnée A" valeur="15"></donnee>
</categorie>
<categorie titre="Catégorie 2">
<donnee texte="Donnée B" valeur="2"></donnee>
<donnee texte="Donnée C" valeur="3"></donnee>
<donnee texte="Donnée D" valeur="4"></donnee>
</categorie>
<categorie titre="Catégorie 3">
<donnee texte="Donnée E" valeur="5"></donnee>
<donnee texte="Donnée F" valeur="6"></donnee>
<donnee texte="Donnée G" valeur="7"></donnee>
<donnee texte="Donnée H" valeur="8"></donnee>
<donnee texte="Donnée I" valeur="9"></donnee>
</categorie>
</donnees>

#myxml.css

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
#affichageData{
               width: 200px;
               background-color: #F3F9FE;
}
.categorie {
         color: #21536A;
         border: 1px solid;
         background-color: #EAEEEE;
         padding: 4px;
         font-family: Verdana;
         font-size: 11px;
         border-color: #FEFEFE #C3C8CB #C3C8CB;
         margin: 0px;
         text-decoration: none;
         padding-left: 3px;
}
.donnee {
          font-family: Verdana;
          font-size: 10px;
          padding-top: 3px;
          padding-bottom: 4px;
          padding-left: 20px;
          border-right: 1px solid #C3C8CB;
          border-left: 1px solid #C3C8CB;
          border-bottom: 1px solid #C3C8CB;
}

# myxml.html

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
      <title>MyXML</title>
      <meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <link rel="stylesheet" href="myxml.css" type="text/css"/>
      <script type="text/javascript" src="myxml.js"></script>
</head>
 
<body>
<input type="button" onClick="gen_data('myxml.xml');" value="Générer" /><br /><br />
<input type="button" onClick="lancer('myxml.xml');" value="Mise à jour en boucle" /><br /><br />
<div id="affichageData"></div>
</body>
</html>

# myxml.js

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
function lancer(url){
         setInterval("regen_data(url)",300);
}
var ie5 = (document.getElementById && document.all);
function setXML(xmldocument){
         var k = 0;
         var categorie = xmldocument.getElementsByTagName('categorie');
 
         if(document.getElementById('themaindiv')){
           var x = document.getElementById('themaindiv');
           x.parentNode.removeChild(x);
         }else{
               var themaindiv = document.createElement('div');
               themaindiv.setAttribute("id","themaindiv");
               document.getElementById('affichageData').appendChild(themaindiv);
         }
 
         for (var i=0;i<categorie.length;i++){
             var mydiv = document.createElement('div');
             var attributs = categorie[i].attributes;
             var txt = attributs.getNamedItem("titre").nodeValue;
             mydiv.appendChild(document.createTextNode(">> " + txt));
             if(ie5){
               mydiv.style.cssText = 'width: 100%';
             }
             ie5?mydiv.setAttribute("className", "categorie"):mydiv.setAttribute("class", "categorie");
             /*document.getElementById('affichageData').appendChild(mydiv);*/
             themaindiv.appendChild(mydiv);
             mydiv.setAttribute("id", "categorie" + i);
 
             var mysecdiv = document.createElement('div');
             mysecdiv.setAttribute("id", "sub" + i);
             ie5?mysecdiv.setAttribute("className", "donnee"):mysecdiv.setAttribute("class", "donnee");
             mysecdiv.style.cssText = 'display:block;';
             /*document.getElementById('affichageData').appendChild(mysecdiv);*/
             themaindiv.appendChild(mysecdiv);
 
             var mydata = categorie[i].getElementsByTagName('donnee');
             for (var j=0;j<mydata.length;j++){
                 var attributs= mydata[j].attributes;
                 var txt = attributs.getNamedItem("texte").nodeValue;
                 var valeur = attributs.getNamedItem("valeur").nodeValue;
                 var spn1 = document.createElement('span');
                 spn1.appendChild(document.createTextNode(txt + " : "));
                 var spn2 = document.createElement('span');
                 spn2.appendChild(document.createTextNode(valeur));
                 spn2.setAttribute("id","donnee"+k);
                 k++;
                 mysecdiv.appendChild(spn1);
                 mysecdiv.appendChild(spn2);
                 var b = document.createElement('br');
                 mysecdiv.appendChild(b);
             }
 
         }
}
function resetXML(xmldocument){
         var lesdonnees = xmldocument.getElementsByTagName('donnee');
         for(var l=0;l<lesdonnees.length;l++){
                 document.getElementById('donnee'+l).innerHTML = lesdonnees[l].attributes.getNamedItem("valeur").nodeValue;
         }
}
 
var xhr = null;
function gen_data(url){
         if(window.XMLHttpRequest) {
                                   xhr = new XMLHttpRequest();
         }else if(window.ActiveXObject){
               xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }else{
               alert("Votre navigateur n'est pas compatible avec AJAX...");
         }
         if(xhr) {
                 xhr.onreadystatechange = function(){
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                          var xmldocument = xhr.responseXML;
                                                          setXML(xmldocument);
                                        }
                 }
                 xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                 xhr.setRequestHeader("Cache-Control","no-cache");
                 xhr.send(null);
         }
}
function regen_data(url){
         if(window.XMLHttpRequest) {
                                   xhr = new XMLHttpRequest();
         }else if(window.ActiveXObject){
               xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }else{
               alert("Votre navigateur n'est pas compatible avec AJAX...");
         }
         if(xhr) {
                 xhr.onreadystatechange = function(){
                                        if(xhr.readyState == 4 && xhr.status == 200){
                                                          var xmldocument = xhr.responseXML;
                                                          resetXML(xmldocument);
                                        }
                 }
                 xhr.open("GET",url+"?ms="+new Date().getTime(),true);
                 xhr.setRequestHeader("Cache-Control","no-cache");
                 xhr.send(null);
         }
}

En deux mots, en lançant ce script, l'utilisateur arrive sur une page avec 2 boutons : un bouton "Générer" et un bouton "Mise à jour en continue".
Le premier va lire le fichier XML myxml.xml une première fois, et construit un tableau dynamiquement en fonction de sa structure (cf. myxml.xml : catégories et données).
Une fois le tableau construit, le deuxième bouton permet de lancer la mise à jour en continue, durant laquelle seules les "valeurs" des "données" seront mises à jour, et durant laquelle la structure du tableau est laissée intacte.

En espérant que ça puisse resservir un jour...

Merci pour votre aide, à bientôt

[AJAX] Récupérer des données d'un fichier XML et actualiser "en temps réel"

AJAX

Discussions similaires

Partager

Partager