XML HTTP传输 小结

what's XML

XML 指可扩展标记语言(eXtensible Markup Language)。

XML 被设计用来传输和存储数据,不用于表现和展示数据,HTML 则用来表现数据。

XML 是独立于软件和硬件的信息传输工具。

应该掌握的基础知识

  • HTML
  • JavaScript

XML 不会做任何事情

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 复制代码
<?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 : 万国码, 可显示各种语言)

树结构

xml 复制代码
<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 复制代码
<?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
xml 复制代码
xmlhttp=new XMLHttpRequest();
  • XML文档->XML DOM
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","books.xml",false);	//同步不需要编写onreadystate处理服务器响应
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
  • 异步响应
html 复制代码
<!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. 发送一个请求到服务器
xml 复制代码
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

format:open(method,url,async)

  • method:请求的类型:GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)
  1. 处理服务器的相应数据
  • 返回的是字符串
xml 复制代码
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  • 返回的是XML文档对象
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;
  1. onreadystatechange
xml 复制代码
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
相关推荐
一只小鱼儿吖5 分钟前
进程代理单窗口单IP技术:原理、应用与实现
网络·网络协议·tcp/ip
稳联技术6 分钟前
Ethernet IP与Profinet共舞:网关驱动绿色工业的智慧脉动
网络·网络协议·tcp/ip
隆里卡那唔28 分钟前
在dify中通过http请求neo4j时为什么需要将localhost变为host.docker.internal
http·docker·neo4j
高兴达1 小时前
RPC框架--实现一个非常简单的RPC调用
网络协议·rpc·firefox
~山有木兮1 小时前
LiteHub中间件之限流实现
网络·http·中间件
游戏开发爱好者83 小时前
iOS App首次启动请求异常调试:一次冷启动链路抓包与初始化流程修复
websocket·网络协议·tcp/ip·http·网络安全·https·udp
2501_915106323 小时前
频繁迭代下完成iOS App应用上架App Store:一次快速交付项目的完整回顾
websocket·网络协议·tcp/ip·http·网络安全·https·udp
cocologin4 小时前
RIP 技术深度解析
运维·网络·网络协议
GalaxyPokemon5 小时前
RPC-Client模块
网络·网络协议·rpc
DemonAvenger6 小时前
Go语言中的TCP编程:基础实现与最佳实践
网络协议·架构·go