Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

HTML,XSLT ET XML LIRE LES DONNEES D'UN XML POUR AFFICHAGE SOUS FORME DE TABLEAU GRACE A UN SCRIPT XSLT EN LOCAL


Information sur la source

Catégorie :Trucs & Astuces Classé sous : xml, xslt, html, javascript Niveau : Débutant Date de création : 24/11/2005 Vu / téléchargé: 14 890 / 1 415

Note :
5,71 / 10 - par 7 personnes
5,71 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (14)
Ajouter un commentaire et/ou une note

Description

Je ne sais pas si ma source est en bonne place (se serait plustôt une astuce).
Les fichiers XML prennent de plus en plus d'importance sur le web par leur façon de présenter les données sous forme structurée mais aussi permettant un chargement rapide par certaines applications.

Le principe :

On se propose de lire les données issues d'un fichier XML sous forme de noeuds et de les afficher dans une page HTML sous forme de tableau.
Pour cela on utilise un script XSLT dans la page html et on ne touche pas au XML (ce qui est très pratique lorsqu'on a plusieurs milliers de fichiers XML produits par une base de données par exemple).
 

Source

  • script language="JavaScript">
  • AfficheDocXML();
  • function AfficheDocXML(){
  • var Document;
  • Document = new ActiveXObject("Microsoft.XMLDOM");// on fait appel à la DOM pour parser le XML !
  • Document.async = "false"; // on lit en synchrone
  • if(Document.load("catalogue.xml")){// au chargement on met en forme puis on place dans les cellules
  • document.write("<TABLE BORDER=1 CELLPADDING=0>");
  • document.write("<THEAD><TH>ID</TH><TH>Date</TH><TH>Nom</TH></THEAD>");
  • for(i=0;i<Document.documentElement.childNodes.length;i++){
  • document.write ("<TR ALIGN=center>");
  • for(j=0;j<= 2;j++){
  • document.write ("<TD>");
  • document.write (Document.documentElement.childNodes(i).childNodes(j).text);
  • document.write ("</TD>");
  • }
  • document.write ("</TR>");
  • }
  • document.write ("</TABLE>");
  • }else{alert("fichier pas trouvé !");// si pas de fichier, alerte !
  • }
  • }
  • </script>
script language="JavaScript">
AfficheDocXML();
function AfficheDocXML(){

var Document;
Document = new ActiveXObject("Microsoft.XMLDOM");// on fait appel à la DOM pour parser le XML !
Document.async = "false"; // on lit en synchrone

if(Document.load("catalogue.xml")){// au chargement on met en forme puis on place dans les cellules
                                  document.write("<TABLE BORDER=1 CELLPADDING=0>");
                                  document.write("<THEAD><TH>ID</TH><TH>Date</TH><TH>Nom</TH></THEAD>");
for(i=0;i<Document.documentElement.childNodes.length;i++){
                                                          document.write ("<TR ALIGN=center>");
                                                          for(j=0;j<= 2;j++){
                                                                             document.write ("<TD>");
                                                                             document.write (Document.documentElement.childNodes(i).childNodes(j).text);
                                                                             document.write ("</TD>");
                                                                             }
                                                          document.write ("</TR>");
                                                         }
                                  document.write ("</TABLE>"); 
                                }else{alert("fichier pas trouvé !");// si pas de fichier, alerte !
								}
}								
</script>

Conclusion

Bien entendu, si vous avez un fichier XML important, il y aura un temps de chargement non négligeable !
Pour diminuer ce temps de chargement, passee les noeuds sous forme d'attributs de cette forme :

<Commandes>
<Ordre
id ="1"
date="4/12/2002"
name = "hélène Marqué"/>

<Ordre
id ="2"
date="4/12/2002"
name = "Jean Bonbeurre"/>

</Commandes>

Il faudra réécrire le script pour lire les attributs des noeuds (of course).
Cette façon de coder le XML vous permettra outre un gain de place sur le fichier XML, un temps de chargement augmenté de 25%

Si un codeur C++ ou Delphi pouvait offrir une source permettant en 1 clic de réaliser cette transformation des noeuds enfants en attributs des noeuds parents, ce serait un réel outil en local !!!
Je vois ce prog un peu comme un batch qui scann les fichiers XML d'un dossier pour en faire l'inventaire dans un fichier result.xml par exemple.
Qui à l'ouverture de chaque fichiers XML du répertoire, regarderait si l'encodage est bien UTF-8 (auquel cas il remplacerait cette 1ère ligne par le codage UTF-8) puis circulerait sur tous les noeuds parents de 1er niveau pour transformer les noeuds enfants en attributs du noeuds parents !!!

Je pense que ce serait une super bonne source utile (un .exe, un clic et zooooouuuu).



 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de Neopheus le 25/11/2005 07:48:36

Ton script ne marche que sur IE
Pas sur Opera...

signaler à un administrateur
Commentaire de Loubiou le 25/11/2005 10:39:51

Oui il faut que le navigateur sache faire appel au parseur XML de la dom du pc pour que cela fonctionne. Il faut aussi qu'il sache interprèter les fonctions javascript.
Sur certain navaigateurs, c'est désactivé par défaut (!).

signaler à un administrateur
Commentaire de bubuze le 25/11/2005 16:41:55

je pratique le xml transformé par xslt en html via le javascript,
après le temps initial de chargement (relativement) long, la navigation est instantanée !
bien sûr, cela n'est appliquable qu'à des sites petits ou moyens, mais le résultat est bluffant.

techniquement, javascript est indispensable (à ma connaissance), mais firefox est aussi utilisable, via la librairie sarissa, disponible sur sourceforge.

un exemple de ce que ça donne : http://bubuze.chez-alice.fr/_flume/album.htm

signaler à un administrateur
Commentaire de bubuze le 25/11/2005 16:45:51

> Si un codeur C++ ou Delphi pouvait offrir une source permettant en 1 clic de réaliser cette  transformation des noeuds enfants en attributs des noeuds parents, ce serait un réel outil en local !!!

inutile d'aller parser avec du C ou du delphi, tu peux très bien fabriquer ta propre transformation xslt qui "compressera" ton xml.

signaler à un administrateur
Commentaire de Loubiou le 25/11/2005 17:41:21

Bon peut-être, mais ce qui est certain c'est que le xml avec attribut c'est plus léger bref.
Par contre je ne suis pas certain qu'on puisse enregistrer en dur et en local le fichier XML résltant, de plus le principal inconvéniant avec cette techno XSLT c'est qu'on ne peut pas travailler sur des fichiers de grosses capacité. J'ai fait l'essai ça bloque sur un fichier de 13Mo. Je sais c'est énorme, mais je n'ai pas le choix pour x raisons, je dois utiliser des fichiers XML de grosses capacités d'où l'intéret de parser en attribut, on constate un temps de chargement notoirement diminué.

Merci pour vos messages les Amis codeurs ....

signaler à un administrateur
Commentaire de bubuze le 26/11/2005 11:09:55

si tu produits un xml classique, tu peux toujours l'afficher dans le navigateur (au fait sarissa a pour but de xslt-iser le xml sur tous les navigateurs) puis l'enregistrer "à l'ancienne".
ça ne résoud pas le problème des gros fichiers : j'ai souvenir d'un fil de discussion à ce sujet sur xml-fr.org.
d'autres solutions existent pour automatiser le processus de sauvegarde (php par exemple)

signaler à un administrateur
Commentaire de Loubiou le 26/11/2005 12:47:48

Oui je viens de terminer un parser en php qui fonctionne super bien, mais ça coince avec les gros fichiers arff .... Merci pour ta réponse !!!

signaler à un administrateur
Commentaire de glork le 29/11/2005 00:43:57

bof... ca marche pas sous firefox

signaler à un administrateur
Commentaire de pifou25 le 20/06/2007 17:34:38

Bonjour,
pour l'instant j'en suis encore à essayer de convertir ce code en ASP (au moins ça sera exécuté coté serveur et ça marchera sous tout navigateur). Mais la manière la plus autonome serait de passer le nom du fichier en argument - AfficheDocXML("carnet.xml") - puis de parcourir le 1er élément pour copier les noms des éléments et leur nombre, qui constitueront l'entête du tableau HTML.
Puisque ici la fonction est limitée à 3 colonnes figées (Id, date, nom). Tant qu'à faire une fonction autant la faire compatible ^^

signaler à un administrateur
Commentaire de fly49 le 07/11/2007 15:52:19

le but de ce script n'est pas de le faire fonctionner en .ap ou en .php ou autre, mais en javascript (le langage client de l'avenir) le broser client bosse et pas le serveur.
Il est très bien mais il faut trouver la solution pour le faire marchr sur FireFox
j'ai des pistes mais ca marche pas:

