XML
1.xml:可扩展标记语言,被用来结构化、存储与传输数据(html被设计用来显示数据),没有预定义标签,具有自我描述性。xml仅仅是纯文本,由于没有预定义标签,允许我们定义自己的标签与文档结构。xml是独立于硬件与软件的信息传输工具。
2.把数据从HTML分离:
如果我们需要在HTML文档中显示动态数据,那么每当数据改变时将花费大量的时间来编辑HTML。通过 XML,数据能够存储在独立的XML文件中。这样你就可以专注于使用HTML进行布局和显示,并确保修改底层数据,不再需要对 HTML 进行任何的改变。通过使用几行JavaScript,你就可以读取一个外部XML文件,然后更新HTML 中的数据内容。
3.<?xml version="1.0" encoding="utf-8"?>
<note>
<to>JingYu He</to>
<from>HuaZhen He</from>
<heading>Reminder</heading>
<body>Do not forget reading!</body>
</note>
4.xml语法:
必须要有根元素
声明部分第一行,定义版本与编码:<?xml version="1.0" encoding="utf-8"?>
关闭标签
大小写敏感
元素可以有属性,属性是名值对,属性值须加引号,单引号、双引号都可以:<note date="25/10/2018">
元素命名不能以字符 “xml”(或者 XML、Xml)开始
元素命名尽量避免"-"、"."和":"(其中":"被转换为命名空间)
5.实体引用:
在XML中,只有字符 "<" 和 "&" 确实是非法的。大于号是合法的,但是用实体引用来代替它是一个好习惯。
"<" ">" "&" ' "
< > & ' "
注意:如果元素属性包含双引号,外层可以使用单引号括起来,或者使用实体引用"""
6.注释:
<!-- 注释 -->
7.在XML中,空格会被保留。HTML会把多个连续的空格字符裁减(合并)为一个,在XML中,文档中的空格不会被删节。
8.xml元素:
属性(Attribute)提供了关于元素的额外(附加)信息,可以在开始标签中包含属性。
<note date="08/08/2008"> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note> <note> <date>08/08/2008</date> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note> //建议使用这种方式 <note> <date> <day>08</day> <month>08</month> <year>2008</year> </date> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note>
9.xml-验证:通过DTD验证的xml文档才是合法的,而XML Schema(XSD)是基于XML的DTD替代者
//DTD验证 <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE note SYSTEM "Note.dtd"> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note> //DTD文件 <!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> //XSD验证 <xs:element name="note"> <xs:complexType> <xs:sequence> <xs:element name="to" type="xs:string"/> <xs:element name="from" type="xs:string"/> <xs:element name="heading" type="xs:string"/> <xs:element name="body" type="xs:string"/> </xs:sequence> </xs:complexType> </xs:element>
10.xml--浏览器:
几乎所有的主流浏览器都支持xml与xslt。在浏览器中打开纯xml文档,只显示源代码。
//使用CSS显示XML <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="note.css"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note> //使用XSLT显示XML <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="note.css"?> <?xml-stylesheet type="text/xsl" href="note.xsl"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note>
总结:
XSLT(eXtensible Stylesheet Language Transformations)是首选的XML样式表语言,远比CSS更加完善。使用XSLT,实则上是把xml文档转换成HTML文档,这项工作可由浏览器完成(浏览器读取的是xml文档,但会将其转换成HTML),也可以在服务器上完成。
11.xml-JavaScript-DOM:
所有现代浏览器都内建了读取和操作XML的XML解析器,解析器把XML载入内存,然后把它转换为可通过js访问的XML DOM对象。这其中包括解析xml文档与xml字符串。
//加载并解析XML文件 <script type="text/javascript"> var xmlhttp; var xmlDoc; //第一部:根据浏览器创建xml解析器 if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //第二步:读取xml文档 xmlhttp.open("GET","/example/xmle/note.xml",false); xmlhttp.send(); //第三步:获取xml DOM对象 xmlDoc=xmlhttp.responseXML; //第四步:xml DOM对象显示在HTML中 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; </script>
//加载并解析XML字符串 <script> var txt="<note>"; txt+="<to>George</to>"; txt+="<from>John</from>"; txt+="<heading>Reminder</heading>"; txt+="<body>Don't forget the meeting!</body>"; 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; </script>
12.xml-nameSpaces:
命名空间可以避免命名冲突。
12.1使用前缀来避免命名冲突
<h:table> //表格信息的table <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table> //家具信息的table <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table>
12.2使用命名空间
<h:table xmlns:h="http://www.w3.org/TR/html4/"> //表格信息的table <h:tr> <h:td>Apples</h:td> <h:td>Bananas</h:td> </h:tr> </h:table> <f:table xmlns:f="http://www.w3school.com.cn/furniture"> //家具信息的table <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>120</f:length> </f:table>
12.3命名空间
xmlns:namespace-prefix="namespaceURI"
当命名空间被定义在元素的开始标签中时,所有带有相同前缀的子元素都会与同一个命名空间相关联。
12.4默认命名空间
xmlns="namespaceURI"
为元素定义默认的命名空间可以让我们省去在所有的子元素中使用前缀的工作。
<table xmlns="http://www.w3.org/TR/html4/"> //表格信息的table <tr> <td>Apples</td> <td>Bananas</td> </tr> </table> <table xmlns="http://www.w3school.com.cn/furniture"> //家具信息的table <name>African Coffee Table</name> <width>80</width> <length>120</length> </table>
13.PCDATA与CDATA
PCDATA:被解析的字符数据。XML解析器通常会解析XML文档中所有的文本
CDATA: 不应由XML解析器进行解析的文本数据。被声明为CDATA的文本被解析器忽略。<![CDATA[ 被忽略的文本 ]]>
注意:CDATA部分不能包含字符串 "]]>"。不允许嵌套的CDATA部分。标记CDATA部分结尾的"]]>"不能包含空格或折行。
14.xml DOM
//获取元素的值 x=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; //获取属性的值 txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang"); //改变元素的值 x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue="Easy Cooking"; //改变属性的值 x=xmlDoc.getElementsByTagName("book"); for(i=0;i<x.length;i++) { x[i].setAttribute("edition","first"); }