[JavaScript][XSLT][XML] Render XML with XSLT -- a purely javascript way

引述WIKI的定義，
白話說XSLT就是一種模版，XML則是資料來源，
同一份XML經由不同的XSLT渲染(render)出來的樣貌也就不同。
這次的需求是，為了減輕後端負擔，將渲染的工作延遲到瀏覽器端進行，
使用到瀏覽器的原生介面，
這次只針對WebKit 與IE兩種系列做出這個跨瀏覽器的小工具。

"transform" 的參數除了XSLT 與XML文件之外，
還有一個object，
可以動態賦值給XSLT對應的參數(而XML中沒有對應節點)
這個object可能是url的GET參數，或者其他頁面輸入。

In short, XSLT is a style sheet that defines how XML as source data should be rendered.

With different XSLT applied to a single source data, output document could look totally different.

The aim of this function is to offload render task from backend, and delay to client's browser, which will utilise browser's native API, and currently supports only webkit and IE.

Besides XSLT and XML document, "transform" also takes a object to inject some runtime determined value into template, those matches definition in XSLT but not assigned in XML. The runtime determined value could be GET parameters or form inputs.

	/*
	This snippet provides a function "transform", which loads XSLT template and render xml file to html in purly javascript.
	The third parameter "xsltPar" is a map object for injection of extra parameters those are defined in XSLT but not ready in XML.
	Tested with IE, Chrome and Firefox.
	Author: https://github.com/jofenting
	(c)2014
	*/
	var
	loadXMLDoc = function(dname)
	{
	if(window.ActiveXObject || "ActiveXObject" in window){
	doc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.6.0");
	doc.async = false;
	doc.load(dname);
	if(doc.parseError.errorCode != 0){
	console.log(doc.parseError);
	return null;
	}
	return doc;
	}
	else{
	xhttp=new XMLHttpRequest();
	xhttp.open("GET",dname,false);
	xhttp.send("");
	return xhttp.responseXML;
	}
	},
	transform = function(xmlPath, xsltPath, xsltPar){
	var xmlDoc, xslDoc, xslt, xslProc, k, htmlStr;
	if(window.ActiveXObject || "ActiveXObject" in window){
	try{
	xslt = new ActiveXObject("Msxml2.XSLTemplate.6.0");
	xslDoc = loadXMLDoc(xsltPath, "Msxml2.FreeThreadedDOMDocument.6.0");
	xslt.stylesheet = xslDoc;
	xmlDoc = loadXMLDoc(xmlPath,"Msxml2.DOMDocument.6.0");
	xslProc = xslt.createProcessor();
	xslProc.input = xmlDoc;
	if (xsltPar){
	for(k in xsltPar){
	xslProc.addParameter(k, xsltPar[k]);
	}
	}
	xslProc.transform();
	}
	catch(e){
	return null;
	}
	htmlStr = xslProc.output;
	}
	// code for Chrome, Firefox, Opera, etc.
	else if (document.implementation && document.implementation.createDocument){
	xmlDoc = loadXMLDoc(xmlPath);
	if(xmlDoc && xmlDoc.documentElement.nodeName == 'parsererror'){
	return null;
	}
	xsltDoc = loadXMLDoc(xsltPath);
	xslProc=new XSLTProcessor();
	xslProc.importStylesheet(xsltDoc);
	if (xsltPar){
	for(k in xsltPar){
	xslProc.setParameter(null, k, xsltPar[k]);
	}
	}
	htmlStr = xslProc.transformToFragment(xmlDoc,document);
	}
	return htmlStr;
	};
	/*
	//Usage
	var transformed_html = '';
	var params = {'username':'jofenting','downloaddate':'2015-10-26'};
	//matchs parameters in xslt file, ex: <xsl:param name="username"/> <xsl:param name="downloaddate"/>
	var srcXML = "../data/user1.xml";
	var tmplXSLT = "../templates/style.xml";
	transformed_html = transform(srcXML, tmplXSLT, params);
	*/

view raw xml2html.js hosted with ❤ by GitHub