XML HTTP传输 小结

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

1. 发送一个请求到服务器

xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

format：open(method,url,async)

• method：请求的类型：GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

2. 处理服务器的相应数据

• 返回的是字符串

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;

3. 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

1. transform image to xml
2. http post image，and get response XML tag
3. transform xml into text and show on the browser