salut,

je suivre un exemple d'affichage avec ajax et il marche avec sucée

le but est d'afficher des résultat d'un fichier .xml

avec un bouton de mise a jour
l'exemple qui marche contient ce code

pour le 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
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>

pour le 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
27
28
29
 
 
 
#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;
}

pour le code de 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>
pour 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
105
106
107
 
 
 
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);
         }
}


le problème est quand j'utilise ce type de 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
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 (pourtant pour le premier exemple de fichier myxml.xml il a bien afficher le résultat)

merci d'avance