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将在下一篇文章介绍...

 

posted @ 2013-04-18 10:44  ifeixiang  阅读(409)  评论(0)  编辑  收藏  举报