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

**SpaceFrog** · 14/02/2019, 10h00

comment accèdes tu au fichier xml, comment le charges tu dans ta page ?
D'où le récupères tu ?
Tu as visiblement un souci de droits cross origin ...

**Beginner.** · 14/02/2019, 13h21

Envoyé par J4l13n

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

J'ai répondu récemment ici #4 pour désactiver cette sécurité sur Chrome (deuxième partie du message)...

**J4l13n** · 14/02/2019, 13h23

Bonjour,

Je vais expliquer le projet dans sa globalité:

J'utilise un arduino UNO avec un shield ethernet:
Nom : ETHERNET1.jpg
Affichages : 448
Taille : 29,2 Ko

Nom : ETHERNET1.jpg
Affichages : 448
Taille : 29,2 Ko

Avec lequel j'ai fait un sketch qui écrit toutes les minutes les valeurs de 3 sondes de temperatures sur la microSD qui est dans le slot.
Comme il y a une prise RJ45 et que l'on peut gérer la generation de page html avec l'arduino dans cette même carte SD, je me suis dit que l'on pouvait faire du javascript ( code que je découvre) pour recupéré dans un 1er temps les données d'un fichier pour rafraichir les jauges de la page web.
Par la suite je compte continue par l'ajout d'un graphique historique des relevés.

J'ai commencé le C++ il y a qque mois sur le tas, je commence à bien le maitrisé, j'espere que le JS se passera aussi facilement.

En espérant avoir répondu à toutes les questions. Mais si il y en a d'autre je répondrait...

Merci à vous

getElementsByTagName d'un xml

JavaScript

Discussions similaires

Partager

Partager