VS+javascrip编程中对xslxml以及树的编写

来公司这么长时间一直到现在一直在iaas项目中辗转。

利用xml的特性将数据独立出，达到UI和Db真正的分离。

1 了解知识：

1.xsl是xml的格式文件， xml是数据文件

2 调试方法：

　　1）在xsl内容中嵌套javascript从而简介调试查看xsl的中间结果，通过查看xsl+xml形成的结果htm

　　2）vs自带了一个功能强大的调试器，专门针对此用法如下：(不懂可以问msdn)

namespace 调试
{
    class Program
    {
        static void Main(string[] args)
        {

            XslCompiledTransform xslt = new XslCompiledTransform(true);//true 开启调试
            // load the style sheet.
            xslt.Load("demo.xsl");

            xslt.Transform("demo.xml", "demo.htm");
            Console.Read();
        }
    }
}

适当加断点，可跳进xsl中的循环调试，也可以变量监视。很好用。

2 Javascript结合xsl xml

 xsl和xml你都有了， 如何将格式套用入数据？

1 跨域加载xml

此时，倘若你想要的xml涉及跨域问题，那么在输出xml的服务器上必须加Header。Access-Control-Allow-Origin: * ！（因为此问题困然我两天）你才能访问到该xml，否则firfox下无法读取。因为ie下，设置interne选项中参数便可以访问！具体问google或者私密我。

 加载文件如下：

//读取本地数据
function xmlGetResponse(_url) {
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", _url, false);
    xmlhttp.send();
    return xmlhttp.responseXML;
//如果responseXML内无数据 可查看responeText核查
}

其中如果responseXML.xml='' &&responseText不为空。可将responseText转化为dom，返回是结果一样的。

 if (!xhttp.responseXML.xml) {
        //转化为dom
        try {
            if (window.ActiveXObject) {
                var xmlobject = new ActiveXObject("Microsoft.XMLDOM");
                xmlobject.async = "false";
                xmlobject.loadXML(xhttp.responseText);
                return xmlobject;
            }
            else {//firfox下特殊
                var parser = new DOMParser();
                var xmlobject = parser.parseFromString(xhttp.responseText, "text/xml");
                return xmlobject;
            }

        } catch (e) {
        }

2 加载xsl

加载方式同加载xml一样，xsl也是标签语言哦，成双成对的。

2 二者结合

用代码说话：

function xmlGetResponse(_urlxml, _urlxsl) {
    var xml = loadXMLDoc(_urlxml);//加载xml
    var xsl = loadXMLDoc( _urlxsl);//加载xsl
    if (window.ActiveXObject) { //ie
        ex = xml.transformNode(xsl);//结合，结果ex是形成的htm
    }
    else if (document.implementation && document.implementation.createDocument) {
 //其他浏览器如firfox
        xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        resultDocument = xsltProcessor.transformToFragment(xml, document);
        document.getElementById(id).appendChild(resultDocument);
//结合，结果resultDocument是形成的htm
    }
}

3 xml+xsl ->tree!形成树

主要的xsl逻辑代码我会共享给大家，也算是我这两天的埋头研究没有浪费。

 1)主要思路

  a.找到根节点，便利其子节点，其中读取属性等等你需要的值，并输出（根据要求可以加上js效果）

  b.递归循环找出所有子节点并展现出树的层次

  c.我认为最难的点：输出树节点 前方的虚线。不知能否理解。如果你有用到，你就知道

 2）主要难点

 a.模块的调用和传参！ 形成递归（不用递归当然更好）

 b.计数 当前节点的父节点，父节点的兄弟节点，父节点的子节点中在本节点之后兄弟节点。。。。等等 

 　　最好慢慢研究http://www.w3school.com.cn/xpath/和http://www.w3school.com.cn/xsl/ 

　　 说的简洁但是意义很大。慢慢理解。

 c.递归输出前方虚线图片。

由于时间限制，讲的比较笼统。见谅

下载地址