Parser sélectivement du XML (ou quelque chose y ressemblant) avec un JS

**BG29217** · 14/06/2013, 17h30

Bonjour,
je ne suis pas informaticien, mais
j'ai construit quelques sites d'associations (à but non lucratif) et autres (par exemple, une revue scientifique en accès libre, donc gratuit), sites que je maintiens et essaie d'améliorer.
Pour certains j'ai pu utiliser du PHP et des bases MySQL (j'arrive à me débrouiller pour écrire des fichiers .inc et .php, mais ce sont mes collègues informaticiens qui s'occupent de la partie server ...).
Pour d'autres je ne peux utiliser que du HTML (ni PHP, ni PERL, ni ASP, ...). Alors, des fois, je "bricole" un peu javascript et en combinant des morceaux de codes j'arrive à réaliser des "petits trucs" qui me sont bien utiles.
Bien sûr on peut se sentir un peu bridé par le fait de ne pas disposer d'une base de données server-based mais ça amène à chercher (et éventuellement trouver) des solutions ailleurs ... et en l'occurrence à chercher comment faire qu'un outil de type base de données puisse fonctionner sur un PC ou à partir d'un CD/DVD sansse connecter à un server extérieur. La revue scientifique sort une fois par an en DVD et si je veux inclure une base de données celle-ci doit-être une "flat database" ("mes excuses" si je ne suis pas au top pour le vocabulaire) et non une database interrogeant un serveur extérieur ...

