[AJAX] resultat de requete ajax

Version imprimable

salut,

je suis actuellement entrein de realiser de code en javascript qui permet d'afficher de donner depuis un fichier test.xml

le contenu de ce fichier est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="UTF-8"?>
<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>

le code de la page jsp est :

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
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!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>ma page de test</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" />
 
 
 
 <style type='text/css'>
 
#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;
}
 
</style>
 
 
 
 
 
<script type="text/javascript">
 
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);
         }
}
 
  </script>
 
 
 
 
</head>
 
<body>
<input type="button" onClick="gen_data('test.xml');" value="Générer" /><br /><br />
<input type="button" onClick="lancer('test.xml');" value="Mise à jour en boucle" /><br /><br />
<div id="affichageData"></div>
</body>
</html>

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.

ce code est exécute avec sucée et il m'affiche un resultat qui correspond au contenu de fichier test.xml suite au clique au bouton "Générer"

mais mon problème actuelle est quand je change le fichier test.xml et je le rend comme suit :

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

il n'a rien afficher

je compris que la structure du second fichier XML different du premier, donc c'est normal que le programme conçu pour exploiter la première version du fichier XMl, n'arrive pas à exploiter la deuxième version du fichier XML.

c'est pour cela de changer le code et le rend comme suit :

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
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!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>ma page de test</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" />
 
 
 
 <style type='text/css'>
 
#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;
}
 
</style>
 
 
 
<script type="text/javascript">
 
 
      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.getElementsByTagName("titre")[0].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.getElementsByTagName("texte")[0].nodeValue;   
                       var valeur = attributs.getElementsByTagName("valeur")[0].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].getElementsByTagName("valeur")[0].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);
               }
      }
 
      </script>
 
 
 
 
 
</head>
 
<body>
<input type="button" onClick="gen_data('test.xml');" value="Générer" /><br /><br />
<input type="button" onClick="lancer('test.xml');" value="Mise à jour en boucle" /><br /><br />
<div id="affichageData"></div>
</body>
</html>

a mon avis le changement dois avoir :

Code:

getNamedItem(...).nodeValue => getElementsByTagName(...)[0].nodeValue

mais ca marche pas

merci d'avance

08/04/2011, 06h15
andry.aime

Bonjour,

Code:

lesdonnees[l].getElementsByTagName("valeur")[0].firstChild.nodeValue

merci pour la réponse

j'applique votre changement

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
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
105
106
107
108
109
<script type="text/javascript">
 
 
      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.getElementsByTagName("titre")[0].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.getElementsByTagName("texte")[0].nodeValue;   
                       var valeur = attributs.getElementsByTagName("valeur")[0].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].getElementsByTagName("valeur")[0].firstChild.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);
               }
      }
 
      </script>

mais rien n'est affiché

09/04/2011, 13h31
alen22

après exécution de la page

avec le console d'erreur de firefox il m'affiche cette erreur

Code:

attribut.getElementsByTagName is not a function

cette erreur est lié à cette ligne dans le code

Code:

var txt = attributs.getElementsByTagName("titre")[0].nodeValue;
09/04/2011, 13h35
nadox
Bonjour,

Ça fonctionnera surement mieux avec un xml valide :
Code:

1 2 <titre>Catégorie 1</titre>>

desole pour cette erreur dans mon fichier test.xml

le fichier est :

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

mais il m'affiche la même erreur

09/04/2011, 15h36
alen22

ça signifie probablement que attributs n'est pas un élément DOM valide.

je parle de cette ligne :

Code:

var attributs = categorie[i].attributes;

je change avec

Code:

var attributs = categorie[i]

mais lors de l'exécution elle m'affiche juste pour la partie catégorie la valeur null

franchement cette solution est adopter pour une version specifique de fichier .xml qui a cette forme :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
<?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>

le code correcte pour cette version est :

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
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
105
106
107
108
<script type="text/javascript">
 
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);
         }
}
 
  </script>

donc je dois faire des modification pour quel marche pour ma version initial de fichier test.xml

j'arrive à connaitre quelque point à modifier

remplacer :

Code:

1
2
var attributs = categorie[i].attributes;
var txt = attributs.getElementsByTagName("titre")[0].nodeValue;

par :

Code:

var txt=categorie.item(i).getElementsByTagName("titre").item(0).innerHTML;

et vous avez me donner de mettre

Code:

lesdonnees[l].getElementsByTagName("valeur")[0].firstChild.nodeValue

mais apres l'excution de ma page jsp

il m'affiche ce resultat :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
>> undefined
undefined : undefined
>> undefined
undefined : undefined
undefined : undefined
undefined : undefined
>> undefined
undefined : undefined
undefined : undefined
undefined : undefined
undefined : undefined
undefined : undefined

merci d'avance

10/04/2011, 06h39
andry.aime

Code:

document.getElementById('donnee'+l).innerHTML = lesdonnees[l].getAttribute("valeur");