[AJAX] Récupérer des données d'un fichier XML et actualiser "en temps réel"
Bonjour,
Voici mon projet :
- j'ai une application qui récupère des données en temps réel et en fait un fichier XML, qu'elle ne cesse de réécrire en boucle pour qu'il soit actualisé en permanence ;
- je voudrais développer une petite application AJAX qui irait lire ce fichier XML une première fois pour afficher les données dans un beau tableau (de taille variable, donc à générer à la volée à la première lecture du fichier XML) ;
- ensuite, l'application AJAX doit mettre à jour "en temps réel" (en pratique toutes les 0.5 secondes disons) les valeurs des données dans le tableau.
Avant d'aller plus loin :
- j'ai vu ce tuto : http://nicolaspied.developpez.com/ajax-premiers-pas/ ;
- j'ai lu ce topic : http://www.developpez.net/forums/f45...ment-web/ajax/ ;
et ça ne répond pas à mes soucis.
Concrètement, pour l'instant, j'arrive bien à aller lire mon fichier XML une première fois et à en sortir un tableau. (En même temps, c'est très simple, c'est expliqué dans le tuto que j'ai mis en lien ci-dessus :mrgreen:)
Le problème vient quand je veux actualiser les valeurs des données.
Voici mon code :
Fichier myxml.xml
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <?xml version="1.0" encoding="iso-8859-1" ?>
<donnees>
<donnee texte="Donnée A" valeur="45"></donnee>
<donnee texte="Donnée B" valeur="12"></donnee>
<donnee texte="Donnée C" valeur="64"></donnee>
<donnee texte="Donnée D" valeur="26"></donnee>
<donnee texte="Donnée E" valeur="89"></donnee>
<donnee texte="Donnée F" valeur="10"></donnee>
<donnee texte="Donnée G" valeur="6"></donnee>
<donnee texte="Donnée H" valeur="322"></donnee>
<donnee texte="Donnée I" valeur="on"></donnee>
</donnees> |
Fichier page.html
Code:
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
| <!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>Test XML</title>
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
var ie5 = (document.getElementById && document.all);
function setXML(xmldocument){
var t = '<table border="1">';
var donnees = xmldocument.getElementsByTagName('donnee');
for (var i=0;i<donnees.length;i++){
t += '<tr>';
t += '<td id="donnee'+i+'-texte">';
t += xmldocument.getElementsByTagName("donnee")[i].getAttribute("texte");
t += '</td>';
t += '<td id="donnee'+i+'-valeur">';
t += xmldocument.getElementsByTagName("donnee")[i].getAttribute("valeur");
t += '</td>';
t += '</tr>';
}
t += "</table>";
document.getElementById("affichageData").innerHTML = t;
}
function resetXML(xmldocument){
var h = "rien";
var donnees = xmldocument.getElementsByTagName('donnee');
for (var i=0;i<donnees.length;i++){
document.getElementById("donnee"+i+"-valeur").innerHTML = xmldocument.getElementsByTagTagName("donnee")[i].getAttribute("valeur");
}
}
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,true);
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,true);
xhr.send(null);
}
}
function start_all(url){
gen_data(url);
setInterval(regen_data(url),500);
}
</script>
</head>
<body onload="start_all('myxml.xml');">
<div id="menu" style="float: left;width: 200px;">
<div id="affichageData"></div>
</div>
</body>
</html> |
Schématiquement, au chargement de ma page, je lance une fonction start_all, qui lance deux autres fonctions :
- une première, gen_data, qui va utiliser une fonction auxiliaire setXML pour générer le tableau une première fois en le remplissant ;
- une deuxième, regen_data, dans un setInterval, qui va utiliser une fonction auxiliaire resetXML pour actualiser les valeurs du tableau, sans le re-générer entièrement.
Le problème est le suivant : tant que je ne fais que générer le tableau avec gen_data, il n'y a aucun souci ; quand j'ai essayé de rajouter le regen_data, ça ne fonctionne plus.
Sur Firefox, plus rien ne s'affiche du tout. Sur IE, j'ai le tableau initial, mais avec un message "Terminé" (avec un symbole erreur) dans la barre de statut.
Merci d'avance de votre aide précieuse :)