if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("catalogue.xml");
envoyerfonctiosuivantequifaitletableau()
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.load("catalogue.xml");
envoyerfonctiosuivantequifaitletableau()}
else
{
alert('Your browser cannot handle this script');
}
}

envoyerfonctiosuivantequifaitletableau(){

                                  document.write("<TABLE BORDER=1 CELLPADDING=0>");
                                  document.write("<THEAD><TH>ID</TH><TH>Date</TH><TH>Nom</TH></THEAD>");
for(i=0;i<Document.documentElement.childNodes.length;i++){
                                                          document.write ("<TR ALIGN=center>");
                                                          for(j=0;j<= 2;j++){
                                                                             document.write ("<TD>");
                                                                             document.write (Document.documentElement.childNodes(i).childNodes(j).text);
                                                                             document.write ("</TD>");
                                                                             }
                                                          document.write ("</TR>");
                                                         }
                                  document.write ("</TABLE>");
                                }else{alert("fichier pas trouvé !");// si pas de fichier, alerte !
}


}


signaler à un administrateur
Commentaire de fly49 le 07/11/2007 15:54:01

les variables ne sont pas bonnes c'est juste une idée

signaler à un administrateur
Commentaire de bubuze le 07/11/2007 23:37:04

firefox est aussi utilisable, via la librairie sarissa, disponible sur sourceforge.

