zoukankan      html  css  js  c++  java
  • WEB前端需要了解的XML相关基础知识

    什么是 XML?

    • XML 指可扩展标记语言(EXtensible Markup Language)
    • XML 是一种标记语言,很类似 HTML
    • XML 的设计宗旨是传输数据,而非显示数据
    • XML 标签没有被预定义。您需要自行定义标签
    • XML 被设计为具有自我描述性
    • XML 是 W3C 的推荐标准

    XML DOM

    加载并解析 XML 文件

    JS代码:

    var xmlhttp,xmlDoc;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open('get','./http.xml',false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;
    document.getElementById('to').innerHTML = xmlDoc.getElementsByTagName('to')[0].childNodes[0].nodeValue;

    http.xml代码:

    <note>
        <to>George</to>
        <from>John</from>
        <heading>Reminder</heading>
        <body>Don't forget the meeting!</body>
    </note>

    详细了解: XMLHttpRequest 对象

    加载并解析 XML 字符串

    <body>
    <h1>W3School.com.cn Internal Note</h1>
    <p>
    <b>To:</b> <span id="to"></span><br />
    <b>From:</b> <span id="from"></span><br />
    <b>Message:</b> <span id="message"></span>
    </p>
    <script type="text/javascript">
    var txt = `
        <note>
            <to>George</to>
            <from>John</from>
            <heading>Reminder</heading>
            <body>Don't forget the meeting!</body>
        </note>
    `;
    <!--
    txt="<note>";
    txt=txt+"<to>George</to>";
    txt=txt+"<from>John</from>";
    txt=txt+"<heading>Reminder</heading>";
    txt=txt+"<body>Don't forget the meeting!</body>";
    txt=txt+"</note>";
    -->
    
    if (window.DOMParser){
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(txt,"text/xml");
    }
    else{ // Internet Explorer
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async="false";
        xmlDoc.loadXML(txt);
    }
    document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
    document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
    document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;

    XML to HTML

    HTML代码 :

    <body>
    <script type="text/javascript">
    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","./http.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;
    
    document.write("<table border='1'>");
    var x=xmlDoc.getElementsByTagName("block");
    for (i=0;i<x.length;i++){
      document.write("<tr><td>");
      document.write(x[i].getElementsByTagName("to")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
      document.write(x[i].getElementsByTagName("from")[0].childNodes[0].nodeValue);
      document.write("</td></tr>");
      }
    document.write("</table>");
    </script>
    </body>

    http.xml代码:

    <note>
        <block>
            <to>George</to>
            <from>John</from>
        </block>
        <block>
            <to>China</to>
            <from>America</from>
        </block>
    </note>

    注意:出于安全方面的原因,现代的浏览器不允许跨域的访问。假如你打算在自己的网页上使用上面的例子,则必须把 XML 文件放到自己的服务器上。否则,xmlDoc.load() 将产生错误 "Access is denied"。

    XML 命名空间(XML Namespaces)

    使用前缀来避免命名冲突

    此文档带有某个表格中的信息:

    <h:table>
       <h:tr>
       <h:td>Apples</h:td>
       <h:td>Bananas</h:td>
       </h:tr>
    </h:table>

    此 XML 文档携带着有关一件家具的信息:

    <f:table>
       <f:name>African Coffee Table</f:name>
       <f:width>80</f:width>
       <f:length>120</f:length>
    </f:table>

    现在,命名冲突不存在了,这是由于两个文档都使用了不同的名称来命名它们的<table> 元素 (<h:table> 和 <f:table>)

    通过使用前缀,我们创建了两种不同类型的 <table> 元素。

    使用命名空间(Namespaces)

    这个 XML 文档携带着某个表格中的信息:

    <h:table xmlns:h="http://www.w3.org/TR/html4/">
       <h:tr>
       <h:td>Apples</h:td>
       <h:td>Bananas</h:td>
       </h:tr>
    </h:table>

    此 XML 文档携带着有关一件家具的信息:

    <f:table xmlns:f="http://www.w3school.com.cn/furniture">
       <f:name>African Coffee Table</f:name>
       <f:width>80</f:width>
       <f:length>120</f:length>
    </f:table>

    与仅仅使用前缀不同,我们为<table> 标签添加了一个xmlns 属性,这样就为前缀赋予了一个与某个命名空间相关联的限定名称。

    (xmlns) 属性

    XML 命名空间属性被放置于元素的开始标签之中,并使用以下的语法:

    xmlns:namespace-prefix="namespaceURI"

    详细参考:XML 命名空间(XML Namespaces)

    XML CDATA

    非法的 XML 字符必须被替换为实体引用

    假如您在 XML 文档中放置了一个类似 "<" 字符,那么这个文档会产生一个错误,这是因为解析器会把它解释为新元素的开始。因此你不能这样写:

    <message>if salary < 1000 then</message>

    为了避免此类错误,需要把字符"<" 替换为实体引用,就像这样:

    <message>if salary &lt; 1000 then</message>

    在 XML 中有 5 个预定义的实体引用:

    &lt; < 小于
    &gt; > 大于
    &amp; & 和号
    &apos; ' 省略号
    &quot; " 引号

    注释:严格地讲,在 XML 中仅有字符 "<"和"&" 是非法的。省略号、引号和大于号是合法的,但是把它们替换为实体引用是个好的习惯。

    CDATA

    在 XML 元素中,"<" 和 "&" 是非法的。

    "<" 会产生错误,因为解析器会把该字符解释为新元素的开始。

    "&" 也会产生错误,因为解析器会把该字符解释为字符实体的开始。

    某些文本,比如 JavaScript 代码,包含大量 "<" 或 "&" 字符。为了避免错误,可以将脚本代码定义为 CDATA。

    CDATA 部分中的所有内容都会被解析器忽略。

    CDATA 部分由 "<![CDATA[" 开始,由 "]]>" 结束:

    <script>
    <![CDATA[
    function matchwo(a,b)
    {
    if (a < b && a < 0) then
      {
      return 1;
      }
    else
      {
      return 0;
      }
    }
    ]]>
    </script>

     详细参考:《XML CDATA》

     详细的基础知识参考:《W3school:XML 教程》

  • 相关阅读:
    atitit.解决net.sf.json.JSONException There is a cycle in the hierarchy
    atitit.查看预编译sql问号 本质and原理and查看原生sql语句
    atitit.基于http json api 接口设计 最佳实践 总结o7
    atitit.spring3 mvc url配置最佳实践
    Atitit.列表页面and条件查询的实现最佳实践(2)翻页 分页 控件的实现java .net php
    atitit。自定义uml MOF EMF体系eclipse emf 教程o7t
    atitit.编辑表单的实现最佳实践dwr jq easyui
    Atitit. 提升开发效率与质量DSL ( 3) 实现DSL的方式总结
    atitit.设计模式(2) 查表模式/ command 总结
    Atitit. 提升软件开发效率and 开发质量java 实现dsl 4gl 的本质and 精髓 O725
  • 原文地址:https://www.cnblogs.com/moqiutao/p/10058279.html
Copyright © 2011-2022 走看看