XML 被设计用来传输和存储数据,来从 HTML 那里分离数据。XML 可被用来交换、共享以及存储数据
HTML 被设计用来显示数据。
XML
XML 指可扩展标记语言(EXtensible Markup Language)
XML 是一种标记语言,很类似 HTML
XML 的设计宗旨是传输数据,而非显示数据
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
XML 是 W3C 的推荐标准
XML 中,有 5 个预定义的实体引用:
< < 小于
> > 大于
& & 和号
' ' 单引号
" " 引号
XML 编写注释的语法与 HTML 的语法很相似:<!-- This is a comment -->
HTML 会把多个连续的空格字符裁减(合并)为一个
避免 XML 属性:因使用属性而引起的一些问题:
属性无法包含多重的值(元素可以)
属性无法描述树结构(元素可以)
属性不易扩展(为未来的变化)
属性难以阅读和维护
形式良好”(Well Formed)的 XML文档语法规则:
XML 文档必须有根元素
XML 文档必须有关闭标签
XML 标签对大小写敏感
XML 元素必须被正确的嵌套
XML 属性必须加引号
Xml验证:http://www.w3school.com.cn/xml/xml_validator.asp
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想,因为您能够:
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
创建 XMLHttpRequest 对象的语法:
xmlhttp=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest()
;
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
;
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = OK
// ...our code here...
}
else
{
alert("Problem retrieving XML data");
}
}
}
xmlhttp.readyState
xmlhttp.status;
xmlhttp.statusText;
xmlhttp.responseText;
xmlhttp.responseXML
document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();
xmlHttp.open("GET", "note.xml", false);
xmlHttp.send(null);
xmlDoc=xmlHttp.responseText;
xmlHttp.open("POST", "demo_dom_http.asp", false);
xmlHttp.send(xmlDoc);
document.write(xmlHttp.responseText);
通过使用 response.write 属性把结果传回客户端。
所有现代浏览器都内建了供读取和操作 XML 的 XML 解析器。
解析器把 XML 转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。
加载XML字符串: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);
}
加载xml文件:
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","/example/xmle/note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
IE加载XML:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
;
xmlDoc.async="false";
xmlDoc.load("note.xml");
其他浏览器:
var xmlDoc=document.implementation.createDocument("","",null)
;
xmlDoc.async="false";
xmlDoc.load("note.xml");
Internet Explorer 使用 loadXML() 方法来解析 XML 字符串,而其他浏览器使用 DOMParser 对象。
注释:loadXML() 方法用于加载字符串(文本),load() 用于加载文件。
DOM (Document Object Model,文档对象模型)定义了访问和操作文档的标准方法。
使用xml命名空间来避免命名冲突
使用前缀:
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f: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>
<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>
使用默认的命名空间(Default Namespaces)
为元素定义默认的命名空间可以让我们省去在所有的子元素中使用前缀的工作。
<table xmlns="http://www.w3.org/TR/html4/"
>
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
</table>
<table xmlns="http://www.w3school.com.cn/furniture"
>
<name>African Coffee Table</name>
<width>80</width>
<length>120</length>
</table>
CDATA:所有 XML 文档中的文本均会被解析器解析。
只有 CDATA 区段(CDATA section)中的文本会被解析器忽略。
PCDATA 指的是被解析的字符数据(Parsed Character Data)。
转义字符
非法的 XML 字符必须被替换为实体引用(entity reference)。
< < 小于
> > 大于
& & 和号
' ' 省略号
" " 引号
注释:严格地讲,在 XML 中仅有字符 "<"和"&" 是非法的。省略号、引号和大于号是合法的,但是把它们替换为实体引用是个好的习惯。
CDATA 部分由 "<![CDATA[" 开始,由 "]]>" 结束:CDATA 部分不能包含字符串 "]]>"。也不允许嵌套的 CDATA 部分。
标记 CDATA 部分结尾的 "]]>" 不能包含空格或折行。
XML 文档可以包含非 ASCII 字符,比如法语。
为了避免错误,需要规定 XML 编码,或者将 XML 文档存为 Unicode。
获取元素:获取元素的值:
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
document.write(txt); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
获取元素的值:
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
document.write(txt);
改变元素的值:
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
document.write(txt);
改变属性的值:
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
var x=xmlDoc.getElementsByTagName('book');
for(i=0;i<x.length;i++)
{
x.item(i).setAttribute("edition","FIRST");
}
var x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
{
document.write(x[i].childNodes[0].nodeValue);
document.write(" - Edition: ");
document.write(x[i].parentNode.getAttribute('edition'));
document.write("<br />");
}
创建元素:
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
var x=xmlDoc.getElementsByTagName('book');
var newel,newtext
for (i=0;i<x.length;i++)
{
newel=xmlDoc.createElement('edition');
newtext=xmlDoc.createTextNode('First');
newel.appendChild(newtext);
x[i].appendChild(newel);
}
//Output all titles and editions
var y=xmlDoc.getElementsByTagName("title");
var z=xmlDoc.getElementsByTagName("edition");
for (i=0;i<y.length;i++)
{
document.write(y[i].childNodes[0].nodeValue);
document.write(" - Edition: ");
document.write(z[i].childNodes[0].nodeValue);
document.write("<br />");
}
删除元素:
//检查最后一个节点是否是元素节点
function get_lastchild(n)
{
var x=n.lastChild;
while (x.nodeType!=1)
{
x=x.previousSibling;
}
return x;
}
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
document.write("book 节点的数目:");
document.write(xmlDoc.getElementsByTagName('book').length);
document.write("<br />");
var lastNode=get_lastchild(xmlDoc.documentElement);
var delNode=xmlDoc.documentElement.removeChild(lastNode);
document.write("removeChild() 方法执行后 book 节点的数目:");
document.write(xmlDoc.getElementsByTagName('book').length);
XML 数据岛(XML Data Islands)是嵌入 HTML 页面中的 XML 数据。
避免使用xml数据岛:XML 数据岛只在 Internet Explorer 浏览器中有效。
替代:应当在 HTML 中使用 JavaScript 和 XML DOM 来解析并显示 XML。
Internet Explorer - 行为:Internet Explorer 5 引入了行为(behaviors)。Behaviors 是通过使用 CSS 样式向 XML (或 HTML )元素添加行为的一种方法。
避免使用行为:只有 Internet Explorer 支持 behavior 属性。
替代:使用 JavaScript 和 XML DOM (或 HTML DOM)来代替它。
<attach for="element" event="onmouseover" handler="hig_lite" />
<attach for="element" event="onmouseout" handler="low_lite" />
<script type="text/javascript">
function hig_lite()
{
element.style.color='red';
}
function low_lite()
{
element.style.color='blue';
}
</script>
h1 { behavior: url(behave.htc) }