http://sourceforge.net/projects/sarissa

signaler à un administrateur
Commentaire de mehdikobra le 24/06/2008 12:20:57 9/10

c'amarche trés bien
rien dire  !! merci

signaler à un administrateur
Commentaire de jpclutier le 04/07/2008 13:48:37

Oui bien..mais ne fonctionne pas sous FireFox à cause de l'ActiveX. En tout cas pas depuis la v2 (avant il existe des add-ons).
Si quelqu'un à le même bout de code tout prêt pour FF je prends !

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

problème javascript - XML [ par iraho ] Bonjour, j'ai un souci avec pour faire du xml dynamique avec javascript et j'aurais besoin d'aide. En fait, j'ai code associant xml, xslt et javascrip qu'utilisez-vous pour [d]html+javascript ? [ par bultez ] Bonjour à toutes et à tous,perso pour faire du [d]html+javascript ( et même php... et autres )j'utilise bêtement un éditeur à coloration syntaxique ( Récupération de valeur html avec Javascript [ par Eckmoule ] Bonjour tout le monde, Je vais tenter d'expliquer mon soucis du mieux possible. J'ai une liste de lignes comprenant plusieurs valeurs (Prix, temps, e Comment afficher une page HTML via javascript [ par sloyvy ] javascript dans HTML [ par godelet ] Bonjour,je n'arrive pas à voir mon alert  lors du onClick dans la page html,  le code est le suivant :&lt;script type="text/javascript" src="/adsl/inf insertion javascript dans l'HTML [ par Arniould ] Bjr, je veux que mon script javascript insère une ligne dans mon HTML,j'ai utilisé la ligne suivante pour qu'il me renvoie ma ligne:self.location.href PopUp html lancée à partir de flash par fonction javascript [ par totorienabattre ] Bonjour tout le monde, Voilà déjà 3 jours que j'écume le web à la recherche de "LA" solution à mon problème ! J'espère vraiment que vous allez pouvoir Parser un XML en javascript (=xml to array) [ par Logan ] Bonjour,Je suis en train de realiser un petit chat en ajax, et je dois donc parser un xml pour en recuperer des valeurs en javascript...je vous montre Ecrire définitivement dans page html [ par ads31 ] Bonjour,je voudrai savoir s'il est possible que l'on conserve ce que l'on ecrit via du javascript dans une page HTML.La page est en HTML et en javascr


Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode

Appels d'offres

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,359 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.