J'ai donc construit un document en XML (ou y ressemblant) avec quelques 7600 entrées et j'avais pensé à coller et modifier des bouts de codes "glanés" sur le net pour obtenir une espèce de parser :
me permettant d'afficher la donnée correspondant à un numéro d'ordre sur les 7600 (affichage = auteur, année de publication, titre), puis en cliquant dessus un résultat développé (affichage = auteur, année de publication, titre, référence, résumé, mots-clefs) ;
me permettant de naviguer en avant ou en arrière, la donnée suivante ou la précédente, puis 5 en avant ou en arrière, puis de 20 en avant ou en arrière. Cette base de donnée servira à illustrer un article sur des coraux et éponges FOSSILES (vous voyez que mes domaines de compétence sont assez éloignés de l'informatique !).

J'ai fait un truc : CA MARCHE sur Firefox,
http://paleopolis.rediris.es/cg/test/browse_test.html
mais pas sur Chrome (ni Safari). La console java de Chrome me donne des infos (4 erreurs) mais je suis incapable de les comprendre (c'est du Chinois pour moi !). Le fichier FCnP.xml est au même niveau que le browse_test.html ...

Quelqu'un peut-il m'aider ?

Voici le code :

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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
<script language="javascript1.3">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","FCnP.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
 
x=xmlDoc.getElementsByTagName("RECORD");
i=0;
 
function displayCD()
{
id=(x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue);
artist=(x[i].getElementsByTagName("AUTHORS")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
txt= id + " - Author(s): " + artist + "<br>Year: "+ year + "<br>Title: " + title;
document.getElementById("showCD").innerHTML=txt;
}
 
function displayCDInfo()
{
artist=(x[i].getElementsByTagName("AUTHORS")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
source=(x[i].getElementsByTagName("SOURCE")[0].childNodes[0].nodeValue);
abstr=(x[i].getElementsByTagName("ABSTRACT")[0].childNodes[0].nodeValue);
fcnp=(x[i].getElementsByTagName("FCnP")[0].childNodes[0].nodeValue);
subject=(x[i].getElementsByTagName("SUBJECT")[0].childNodes[0].nodeValue);
syst=(x[i].getElementsByTagName("SYST")[0].childNodes[0].nodeValue);
strat=(x[i].getElementsByTagName("STRAT")[0].childNodes[0].nodeValue);
geog=(x[i].getElementsByTagName("GEOG")[0].childNodes[0].nodeValue);
txt= artist + " (<b>" + year + "</b>).- " + title + "- " + source + " - <b>FC&P:</b> " + fcnp + "<br><b>Abstract:</b> " + abstr + "<br>Topic(s): " + subject + "<br>Systematics: " + syst + "<br>Stratigraphy: " + strat + "<br>Geography: " + geog;
document.getElementById("showCD").innerHTML=txt;
}
 
function next()
{
if (i<x.length-1)
  {
  i++;
  displayCD();
  }
}
 
function previous()
{
if (i>0)
  {
  i--;
  displayCD();
  }
}
 
function next5()
{
if (i<x.length-1)
  {
  i+=5;
  displayCD();
  }
}
 
function previous5()
{
if (i>5)
  {
  i-=5;
  displayCD();
  }
}
 
function next20()
{
if (i<x.length-1)
  {
  i+=20;
  displayCD();
  }
}
 
function previous20()
{
if (i>20)
  {
  i-=20;
  displayCD();
  }
}
 
function goForit()
{
if (i<6708)
  {
  i=+this.document.testform.inputbox.value;
  displayCD();
  }
}</script>
</head>
 
<body onload="displayCD()">
 
<script language="javascript1.3">
document.write("<p>");
if (i==0)
  { 
  document.write("<div id='showCD' onclick='displayCDInfo(" + i + ")'></div>");
  }
else
for (var i=1;i<x.length;i++)
  { 
  document.write("<div id='showCD' onclick='displayCDInfo(" + i + ")'></div>");
  }
document.write("</p>");
</script>
 
<form name="testform">
<input type="button" onclick="previous20()" value="-20" />
<input type="button" onclick="previous5()" value="-5" />
<input type="button" onclick="previous()" value="-1" />
<input type="text" name="inputbox" value="" size="5">
<input type="button" name="Enter" Value="Enter" onClick="goForit(this.form)">
<input type="button" name="Reload" value="Reload" onClick="window.location.reload()">
<input type="button" onclick="next()" value="+1" />
<input type="button" onclick="next5()" value="+5" />
<input type="button" onclick="next20()" value="+20" />
</form>
</body>
</html>

Si on pouvait régler ce disfonctionnement je pense que cette association simple de fonctionnalités pourrait être exploitée à d'autres occasions (à des fins scientifiques ou non).

Merci par avance pour votre temps et votre compréhension.
Bien à vous,
BG

**rollbich** · 15/06/2013, 10h45

bonjour,

Pour éviter les pb de gestion des différents navigateurs, je te conseille d'utiliser un framework comme Mootools.
Je l'utilise depuis longtemps

Avantage :
-crossbrowser
-code plus rapide à fabriquer
-code structuré (orienté objet)
-framework mis à jour
-bonne communauté
-contient des fonctions ajax toutes faites pour parser le xml.
-contient tout ce qu'il faut pour gérer les noeuds et le DOM

bon we

**sekaijin** · 15/06/2013, 14h46

il ne s'agit pas du tout d'un problème de XML ou de compatibilité out tout autre chose du genre il s'agit d'une ENORME aberration dans la façon de s'y prendre.

voici ce que tu fais
ouverture d'une page HTML
chargement du DOM
exécution du javascript
récéption du XML
parsing du XML
Itération sur les élément de fragment XML
Rechargement du DOM
Itération sur les élément de fragment XML
Rechargement du DOM
Itération sur les élément de fragment XML
Rechargement du DOM
Itération sur les élément de fragment XML
Rechargement du DOM
Itération sur les élément de fragment XML
Rechargement du DOM
....

en javascript les fonctions prennent des paramètres
alors plutot que d'utiliser des variables globales il vaut mieux passer un paramètre (ex i dans displayCDInfo())

NE JAMAIS ABSOLUMENT JAMAIS utiliser cette horreur de document write il y a document.createElement ou document.getElementById('myId').innerHTML

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
document.write("<p>");
if (i==0)
  { 
  document.write("<div id='showCD' onclick='displayCDInfo(" + i + ")'>
</div>");
  }
else
for (var i=1;i<x.length;i++)
  { 
  document.write("<div id='showCD' onclick='displayCDInfo(" + i + ")'></div>");
  }
document.write("</p>");

Là je ne comprends pas le pourquoi du if tu fais exactement la même chose dans le cas 0 que dans tous les autres
un simple for (var i=0;i<x.length;i++) à partir de 0 et non de 1 et tu fais tous les cas.

tu ajoute des DIV vide avec des onclick or vu que leur taille est (potentiellemet) de 0X0 il n'apparaissent pas à l'écran et on ne peut donc pas cliquer dessus.

et pour finir en HTML les id dans un DOM doivent tous êtres différents
donc

Code :

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

1
2
3
for (var i=1;i<x.length;i++)
  { 
  document.write("<div id='showCD'

c'est là encore une erreur grossière.

mon conseil
tu mets TOUT à la poubelle.
tu fais une page HTML propre
tu ajoute une methode onload dans la quelle tu appelle XMLHttpRequest et parse le XML
tu définie une fonction d'affichage avec des paramètres pour placer les données dans ton form
tu définie une fonction qui affiche des boutons (et non des div) pour accéder directement à chaque enregistrement.

et perso j'éviterais de systématiquement utiliser getElementsByTag sur le XML
je supose que tu en connais la structure tu peux donc soit utiliser .children ou xpath

Maintenant pour ce qui est de ton but de faire du HTML qui gère un ebase de donnée sans avoir de serveur (CD/DVD) la solution la plus simple est HTML5 localstorage

pour faire ce genre d'appli (mais ça demande d'oublier les page web et de pensser application) j'utilise ExtJS la gestions des localStorage est prise en charge la lecture de donnée XML aussi. quant à associer un form à une collection de donnée c'est le b.a.ba. du la lib

A+JYT

**BG29217** · 16/06/2013, 16h29

Bonjour,
je vous remercie pour vos conseils mais, s'il vous plaît, pensez que vous vous adressez à un "amateur" ... je ne comprends pas grand chose à votre jargon ... pensez-y quand vous vous adressez à un "nul" comme moi =)

Je peux vous donner un exemple de mon jargon (dans ma spécialité) : "Palorbitolina est un genre de foraminifère benthique à test agglutiné connu du Barrémien à l'Aptien inférieur. L'embryon complexe localisé au sommet du cône ..."
Si ça vous laisse perplexe ... sachez que je suis tout aussi perplexe devant les commentaires de la console java de Chrome ou vos suggestions !

Ceci dit,
concernant votre commentaire
"le pourquoi du if tu fais exactement la même chose dans le cas 0 que dans tous les autres"
j'ai fait un essai suivant votre suggestion et ça ne marche plus, même pour Firefox
donc ça doit bien être utile à quelque chose

pour le id du div, je corrige comme ça

Code :

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

1
2
3
4
 
 {
  document.write("<div id='showCD(" + i + ")' onclick='displayCDInfo(" + i + ")'></div>");
  }

Je n'ai pas besoin d'un code parfait. J'ai juste besoin d'un truc qui marche
Si l'un d'entre vous veut bien corriger le code "grossier"/"horrible" existant, ce serait super ...
Si vous aviez une "belle" solution alternative, merci de la proposer aussi !
Comme c'est destiné à une publication scientifique (en accès libre, je rappelle) et comme les auteurs mettent souvent/toujours des remerciements ... la/les personne/s qui aura/ont aidé à fixer figurera/ont dans ces remerciements (ce sera la moindre des choses !).

=] BG

**BG29217** · 16/06/2013, 17h05

bon en fait en changeant

Code :

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

  document.write("<div id='showCD' onclick='displayCDInfo(" + i + ")'></div>");

pour

Code :

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

document.write("<div id='showCD(" + i + ")' onclick='displayCDInfo(" + i + ")'></div>");

ça fonctionne sur Chrome aussi

ceci dit si vous avez une solution élégante qui fonctionne sur toutes les navigateurs PC ou Mac
je suis toujours "preneur"

Ciao,
Bruno

**NoSmoking** · 17/06/2013, 10h53

Bonjour,

ceci dit si vous avez une solution élégante qui fonctionne sur toutes les navigateurs PC ou Mac
je suis toujours "preneur"

je répondrais

Envoyé par sekaijin

NE JAMAIS ABSOLUMENT JAMAIS utiliser cette horreur de document write il y a document.createElement ou document.getElementById('myId').innerHTML

avec en plus

Comprendre document.write() en JavaScript.

D'autant que dans ton cas le fait de le mettre directement dans le BODY est tout à fait jouable, i valant 0 quand on rencontre le code et que de toute manière tu n'utilises pas le paramètre

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
<body onload="displayCD()">
<p>
  <div id='showCD' onclick='displayCDInfo()'></div>
</p>
<form name="testform">
  <input type="button" onclick="previous20()" value="-20" />
  <input type="button" onclick="previous5()" value="-5" />
  <input type="button" onclick="previous()" value="-1" />
  <input type="text" name="inputbox" value="" size="5">
  <input type="button" name="Enter" Value="Enter" onClick="goForit(this.form)">
  <input type="button" name="Reload" value="Reload" onClick="window.location.reload()">
  <input type="button" onclick="next()" value="+1" />
  <input type="button" onclick="next5()" value="+5" />
  <input type="button" onclick="next20()" value="+20" />
</form>
</body>

Concernant les fonctions, il serait plus propre de n'en faire qu'une en passant en paramètre l’incrémentation et en testant les bornes d'affichage.

J'allais oublier,

La console java de Chrome me donne des infos (4 erreurs)

il eut été intéressant que tu nous les indiques.

**sekaijin** · 17/06/2013, 13h16

Oui il y a beaucoup plus propre et il suffit de lire la FAQ ou un tuto qui date de moins de 5 ans pour mieux structurer son code

1) le HTML ne contient que du 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
     <script type='text/javascript' src="monScript.js" />
  </head> <!-- <====== B.A.BA. ne pas oublier de fermer les balises -->
  <!-- le corps d'une page se mets dans la balise body -->
  <body onload="loadScript()">
    <p id="travail" /><-- endroit où on av ajouter dynamiquement des boutons -->
 
    <form name="testform">
      <input type="button" value="-20" />
      <input type="button" value="-5" />
      <input type="button" value="-1" />
      <input type="text" name="inputbox" value="" size="5">
      <input type="button" name="Enter" Value="Enter">
      <input type="button" name="Reload" value="Reload" onClick="window.location.reload()">
      <input type="button" value="+1" />
      <input type="button" value="+5" />
      <input type="button" value="+20" />
    </form>
  </body>
</html>

2) le fichier js ne contient que du javascript qui est appelé APRES la construction de la page.

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
 
function loadScript() {
  // définition d'un index des éléments variable locale donc pas de conflit
  var i=0;
 
  // variable locale contenant les données XML
  var x = null;
 
  function displayCD(i, x) // les méthodes ont des paramètre pour agir sur les bonnes valeur et non par effet de bord.
  {
   // vérifier que x n'est pas null avant tout usage
    ...
  }
 
  // ajout des événements après la construction du HTML ainsi les fonction ne sont définie que pour les objet qui les concerne et non globalement pour toute la page.
  var myForm= document.forms[0];
  // ceci n'est qu'un exemple il y a bien d'autre façon d'accéder proprement à un élément du formulaire.
  var button = myForm.firstChild.nextSibiling;
  button.onclick = function() {
    if (i>20) {
      i-=20;
      displayCD(i, x);
    }
  };
  var button = myForm.nextSibiling.nextSibiling;
  button.onclick = function() {
    if (i>5) {
      i-=5;
      displayCD(i, x);
    }
  };
  var button = myForm.nextSibiling.nextSibiling;
  button.onclick = function() {
    if (i>1) {
      i-=1;
      displayCD(i, x);
    }
  };
  var input = myForm.nextSibiling.nextSibiling;
  var button = myForm.nextSibiling.nextSibiling;
  button.associatedInput = input;
  button.onclick = function() {
    if (i<6708) {
      i=+this.associatedInput.value;
      displayCD(i, x);
    }
  };
  ...
 
  //lecture des données 
  // il serait mieux de faire un appel asynchrone i.e. définir une méthode qui traite la réponse ainsi l'ihm est plus réactive car non bloquée pendant la lecture des données.
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET","FCnP.xml",false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML;
 
  x=xmlDoc.getElementsByTagName("RECORD");
 
  //on affiche le premier élément
  displayCD(i, x);
 
  // definition des div pour afficher les infos
  // on récupère le paragraphe dans lequel placer les div;
  var workspace = document.getElementById("travail");
  for (var j=1;i<x.length;j++)
  { 
    // on créé un div
    // a la place de document write qui implique une sur consomation de ressource il suffit d'ajouter les éléments que l'on veux dans le dom.
    // tu as d'ailleur utilisé innerHtml dans la fonction displayCDInfo
    var div workspace.createElement("div");
    // on lui associe la bonne méthode
    div.onclick= function {
      // ici contenu de la function displayCDInfo dans laquelle on utilise j à la palce de i
      // vérifier que x n'est pas null avant tout usage
      ...
      //utiliser this.innerHtml plutôt qu'une recherche par id this étant justement l'élément recherché.
    };
    // on l'ajoute au paragraphe.
    workspace.appendChild(div);
  }
}

des points d'ammélioration il y en a encre beaucoup mais déjà tu ne recharge pas ton dom x.length fois. tu na plus de fonction qui agissent sur des variable par effet de bord tu n'a plus de variable globales (pas de conflit avec d'autre script) tu n'a plus de fonction globales. les méthodes de gestions des événement sont définies sur les objets eux même et non de façon globales. de plus utiliser un fichier js permet au navigateur de le compiler et le garder en cacge d'out un gain de perf appréciable. utiliser un appel XMLHttpRequest asynchrone serait une grand pas en avant
utiliser la boucles de parcours des éléments XML pour définir un tableau d'objet javascript permettrait de simplifier grandement les fonctions d'affichage et évitérait de reparcourir le DOM XML à chaque affichage. bref il y a beaucoup de chose à faire pour obtenir un code simple propre facile à maintenir évolutif et efficace.

ton code cummule beaucoup de problème, effet de bord donc instabilité, pas robuste, potentiellement conflictuel avec d'autres code, innéfficace, bloquant consommateur de ressources ....

A+JYT

**BG29217** · 18/06/2013, 00h10

bon ben j'ai essayé de copier votre code, de remplacer là où il fallait le faire ... et j'obtiens une page blanche ...

En plus si je comprends un peu, je ne comprends pas tout.

Merci quand même d'avoir essayé

Bruno =)

**BG29217** · 18/06/2013, 00h43

Concernant les messages d'erreur de la console
c'étaient

Uncaught TypeError: Cannot call method 'getElementsByTagName' of null browse.js:18
Uncaught ReferenceError: x is not defined display.js:12
Uncaught ReferenceError: x is not defined browse.js:23
Uncaught ReferenceError: x is not defined browse.js:23

**SpaceFrog** · 18/06/2013, 08h51

perso j'utiliserai JQuery ... pour ses performances ajax

**sekaijin** · 18/06/2013, 11h37

Envoyé par BG29217

bon ben j'ai essayé de copier votre code, de remplacer là où il fallait le faire ... et j'obtiens une page blanche ...

En plus si je comprends un peu, je ne comprends pas tout.

Merci quand même d'avoir essayé

Bruno =)

j'ai juste donné un principe je n'ai pas testé ni vérifié
le but du forum n'est pas de donner des code prêt à l'emploi mais de te permettre d'apprendre et de comprendre.

A+JYT

**BG29217** · 21/06/2013, 00h04

Salut,
pour info, j'ai remplacé

Code :

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

1
2
3
4
5
6
7
8
9
10
11
document.write("<p>");
if (i==0)
  {
  document.write("<div id='showCD' onclick='displayCDInfo(" + i + ")'></div>");
  }
else
for (var i=1;i<x.length;i++)
  {
  document.write("<div id='showCD(" + i + ")' onclick='displayCDInfo(" + i + ")'></div>");
  }
document.write("</p>");

par

Code html :

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

<div id="showCD" onclick="displayCDInfo()"></div>

Même résultat (plus élégant) visible sur
http://paleopolis.rediris.es/cg/test/test.html
L'essentiel étant que ça marche ...
J'aurais le temps d'apprendre le Javascript, je l'apprendrais peut-être ... mais là franchement je n'ai pas beaucoup de temps pour ça (plusieurs publis à boucler, 2 conférences à préparer, etc.). Merci pour votre aide.
Ciao,
Bruno

Parser sélectivement du XML (ou quelque chose y ressemblant) avec un JS

JavaScript

Discussions similaires

Partager

Partager