advanced code snippet search

Posted By

bcmoney on 12/09/10


Tagged

javascript xslt xml XSL tranformation GRDDL SemanticWeb


Versions (?)

JS Transformer - Transformations from XML to any format, using XSLT via Javascript

 / Published in: JavaScript
 

URL: http://bcmoney-mobiletv.com/blog/2010/12/08/js-transformer/

KEEP IN MIND THE SAME-ORIGIN POLICY OF MOST BROWSERS... you'll probably have to use some server-side code to make this more useful, but on its own it will translate XML based on your prescribed XSLT.

It uses HTML, JavaScript and XSLT (optionally you could add some CSS to make it look even prettier) to render an XML file into HTML, JSON, CSV, or just about anything else you decide. Just feed in an XML file and XSL file as URL parameters.

Expand | Embed | Plain Text 
  1. <html>
  2. <head>
  3. <title>JS Transformer</title>
  4. <script type="text/javascript">
  5. /*
  6.  * loadXMLDoc
  7.  *   Loads an XML Document from file or via a web-based URL
  8.  * 
  9.  *@param docURL String location of the file to retrieve and load as XML
  10.  *@return xhttp.responseXML DOM representation of the text
  11.  *@author W3schools
  12.  *@source http://www.w3schools.com/DOM/loadxmldoc.js
  13.  */
  14. function loadXMLDoc(docURL)
  15. {
  16.   if (window.XMLHttpRequest)
  17.   {
  18. 	xhttp=new XMLHttpRequest();
  19.   }
  20.   else
  21.   {
  22. 	xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  23.   }
  24.   xhttp.open("GET",docURL,false);
  25.   xhttp.send("");
  26.   return xhttp.responseXML;
  27. }
  28.  
  29. /*
  30.  * loadXMLString
  31.  *   Loads an XML Document from a hard-coded string, or, as a result of loading plaintext
  32.  * 
  33.  *@param txt String the text content to load as XML
  34.  *@return xmlDoc DOM representation of the text
  35.  *@author W3schools
  36.  *@source http://www.w3schools.com/DOM/loadxmldoc.js
  37.  */
  38. 	function loadXMLString(txt) {
  39. 		if (window.DOMParser) {		// FireFox, Opera, Chrome, Safari
  40. 			parser=new DOMParser();
  41. 			xmlDoc=parser.parseFromString(txt,"text/xml");
  42. 		}
  43. 		else { 						// Internet Explorer
  44. 			xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  45. 			xmlDoc.async = "false";
  46. 			xmlDoc.loadXML(txt); 
  47. 		}
  48. 		return xmlDoc;
  49. 	}
  50.  
  51. /*
  52.  * gup
  53.  *   gup stands for 'Get URL Paramaters' (values retrieved by name)
  54.  *
  55.  * Usage:
  56.  *   Your URL looks like  "http://site.com/service?user=frank&favcolor=green
  57.  *   var user_param = gup( 'user' );  
  58.  *   var background = gup( 'favcolor' ); 
  59.  *  "user_param" would be set to String "frank", "background" would be set to "green"
  60.  *
  61.  *@param name String the name of the parameter to get the value of
  62.  *@return results String representation of the text in the URL parameter
  63.  *@author Justin Barlow	
  64.  *@source http://www.netlobo.com/url_query_string_javascript.html
  65.  * From the author:
  66.  *     "Most of the server-side programming languages that I know of like PHP, ASP, or JSP give you easy access to parameters in the query string of a URL. Javascript does not give you easy access. With javascript you must write your own function to parse the window.location.href value to get the query string parameters you want. Here is a small function I wrote that will parse the window.location.href value and return the value for the parameter you specify. It does this using javascript's built in regular expressions"
  67.  */
  68. function gup( name )
  69. {
  70.   name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  71.   var regexS = "[\\?&]"+name+"=([^&#]*)";
  72.   var regex = new RegExp( regexS );
  73.   var results = regex.exec( window.location.href );
  74.   if( results == null )
  75.     return "";
  76.   else
  77.     return results[1];
  78. }
  79.  
  80. x = gup("xml");
  81. var xmlFile = (typeof x != "undefined" && x !== null && x != "") ? x : "data.xml";
  82. s = gup("xsl");
  83. var xslFile = (typeof s != "undefined" && s !== null && s != "") ? s : "data2html.xsl";
  84.  
  85. /**
  86.  * displayResult
  87.  *   Process XML using specified XSL Transformations, then display the result in an HTML page
  88.  *
  89.  * NOTE: Relies on the browser's internal XSLT processor, 
  90.  *       which should be fairly standard, but you might 
  91.  *       want to expect bugs with old browsers
  92.  *
  93.  *@author copelandb
  94.  */
  95. function displayResult()
  96. {
  97. 	xml=loadXMLDoc(xmlFile);
  98. 	xsl=loadXMLDoc(xslFile);
  99.  
  100. 	if (window.ActiveXObject)	// IE
  101. 	{
  102. 	  ex=xml.transformNode(xsl);
  103. 	  document.getElementById("result").innerHTML=ex;
  104. 	}	
  105. 	else if (document.implementation && document.implementation.createDocument) // Mozilla, Firefox, Opera, Chrome, Safari, etc.
  106. 	{
  107. 	  xsltProcessor=new XSLTProcessor();
  108. 	  xsltProcessor.importStylesheet(xsl);
  109. 	  resultDocument = xsltProcessor.transformToFragment(xml,document);
  110. 	  document.getElementById("result").appendChild(resultDocument);
  111. 	}
  112. }
  113. </script>
  114. <style type="text/css">
  115. html { font-size:100.01%; }
  116. body {
  117.   font-size: 75%;
  118.   color: #000;
  119.   background: #ffffff;
  120.   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif
  121.   line-height:1;
  122. }
  123. /* your style here */
  124. div#result {
  125.   display:block;
  126. }
  127. </style>
  128. <!-- external and additional stylesheets can easily be applied to result
  129.  <link href="http://example.com/printer-stylesheet.css" type="text/css" rel="@print" />
  130. -->
  131. </head>
  132. <body onload="displayResult()">
  133. 	<div id="result">
  134. 	</div>
  135. </body>
  136. </html>

Report this snippet  

You need to login to post a comment.