XML

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]);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值