getElementsByTagName d'un xml

**J4l13n** · 13/02/2019, 21h24

Bonsoir,

J'essaye de mettre a jour la variable temp_cuve_1 et temp_cuve_2 des jauges a partir d'un fichier xml que j'actualise par un autre programme,
le fichier html et le fichier xml sont et seront dans le même dossier.
Je pense que je ne maitrise pas bien la fonction :

Code :

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

var temp_cuve_1 = xmlDoc.getElementsByTagName("TEMPERATURE_1")[0].childNodes[0].nodeValue ;

l'erreur dans le devellopeur chrome:

fichierweb.html:42 Access to XMLHttpRequest at 'file:///Users/xxxxxx/Desktop/java/text.xml' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
lireTemperatureCapteur @ fichierweb.html:42
changeTemp @ fichierweb.html:50
setInterval (async)
drawGauge @ fichierweb.html:74
Promise.then (async)
google.F.L.V.pl @ loader.js:232
(anonymous) @ fichierweb.html:6
fichierweb.html:34 Uncaught TypeError: Cannot read property 'childNodes' of undefined
at XMLHttpRequest.fichierBrut.onreadystatechange (fichierweb.html:34)
at lireTemperatureCapteur (fichierweb.html:42)
at changeTemp (fichierweb.html:50)

le fichier html :

Code HTML :

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
<html>
 <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gauge']});
    google.charts.setOnLoadCallback(drawGauge);    
    
    
    var chart_gauge ; 
    var data_gauge ;  
    var options_gauge ; 
 
    
    function lireTemperatureCapteur()
    { 
        var  fichierBrut = new XMLHttpRequest(); //On lance la requête pour récupérer le fichier
        fichierBrut.open('GET', 'text.xml');// on ouvre le fichier il s'apelle test.xml
            
        fichierBrut.onreadystatechange = function () // on lit le fichier
        {       
            if(fichierBrut.readyState === 4) // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
            {
                
                if(fichierBrut.status === 200 || fichierBrut.status == 0) 
                                { 
                      try
                      {
                          parser=new DOMParser(); 
                          xmlDoc=parser.parseFromString(fichierBrut.responseText,"text/xml");
                      }catch
                      (e) {alert(e.message)}
 
                      
                      var temp_cuve_1 = xmlDoc.getElementsByTagName("TEMPERATURE_1")[0].childNodes[0].nodeValue ;  
                      data_gauge.setValue(0, 1, temp_cuve_1); 
 
                      var temp_cuve_2 = xmlDoc.getElementsByTagName("TEMPERATURE_2")[0].childNodes[0].nodeValue ;  
                      data_gauge.setValue(1, 1, temp_cuve_2); 
                } 
            }
        }
        fichierBrut.send(null);
    }
    
    
    
    function changeTemp() 
    {
          
          lireTemperatureCapteur();
          chart_gauge.draw(data_gauge, options_gauge);    
    }
    
    
    function drawGauge() {
        data_gauge = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Cuve N°1',0], 
          ['Cuve N°2',0]
        ]);
 
        
        options_gauge = { 
          width: 400, height: 120,
          redFrom: 90, redTo: 100, 
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };
 
        chart_gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
 
        chart_gauge.draw(data_gauge, options_gauge);
 
        setInterval(changeTemp , 5000);  // rafraichit les gauges toutes les x millis 
      }
 
  </script>
 </head>
 <body>
  <div id="gauge_div" style="width:280px; height: 140px;"></div>
 </body>
</html>

le fichier xml contient :

Code XML :

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

1
2
<LIGNE>1</LIGNE><DATE>20/01/19</DATE><HEURE>20:30</HEURE><TEMPERATURE_1>50</TEMPERATURE_1>
<LIGNE>2</LIGNE><DATE>20/01/19</DATE><HEURE>20:30</HEURE><TEMPERATURE_2>70</TEMPERATURE_2>

Si quelqu'un peut m'aiguillé sur mon erreur

Par avance merci

**Beginner.** · 14/02/2019, 00h26

Salut,

Il y a un problème d’accès apparemment, il faudrait essayer en utilisant un serveur local* ou désactiver (si cela fonctionne encore) certaines sécurités du navigateur...

* Certains éditeurs permettent de le faire automatiquement sinon ben il faut en installer un...

**J4l13n** · 14/02/2019, 08h34

Bonjour,

Il n'y aurait pas un moyen de dire en js que le fichier xml est sans danger ?

Cordialement

**ProgElecT** · 14/02/2019, 09h25

Salut

Envoyé par J4l13n

....a partir d'un fichier xml que j'actualise par un autre programme....

Si c'est un programme que tu as fait toi, il y aurait une solution, au lieu de le sauvegarder en .XML, tu le sauvegardes en .JS et tu le charges avec <script src="fichierxml.js"></script>, avant que de m'étendre plus, j'attend ta réponse sur ta possibilité de maitrise ou non la création du fichier.xml.

**J4l13n** · 14/02/2019, 09h30

Bonjour ProgElecT,

Oui je maitrise le fichier xml source de a à z ( nom, contenu, extension ..).

**ProgElecT** · 14/02/2019, 09h56

Re

Donc tu si tu peux générer ton fichier de cette façon

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
//---- enregistré sous dataXML.js
let dataXML = [
	{
    "ligne": 1,
    "date": "20/01/19",
    "heure": "20:30",
    "temperature": 50
	},
	{
    "ligne": 2,
    "date": "20/01/19",
    "heure": "21:37",
    "temperature": 70
	},
	{
    "ligne": 3,
    "date": "21/03/19",
    "heure": "20:30",
    "temperature": 100
	}
];

dans ton HTML tu récupères en le chargent de cette façon <script src="fichierxml.js"></script>, dés lors, tu disposes d'une variable tableau (globale) dataXML qui provient du fichier dataXML.js que tu peux manipuler comme n'importe quelle variable dans l'ensemble de ton programme.

Code :

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

1
2
3
4
console.log("dataXML[0].temperature = " + dataXML[0].temperature); // = 50
console.log("dataXML[1].heure= " + dataXML[1].heure); // = 20:37
console.log("dataXML[2].temperature= " + dataXML[2].temperature); // = 100 (là .... sa chauffe)
console.log("dataXML[2].date= " + dataXML[2].date); // = 21/03/19