RAPIDQ

Rapid-Q:The lost files
My old library where i have collected all the rapidq scripts and italian help

Today my pagerank is:

Trasformare xml-xsl in html con javascript

Post date:04/10/2008 - Posted by

admin

come effettuare tali trasformazioni con javascript attraverso un codice cross-browser.
Cominciamo con la funzione deputata al caricamento sincrono del documento XML e relativo documento di stile XSL:

 
function loadDocument(fileName)
{
/*  a seconda che il borwser sia IE o Firefox, si crea un oggetto
*  MSXML2.DOMDocument oppure un Document object nativo per Firefox. */
var xmlDoc = window.ActiveXObject ? new ActiveXObject("MSXML2.DOMDocument.3.0") : document.implementation.createDocument("","",null);
xmlDoc.async = false;
xmlDoc.load(fileName);
return xmlDoc;
}

Vediamo la funzione che effettua la trasformazione XSL del documento XML:

 
function getTransformedHTML(xmlDoc, xslDoc) {

var html = "";

/* Implementazione per Firefox */
if (window.XSLTProcessor)
{
     var xsltProc = new XSLTProcessor(); // creazione di un'istanza del processore XSLT
     xsltProc.importStylesheet(xslDoc);  // importazione del foglio di stile
     var fragment = xsltProc.transformToFragment(xmlDoc, document);
     html = new XMLSerializer().serializeToString(fragment); // serializzazione del codice  HTML in una stringa prima di aggiugnerla alla pagina
}
else if (window.ActiveXObject) /* Implementazione IE */
{
     html = xmlDoc.transformNode(xslDoc);
}
return html;
}

Ammettiamo ora di avere una pagina HTML di appoggio che includa le funzioni precedentemente illustrate in uno script esterno e un foglio di stile CSS per abbellire la presentazione.

 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript"
src="StaticXSLT.js"></script>
<link id="Link1" rel="stylesheet"  href="cart.css" type="text/css" />
</head>
<body>
<a href="javascript:GenerateCart();">Aggiungi al carrello</a>
<br /><br />
<span id="cart" ></span>
</body>
</html>

Cliccando sul link "Aggiungi al carrello", si richiamerà la funzione GenerateCart() che caricherà il documento XML effettuando la trasformazione XSL e mettendo l'output risultante nel elemento con id cart. La funzione GenerateCart() (presente nell oscript incluso nella pagina HTML) è così composta:

 
function GenerateCart()  
 {  
   var xmlDoc = loadDocument("cart.xml");  
   var xslDoc = loadDocument("cart.xsl");       
   document.getElementById("cart").innerHTML = getTransformedHTML(xmlDoc, xslDoc);  
 }

Buon divertimento....

Commenti

Inserisci un commento

Users

Videos

Scripts & Tutorials

Linux - I comandi principali

07/11/2010

Per i piú smemorati, una lista di comandi principali usati con linux cd : cambia la directory corrente. ls : mostra il…

in:Scripts e tutorials (0 commenti)

Search Engine Optimization - 130 parametri usati da google per valutare il tuo sito

26/08/2010

Con l'avvento di caffeine molti webmaster si sono trovati a dover rivedere tutte le strategie SEO per i…

in:Scripts e tutorials (0 commenti)

Inserisci Google BUZZ nel tuo sito con Google Buzz Widget Jquery Plugin

15/02/2010

Questo è un widget di jQuery per il nuovo social network di Google-Buzz-che è possibile incorporare ovunque per…

in:Scripts e tutorials (0 commenti)

Javascript - Codifica/decodifica di password nei file ste di Dreamweaver

17/01/2010

Questo é un pratico codificatore/decodificatore/decriptatore (chiamatelo come volete) di password inserite nei file di configurazione .ste su dreamweaver function…

in:Scripts e tutorials (0 commenti)