XML系列：xsl与xml组织数据

到w3c看一下，xml的家族的确有点庞大，包括xml，xsl，xpath等等，http://www.w3school.com.cn/x.asp 

其中，xml+xsl的组合为我们很好的将模板与数据分离。

下面是一段js解析xsl与xml生成html的代码：

 1 // 由于我们在移动平台上用，所以不兼容 ie 2    3 // 使用方法  4 $(function() { 5    //$('#xsl').xslt("data.xml", "view.xsl"); 6 }); 7  8 // xslt transform 9 $.fn.xslt = function(xml , xsl){10     var target = $(this);11     // Mozilla 0.9.4+, Opera 9+12     var xmlContent = xmlFromFile(xml);13     var xslContent = xmlFromFile(xsl);14     var html = xslTransform(xmlContent,xslContent);15     target.empty().append(html);16 }17 18 19 function xslTransform(xml , xslt)20 {21     22     var html = "" ;23     try {24         if (window.DOMParser != undefined && window.XMLHttpRequest != undefined && window.XSLTProcessor != undefined) {25             //// Load XML 26             var xmlDoc = new DOMParser().parseFromString(xml, "text/xml");27             //// Load XSL28             var processor = new XSLTProcessor();29             processor.importStylesheet(xslt);30             31             // Transform32             resultDocument = processor.transformToFragment(xml, document);33             if (document.implementation && document.implementation.createDocument) {34                 html =  new XMLSerializer().serializeToString( resultDocument ) ;35             }36         }37     } catch (exception) {38         if (typeof (exception) == "object") {39             if (exception.message) {40                 alert(exception.message);41             }42         } else {43             alert(exception);44         }45     }46     //打印错误信息47     var errorMsg = null;48     if (xmlDoc.parseError && xmlDoc.parseError.errorCode != 0) {49         errorMsg = "XML Parsing Error: " + xmlDoc.parseError.reason50                   + " at line " + xmlDoc.parseError.line51                   + " at position " + xmlDoc.parseError.linepos;52     }53     else {54         if (xmlDoc.documentElement) {55             if (xmlDoc.documentElement.nodeName == "parsererror") {56                 errorMsg = xmlDoc.documentElement.childNodes[0].nodeValue;57             }58         }59         else {60             errorMsg = "XML Parsing Error!";61         }62     }63 64     if (errorMsg) {65         //alert (errorMsg);66     }67     return html ; 68 }69 // 上面直接用 processor.transformToFragment 无法加载 xml文件， 我们需要用 XHR 先读进来 70 // 这里通过 XHR 来获取 xml 内容 71 function xmlFromFile(file)72 {73     var xmlDoc = null ; 74     try75     {76         if (document.implementation && document.implementation.createDocument){77             var xmlhttp = new window.XMLHttpRequest();78             xmlhttp.open("GET",file,false);79             xmlhttp.send(null);80             // 返回 document树， 可以用document.getElementsByTagName()等方法81             xmlDoc = xmlhttp.responseXML ;82         }83         else84         {85             xmlDoc = null ; 86         }87     }88     catch(e)89     {90         error=e.message;91     }92     return xmlDoc;93 }

还有xsl里面可以使用很多xpath的变量，条件判断等等，这让我们可以直接在xsl里面查询得到我们需要的数据。

xpath将在下一篇文章介绍...