what’s XML
XML 指可扩展标记语言(eXtensible Markup Language)。
XML 被设计用来传输和存储数据,不用于表现和展示数据,HTML 则用来表现数据。
XML 是独立于软件和硬件的信息传输工具。
应该掌握的基础知识
- HTML
- JavaScript
XML 不会做任何事情
XML 被设计用来结构化、存储以及传输信息。
- 文件格式
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
没有预定义标签
- HTML 中使用的标签都是预定义的。HTML 文档只能使用在 HTML 标准中定义过的标签(如 <p>、<h1> 等等)。
- 上面实例中的标签没有在任何 XML 标准中定义过(比如 和 ),
- XML 允许创作者定义自己的标签和自己的文档结构。
简化数据共享
- XML 数据以纯文本格式进行存储,因此提供了一种独立于软件和硬件的数据存储方法。
real example
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
- line 1定义XML 的版本(1.0)和所使用的编码(UTF-8 : 万国码, 可显示各种语言)
树结构
<bookstore><book category="COOKING"><title lang="en">Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year><price>30.00</price></book><book category="CHILDREN"><title lang="en">Harry Potter</title><author>J K. Rowling</author><year>2005</year><price>29.99</price></book><book category="WEB"><title lang="en">Learning XML</title><author>Erik T. Ray</author><year>2003</year><price>39.95</price></book>
</bookstore>
使用CSS格式化显示XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
.
.
.
</CATALOG>
- 第二行把 XML 文件链接到 CSS 文件
XSLT
JS API of XML
- create an XMLHttpRequest Object
xmlhttp=new XMLHttpRequest();
- XML文档->XML DOM
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","books.xml",false); //同步不需要编写onreadystate处理服务器响应
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
- 异步响应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function loadXMLDoc()
{if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp=new XMLHttpRequest();}else{// IE6, IE5 浏览器执行代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}xmlhttp.open("GET","xmlhttp_info.txt",true);xmlhttp.send();
}
</script>
</head>
<body><h2>使用 XMLHttpRequest 对象</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button></body>
</html>
XMLHttpRequest GET
- 所有现代的浏览器(IE7+、Firefox、Chrome、Safari 和 Opera)都有一个内建的 XMLHttpRequest 对象。
旧版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 对象:xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
- 发送一个请求到服务器
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
format:open(method,url,async)
- method:请求的类型:GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
- 处理服务器的相应数据
- 返回的是字符串
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- 返回的是XML文档对象
xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{txt=txt + x[i].childNodes[0].nodeValue + "";
}
document.getElementById("myDiv").innerHTML=txt;
- onreadystatechange
xmlhttp.onreadystatechange=function()
{if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}
}
- onreadystatechange:存储函数(或函数的名称)在每次 readyState 属性变化时被自动调用
- readyState存放了 XMLHttpRequest 的状态。从 0 到 4 变化:
0:请求未初始化
1:服务器建立连接
2:收到的请求
3:处理请求
4:请求完成和响应准备就绪 - status:200:“OK”
404:找不到页面
XMLHttpRequest POST
Mylab
- transform image to xml
- http post image,and get response XML tag
- transform xml into text and show on the browser