到w3c看一下，xml的家族的确有点庞大，包括xml，xsl，xpath等等，http://www.w3school.com.cn/x.asp
其中，xml+xsl的组合为我们很好的将模板与数据分离。
- 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 }
