• XML使用总结(一)


    XML使用总结(一):

    XML是一种可拓展的标记语言,被设计用来描写叙述、存储及传递数据的语言体,而它的标签没有被提前定义,须要用户自行定义,是W3C推荐的数据存储和传递的标准标记语言。

    ·     XML与HTML?

    ·     XML的用途?

    ·     XML结构语法?

    ·     XML元素属性?

    ·     XML的验证?

    ·     XML的解析?

    一、XML与HTML

    我们知道HTML也是典型的标记语言,那么它们的差别:

    1、为不同的目标而设计

    XML设计用来存储描写叙述和传递数据的。焦点在于数据内容;而HTML被设计用来显示数据的,焦点在于数据的外观展示。

    2、XML不是HTML的替代品

    XML不是HTML的替代品,它是一种独立于软件和硬件的数据传递工具,前者是用来传递数据,而后者是用来显示数据的。

    二、XML的用途

    XML应用在Web开发的很多方面。经常使用在数据存储、传递和共享。很多其它用途例如以下所看到的:

    1、简化传输数据

    通过XML,能够轻松的在不同系统平台间传递数据,能够降低系统移植。不同应用程序间交互数据所带来的数据处理复杂问题。

    2、简化数据共享

    XML是以纯文本形式存储数据。因此提供了一种独立与软件和硬件的数据存储方式,使不同应用程序共享数据更easy。

    3、互联网语言

    非常多互联网语言都是通过XML创建的:

    XHTML  --新版的HTML

    WSDL  --描写叙述Web Services

    WAP与WML  --用于手持设备的语言

    RSS  --用于RSS feed语言

    RDF与OWL  --描写叙述资源和本体

    SMIL  --描写叙述针对web的多媒体

    4、HTML数据分离

    通过XML,数据独立存储在文件里,这样能够仅仅专注与HTML的布局和显示,并确保改动底层数据不再对HTML改动,并且实现方式比較简单,仅仅须要通过几行JavaScript代码就能够读取XML文件内容。并动态显示到HTML中。

    三、XML结构语法

    1、结构

    XML描写叙述体是一种树结构,从“根部”開始,然后拓展到“枝叶”结束,结构图例如以下:

    上面的结构图描写叙述了一类商品的单品属性。相应的XML描写叙述文件:

    <?

    xml version="1.0" encoding="UTF-8"?

    >

    <producttype>

        <product category="PHP">

            <no lang="中译文">NOC0001</no>

            <name>PHP高级设计教程</name>

            <price>88.99</price>

           <time>2015.12.30</time>

        </product>

        <product category="JAVA">

            <no lang="中译文">NOC0002</no>

            <name>Thinking inJava</name>

           <price>102.99</price>

           <time>2004.03.30</time>

        </product>

        <product category="WEB">

            <no lang="英原版">NOC0003</no>

            <name>WEB高级开发教程</name>

           <price>78.99</price>

           <time>2012.07.30</time>

        </product>

    </producttype>

    NOTE:

    XML文件第一行声明XML的版本号为1.0。编码格式为utf-8格式。

    <producttype>为根元素。它以下能够有多个子元素,根元素是必须有的元素。

    <product category="">为子元素。也是以下属性的根元素。category为该元素的属性,该元素以下即为四个子元素。

    </producttype>为相应上面的跟元素的结束标记。相同</product>也为相应的结束标记。

    2、语法

    <?xml version="1.0" encoding="UTF-8"?

    >

    <root>

        <child>

           <subchild>...</subchild>

        </child>

        ...

    </root>

    NOTE:

    XML文档描写叙述必须有根元素;

    XML元素必须有相应的关闭标记。

    XML元素标记区分大写和小写。

    XML元素的属性值必须加引號。

    XML中空格保留。多个连续空格合为一个空格;

    XML实体引用:

    对于某些特殊字符。XML编译器会把它当作特殊的处理。如:< 符号。会被当作新的元素的開始。所以元素内容含有该符号时,就会报错,解决的办法是引用实体解决:

    比如:

    <note>if age < 30 then</note>  -这个是错误的;

    <note>if age &lt; then</note>  -这个是正确的。

    提前定义的实体符号:


    NOTE:

    对于<和&在XML中是非法的。而>是合法的,可是这里建议使用实体引用取代直接使用。

    在XML中的凝视类似HTML:<!—comment -->;

    在XML中,以LF来存储换行:

    Windows 应用程序中,换行通常以一对字符来存储:回车符 (CR) 和换行符 (LF)。

    这对字符与打字机设置新行的动作有相似之处。

    Unix 应用程序中,新行以 LF 字符存储。

    Macintosh 应用程序使用 CR 来存储新行。

    四、XML元素属性

    1、什么是元素

    元素指的是从标记的開始(含開始标签),到标记结束(含结束标记)间的部分。

    元素包括内容:

    元素能够包括元素。包括文本,也能够含有属性;

    XML命名规则:

    名字可含字母、数字及其他字符;

    名字不能含数字或标点符開始;

    名字不能以字符xml、XML或Xml开头;

    名字不能含空格。

    NOTE:

    名字应该比較短。推荐使用下划线,比如:<product_name>,不建议使用特殊字符;

    XML元素拓展性。

    XML能够在不中断应用程序的情况下,拓展XML的内容。

    2、属性

    属性是对元素的补充。一般存放数据无关的数据,XML元素能够在标签開始处包括。

    A、XML属性必须使用引號;

    B、XML的避免使用,因使用属性而引起的一些问题:

    属性无法包括多重的值(元素能够)

    属性无法描写叙述树结构(元素能够)

    属性不易扩展(为未来的变化)

    属性难以阅读和维护

    请尽量使用元素来描写叙述数据。

    而只使用属性来提供与数据无关的信息。

    NOTE:

    请尽量使用元素来描写叙述数据。而只使用属性来提供与数据无关的信息。

    C、以下为推荐的属性使用:

        <product category="PHP">

            <id>1001</id>

            <no>NOC0001</no>

            <name>PHP高级设计教程</name>

           <price>88.99</price>

           <time>2015.12.30</time>

        </product>

    上面的ID和no都使用了属性。它们属于数据的补充或附加数据,另外,常常会使用ID来编号元素。比方ID,它与数据本身并无必定关系。当然。有时可自行定义元素,来满足业务的数据需求。

    五、XML的验证

    XML的验证包括两部分:形式和合法性。语法正确的XML是形式良好的XML。而经过DTD验证的即为合法的XML。以下详细分析:

    XML的验证

    形式良好的XML :

    ·     XML 文档必须有根元素

    ·     XML 文档必须有关闭标签

    ·     XML 标签对大写和小写敏感

    ·     XML 元素必须被正确的嵌套

    ·     XML 属性必须加引號

    NOTE:

    <producttype>

        <product category="PHP">

            <id>1001</id>

            <no>NOC0001</no>

            <name>PHP高级设计教程</name>

           <price>88.99</price>

           <time>2015.12.30</time>

        </product>

        <product category="JAVA">

            <id>1002</id>

            <no>NOC0002</no>

            <name>Thinking inJava</name>

            <price>102.99</price>

           <time>2004.03.30</time>

        </product>

        <product category="WEB">

            <id>1003</id>

            <no>NOC0003</no>

            <name>WEB高级开发教程</name>

           <price>78.99</price>

           <time>2012.07.30</time>

        </product>

    </producttype>

    形式合法的XML:

    DTD是用来验证XML的结构合法性的语法规则,使用一系列合法的元素定义文档结果:

    <!DOCTYPE product [

      <!ELEMENT producttype(product,id,no,name,price,time) >

      <!ELEMENT product(id,no,name,price,time) >

      <!ELEMENT id (#PCDATA) >

      <!ELEMENT no (#PCDATA) >

      <!ELEMENT name (#PCDATA) >

      <!ELEMENT price (#PCDATA) >

      <!ELEMENT time (#PCDATA) >

    ]>

    怎样验证?

    <?

    xml version="1.0" encoding="UTF-8"?>

    <!DOCTYPE product SYSTEM "product.dtd">

    <producttype>

        <product category="PHP">

            <id>1001</id>

            <no>NOC0001</no>

            <name>PHP高级设计教程</name>

           <price>88.99</price>

           <time>2015.12.30</time>

        </product>

        <product category="JAVA">

            <id>1002</id>

            <no>NOC0002</no>

            <name>Thinking inJava</name>

           <price>102.99</price>

            <time>2004.03.30</time>

        </product>

        <product category="WEB">

            <id>1003</id>

            <no>NOC0003</no>

            <name>WEB高级开发教程</name>

           <price>78.99</price>

           <time>2012.07.30</time>

        </product>

    </producttype>

    NOTE:

    仅仅须要使用<!DOCTYPE product SYSTEM "product.dtd">引用,程序执行时自己主动编译并验证XML是否符合自己定义的 DTD规则。

    另外,W3C 支持一种基于 XML 的 DTD取代者。它名为 XML Schema。兴许会继续总结。

    六、XML的解析

    1、JavaScript解析:

    A、XML文件解析:

    js解析脚本:

    /**

     * XML文档的解析脚本

     */

    window.onload = function(){

          // code for IE7+, Firefox,Chrome, Opera, Safari

          if(window.XMLHttpRequest) { 

                xmlHttp = newXMLHttpRequest();

          } else {                     // code for IE6, IE5

                xmlHttp = newActiveXObject("Microsoft.XMLHTTP");

          }

    };

    var xmlHttp = null;

    /**

     * 解析XML文件

     */

    xmlparser = function(method,xmlUrl) {

          if(null == xmlHttp){

                return "<br/>Error Reason: xmlHttp is null!";

          }

         

          //xmlhttp.onreadystatechange =state_Change;

          xmlHttp.open(method,xmlUrl,false);

          xmlHttp.send();

          returnxmlHttp.responseXML;

    };

    待解析XML文档:

    <?xml version="1.0" encoding="UTF-8"?

    >

    <!DOCTYPE product SYSTEM "product.dtd">

    <producttype>

        <product category="PHP">

            <id>1001</id>

            <no>NOC0001</no>

            <name>PHP高级设计教程</name>

           <price>88.99</price>

           <time>2015.12.30</time>

        </product>

        <product category="JAVA">

            <id>1002</id>

            <no>NOC0002</no>

            <name>Thinking inJava</name>

           <price>102.99</price>

           <time>2004.03.30</time>

        </product>

        <product category="WEB">

            <id>1003</id>

            <no>NOC0003</no>

            <name>WEB高级开发教程</name>

           <price>78.99</price>

           <time>2012.07.30</time>

        </product>

    </producttype>

    前端页面解析:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <script src="__PUBLIC__/htmls/js/jquery-1.8.3.min.js"></script>

    <script src="__PUBLIC__/htmls/js/xmlparse.js"></script>

    </head>

    <body>

          <table id="tb_products"width="100%" border="0" cellspacing="15"cellpadding="0">

          </table>

         

          <br/>

          <a href="#" onclick="xmlParsePre();">点击我開始解析</a>

    </body>

    <script type="text/javascript">

          xmlParsePre = function(){

          // 解析

          var xmlUrl = "/Project/Study/View/XML/product.xml";

          var xmlDoc = xmlparser("GET",xmlUrl);

          if(null == xmlDoc){

                return;

          }

         

          // 获取

          var domElems =xmlDoc.getElementsByTagName("product");

          for(vari=0;i<domElems.length;i++) {

                var id =domElems[i].getElementsByTagName("id")

                            [0].childNodes[0].nodeValue;

                var no =domElems[i].getElementsByTagName("no")

                            [0].childNodes[0].nodeValue;

                var name =domElems[i].getElementsByTagName("name")

                            [0].childNodes[0].nodeValue;

                var price =domElems[i].getElementsByTagName("price")

                            [0].childNodes[0].nodeValue;

                var time =domElems[i].getElementsByTagName("time")

                            [0].childNodes[0].nodeValue;

               

                $("#tb_products").append("<tr><td>"+id+"</td><td>"+no+

                "</td><td>"+name+"</td><td>"+price+"</td><td>"+time+"</td></tr>");

          }

    };

    </script>

    </html>

    B、XML字符串解析:

    Js解析脚本:

    /**

     * 解析XML字符串

     */

    xmlparserStr = function(xmlStr) {

          var xmlDoc = null;

          if (window.DOMParser) {       // Other Explorer

                var parser = newDOMParser();

                xmlDoc =parser.parseFromString(xmlStr, "text/xml");

          } else                                   // InternetExplorer

          {

                xmlDoc = newActiveXObject("Microsoft.XMLDOM");

                xmlDoc.async = "false";

                xmlDoc.loadXML(xmlStr);

          }

         

          return xmlDoc;

    };

    待解析字符串:

    var xml = "<producttype>";

          xml += "<productcategory='PHP'><id>1001</id><no>NOC0001</no><name>PHP高级设计教程</name><price>88.99</price><time>2015.12.30</time></product>";

          xml += "<productcategory='JAVA'><id>1002</id><no>NOC0002</no><name>ThinkinginJava</name><price>102.99</price><time>2004.03.30</time></product>";

          xml += "<productcategory='WEB'><id>1003</id><no>NOC0003</no><name>WEB高级开发教程</name><price>78.99</price><time>2012.07.30</time></product>";

          xml += "</producttype>";

    前端调用解析:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <script src="__PUBLIC__/htmls/js/jquery-1.8.3.min.js"></script>

    <script src="__PUBLIC__/htmls/js/xmlparse.js"></script>

    </head>

    <body>

          <table id="tb_products"width="100%" border="0" cellspacing="15"cellpadding="0">

          </table>

         

          <br/>

          <a href="#" onclick="xmlParsePre();">点击我開始解析</a>

    </body>

    <script type="text/javascript">

          xmlParsePre = function(){

         

          var xml = "<producttype>";

          xml += "<productcategory='PHP'><id>1001</id><no>NOC0001</no><name>PHP高级设计教程</name><price>88.99</price><time>2015.12.30</time></product>";

          xml += "<productcategory='JAVA'><id>1002</id><no>NOC0002</no><name>ThinkinginJava</name><price>102.99</price><time>2004.03.30</time></product>";

          xml += "<productcategory='WEB'><id>1003</id><no>NOC0003</no><name>WEB高级开发教程</name><price>78.99</price><time>2012.07.30</time></product>";

          xml += "</producttype>";

         

          // 解析

          var xmlDoc =xmlparserStr(xml);

         

          // 获取

          var domElems =xmlDoc.getElementsByTagName("product");

          for(vari=0;i<domElems.length;i++) {

                var id =domElems[i].getElementsByTagName("id")

                            [0].childNodes[0].nodeValue;

                var no =domElems[i].getElementsByTagName("no")

                            [0].childNodes[0].nodeValue;

                var name =domElems[i].getElementsByTagName("name")

                            [0].childNodes[0].nodeValue;

                var price =domElems[i].getElementsByTagName("price")

                            [0].childNodes[0].nodeValue;

                var time =domElems[i].getElementsByTagName("time")

                            [0].childNodes[0].nodeValue;

               

                $("#tb_products").append("<tr><td>"+id+"</td><td>"+no+

                "</td><td>"+name+"</td><td>"+price+"</td><td>"+time+"</td></tr>");

          }

    };

    </script>

    </html>

    上面的XML文件和字符串解析的结果同样,例如以下:

    2、待续…

    好了,到这里我们总结介绍了XML的基本知识、验证及解析显示。

       技术讨论群:489451956(新)






  • 相关阅读:
    定位中方向余弦矩阵(DCM)简介
    前端UI框架小汇总
    前端知识点小结
    overflow兼容iOS
    使用Flexible实现手淘H5页面的终端适配
    获取当前Javascript脚本文件的路径
    Javascript中document.execCommand()的用法 ( 实现浏览器菜单的很多功能 )
    jquery中的map()方法与js中的map()方法
    js判断是否为移动端
    页面制作注意事项
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/7264028.html
Copyright © 2020-2023  润新知