XML系列:xsl与xml组织数据

前端之家收集整理的这篇文章主要介绍了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 XSL
28             var processor = new XSLTProcessor(); 29  processor.importStylesheet(xslt); 30             
31             // Transform
32             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.reason 50                   + " at line " + xmlDoc.parseError.line 51                   + " 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     try
75  { 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         else
84  { 85             xmlDoc = null ; 86  } 87  } 88     catch(e) 89  { 90         error=e.message; 91  } 92     return xmlDoc; 93 }

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

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

原文链接:https://www.f2er.com/xml/297790.html

猜你在找的XML相关文章