[AJAX] resultat de requete ajax

**alen22** · 07/04/2011, 13h09

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 :

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="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 :

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

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
<?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 :

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

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

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

mais ca marche pas

merci d'avance

**andry.aime** · 08/04/2011, 06h15

Bonjour,

Code :

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

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

**alen22** · 09/04/2011, 13h18

merci pour la réponse

j'applique votre changement

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

**alen22** · 09/04/2011, 13h31

après exécution de la page

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

Code :

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

attribut.getElementsByTagName is not a function

cette erreur est lié à cette ligne dans le code

Code :

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

 var txt = attributs.getElementsByTagName("titre")[0].nodeValue;

**nadox** · 09/04/2011, 13h35

Bonjour,

Ça fonctionnera surement mieux avec un xml valide :

Code xml :

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

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

**alen22** · 09/04/2011, 13h56

desole pour cette erreur dans mon fichier test.xml

le fichier est :

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

**alen22** · 09/04/2011, 15h36

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

je parle de cette ligne :

Code :

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

var attributs = categorie[i].attributes;

je change avec

Code :

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

var attributs = categorie[i]

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

**alen22** · 09/04/2011, 16h11

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

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
 
 
<?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 :

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

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

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

par :

Code :

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

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

et vous avez me donner de mettre

Code :

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

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

mais apres l'excution de ma page jsp

il m'affiche ce resultat :

Code :

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

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

**andry.aime** · 10/04/2011, 06h39

Code :

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

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

[AJAX] resultat de requete ajax

AJAX

Discussions similaires

Partager

Partager