XML理论
Extensible Markup Language 可扩展标识语言
XML具有自我描述性
XML文档是一种树结构
因为XML数据以纯文本格式进行存储,并且独立于软件和硬件,所以XML就有以下作用
把数据从HTML分离了出来
简化了数据的共享
简化数据传输
简化平台的变更
使数据更有用
创建了很多Internet语言
XML VS HTML
XML和HTML一样,来源于SGML
XML不是HTML的替代,是HTML的补充
XML是用来传输数据和存储数据,HTML用来显示数据
XML把数据从HTML分离
通过使用几行JavaScript,可以读取一个外部XML文件,然后更新HTML中的数据内容
编写XML时需要注意的问题
XML文档必须有根元素
所有XML元素都须有关闭标签
XML标签对大小写敏感
XML的属性值须加引号
在XML中,空格会被保留
XML元素必须被正确的嵌套
XML简单案例
<!--XML声明-->
<?xml version="1.0" encoding="ISO-8859-1"?>
<!--book标签是根元素,其他标签都是子元素-->
<book>
<name>Java</name>
<author>John</author>
<price>99</price>
</book>
XML的实体引用 把一些特殊的字符使用实体引用来代替
XML命名规则
名称可以含字母,数字以及其他的字符
名称不能以数字或者标点符号开始
名称不能以字符xml,XML,Xml开始
名称不能包含空格
名称应当比较简短,避免 "-" 和 "." 和 ":" 字符
XML属性
属性(Attribute)提供关于元素的额外附加信息
XML属性必须加引号
如果属性值本身包含双引号,那么有必要使用单引号包围它或者可以使用实体引用
XML中,您应该尽量避免使用属性而使用标签
避免XML属性
属性无法包含多重的值(元素可以)
属性无法描述树结构(元素可以)
属性不易扩展(为未来的变化)
属性难以阅读和维护
尽量使用元素来描述数据,而仅仅使用属性来提供与数据无关的信息比如:
<bookshelf>
<book id="1">
<name>Java</name>
<author>John</author>
<price>99</price>
</book>
<book id="2">
<name>Java</name>
<author>John</author>
<price>99</price>
</book>
</bookshelf>
上面的id仅仅是一个标识符,用于标识不同的便签.它并不是便签数据的组成部分.
在此一个理念是:元数据(有关数据的数据)应当存储为属性,而数据本身应当存储为元素
XML最好的案例
第一个例子中使用了date属性
<book date = "08/08/2008">
<name>Java</name>
<author>John</author>
<price>99</price>
</book>
第二个例子中使用了date元素
<book>
<date>08/08/2008</date>
<name>Java</name>
<author>John</author>
<price>99</price>
</book>
第三个例子中使用了扩展的date元素
<book>
<date>
<day>08</day>
<month>08</month>
<year>2008</year>
</date>
<name>Java</name>
<author>John</author>
<price>99</price>
</book>
这是三个例子虽然包含相同信息,但第三个例子是最好的
验证XML文档
良好的XML编写规范和遵守DTD或者XSD语法规则
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE book SYSTEM "book.dtd">
<book>
<name>Java</name>
<author>John</author>
<price>99</price>
</book>
XML DTD语法
<!DOCTYPE book [
<!ELEMENT book (name,from,price)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>
XML Schema语法
<xs:element name="book">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="price" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
XML样式-使用CSS
css.css
name {background-color: green;}
author {background-color: blue;}
price {background-color: red;}
xml.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="css.css"?>
<book>
<name>Java</name>
<author>Lwc</author>
<price>99</price>
</book>
效果图
XML样式-使用Schema
XMLHttpRequest
XMLHttpRequest对象
XMLHttpRequest对象用于在后台与服务器交换数据
任何W3C推荐标准均未规定XMLHttpRequest对象
XMLHttpRequest作用
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
后台与服务器交换数据
创建XMLHttpRequest对象
所有现代浏览器都内建了XMLHttpRequest对象
xmlhttp=new XMLHttpRequest();
IE5和IE6使用ActiveX对象
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
案例
<script type="text/javascript">
//是否支持XMLHttpRequest
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
//是否支持ActiveXObject
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
alert(xmlhttp)
</script>
XML解析器
所有现代浏览器都内建了供读取和操作XML的XML解析器
解析器把XML载入内存,然后转换可通过JavaScript访问的XML DOM对象
解析XML文档
book.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<book>
<name>Java</name>
<author>John</author>
<price>99</price>
</book>
index.html
<html>
<body>
name:<span id="name"></span><br />
author:<span id="author"></span><br />
price:<span id="price"></span><br />
<script type="text/javascript">
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/*
初始化,做好准备发送
第一个参数,请求方法
第二个参数,解析的文档
第三个参数,否异步处理
*/
xmlhttp.open("get","book.xml",false);
//发送请求
xmlhttp.send();
//对请求的响应,解析为XML并作为Document对象返回
xmlDoc=xmlhttp.responseXML;
document.getElementById("name").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("author").innerHTML=
xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue;
document.getElementById("price").innerHTML=
xmlDoc.getElementsByTagName("price")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
解析XML字符串
IE使用document对象中的loadXML()来解析XML字符串
其他浏览器使用DOMParser对象
<html>
<body>
name:<span id="name"></span><br />
author:<span id="author"></span><br />
price:<span id="price"></span><br />
<script type="text/javascript">
var txt = "";
txt="<book>";
txt=txt+"<name>Java</name>";
txt=txt+"<author>John</author>";
txt=txt+"<price>99</price>";
txt=txt+"</book>";
if (window.DOMParser){
parser=new DOMParser();
/*
解析XML标记
第一个参数要解析的XML标记
第二个参数是文本的内容类型
可能是"text/xml","application/xml","application/xhtml+xml"
*/
xmlDoc=parser.parseFromString(txt,"text/xml");
}else{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
//规定XML文件的下载是否应当被同步处理
xmlDoc.async="false";
//通过解析XML标签字符串来组成文档
xmlDoc.loadXML(txt);
}
document.getElementById("name").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("author").innerHTML=
xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue;
document.getElementById("price").innerHTML=
xmlDoc.getElementsByTagName("price")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
XML DOM VS HTML DOM
XML DOM
定义了访问和操作XML文档的标准方法
DOM把XML文档作为树结构来查看,能够通过DOM树来访问所有元素
可以修改或删除它们的内容,并创建新的元素
元素,它们的文本,以及它们的属性,都被认为是节点
xmlDoc.getElementsByTagName("to")[0].nodeValue
xmlDoc 由解析器创建的XML文档
getElementsByTagName("to")[0] 第一个<to>元素
nodeValue 节点的值(文本本身)
HTML DOM
定义了访问和操作HTML文档的标准方法
可以通过HTML DOM访问所有HTML元素
document.getElementById("to").innerHTML
document HTML文档
getElementById("to") 其中的id="to"的HTML元素
innerHTML HTML 元素的内部文本
HTML显示XML数据
book.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<books>
<book>
<name>Java</name>
<author>John</author>
<price>99</price>
</book>
<book>
<name>.net</name>
<author>Tom</author>
<price>45</price>
</book>
</books>
index.html
<html>
<body>
<script type="text/javascript">
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("get","book.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x = xmlDoc.getElementsByTagName("book");
document.write("<table border='1'>");
for (i=0;i<x.length;i++){
document.write("<tr>");
document.write("<td>");
document.write(x[i].getElementsByTagName("name")[0]
.childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x[i].getElementsByTagName("author")[0]
.childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(x[i].getElementsByTagName("price")[0]
.childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
避免XML元素命名冲突
使用前缀来避免命名冲突
<h:table>
<h:tr>
<h:td>Apples</h:td>
</h:tr>
</th:able>
<f:table>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
使用命名空间来避免命名冲突
<h:table xmlns:h="http://www.w3.org/TR/html4/">
<h:tr>
<h:td>Apples</h:td>
</h:tr>
</th:able>
<f:table xmlns:f="http://www.w3school.com.cn/furniture">
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
XML CDATA,PCDATA,转义字符
所有XML文档中的文本均会被解析器解析,只有CDATA区中的文本会被解析器忽略
PCDATA
PCDATA指的是被解析的字符数据(Parsed Character Data)
CDATA
CDATA指的是不会被解析的字符数据(Character Data)
转义字符
参见DTD实体
XML DOM高级
XML DOM(Document Object Model)定义了访问和操作XML文档的标准方法
DOM把XML文档视为一种树结构,通过这个DOM树,可以访问所有的元素
可以修改它们的内容(文本以及属性),而且可以创建新的元素,均被视为节点
案例
book.xml
<?xml version="1.0"?>
<book>
<name lang = "en">Java</name>
<author>John</author>
<price>99</price>
</book>
book.html
<script type="text/javascript">
function loadXMLDoc(dname){
var xmlDoc;
if (window.ActiveXObject){
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}else{
xmlDoc=document.implementation.createDocument("","",null);
}
xmlDoc.async=false;
xmlDoc.load(dname);
return(xmlDoc);
}
xmlDoc=loadXMLDoc("book.xml");
</script>
获取元素的值
xmlDoc.getElementsByTagName("name")[0].nodeValue;
获取属性的值
xmlDoc.getElementsByTagName("name")[0].getAttribute("lang");
改变元素的值
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue="Orcal";
改变属性的值
xmlDoc.getElementsByTagName("name")[0].getAttribute("lang")="US"
创建元素
createElement()创建新的元素节点
如需创建带有文本内容的新元素,需要同时创建元素节点和文本节点
createTextNode()创建新的文本节点
appendChild()向节点添加子节点(在最后一个子节点之后)
创建了一个元素edition,然后把它添加到第一个book元素中
//创建 <edition> 元素
newel=xmlDoc.createElement("edition");
//创建值为 "First" 的文本节点
newtext=xmlDoc.createTextNode("First");
//把这个文本节点追加到edition元素
newel.appendChild(newtext);
x=xmlDoc.getElementsByTagName("book");
//把edition元素追加到第一个book元素
x[0].appendChild(newel);
删除元素
removeChild()删除指定的节点或元素
删除第一个book元素中的第一个节点
x=xmlDoc.getElementsByTagName("book")[0];
x.removeChild(x.childNodes[0]);