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.htmlpour 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 <!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>
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
Partager