begin process at 2010 03 21 22:53:53
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

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

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

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :xml, xslt, html, javascript Niveau :Débutant Date de création :24/11/2005 Vu / téléchargé :18 182 / 1 626

Auteur : Loubiou

Ecrire un message privé
Site perso
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

HTML_ENTITIES_DECODE par zen69
ACCÈS À LA MÉTHODE SETATTRIBUTE('STYLE','') SOUS IE6 par masternico
OUTIL DE SÉLECTION par jdmcreator
Source avec Zip SIMPLIFIER LA CREATION DYNAMIQUE D'ELEMENT HTML par kazma
DÉTECTER SI CSS EST ACTIVÉ par jdmcreator

 Sources en rapport avec celle ci

Source avec Zip FAIRE UN CV EN HTML VIA XML ET DU XSL par antour
Source avec Zip Source avec une capture ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT par djmmix
Source avec une capture POURQUOI MES SCRIPTS AJOUTÉS DYNAMIQUEMENT (AJAX, XSLT, ...)... par FREMYCOMPANY
Source avec une capture MENU ANIMÉ AVEC IMAGE SURVOLÉE ! par TheBigBananier
FAIRE PASSER DES VARIABLES JAVASCRIPT EN VBSCRIPT ET INVERSE... par stfou

Commentaires et avis

Commentaire de Neopheus le 25/11/2005 07:48:36

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

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 (!).

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

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.

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 ....

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)

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 !!!

Commentaire de glork le 29/11/2005 00:43:57

bof... ca marche pas sous firefox

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 ^^

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 !
}


}


Commentaire de fly49 le 07/11/2007 15:54:01

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

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

Commentaire de mehdikobra le 24/06/2008 12:20:57 9/10

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

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 Problème d'encodage HTML et Javascript [ par demorex6 ] Salut à tous! Je suis en train de realiser une petite application multilingue en php-Javascript-Mysql. J'ai créé un fichier pour la langue française


Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,608 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales