WEB API新增整理（二）_beacon接口-CSDN博客

一、可扩展样式表语言转换(XSLT)

简介：XSLT是一种基于XML的语言，用于XML文档转换，配合着专门的处理软件一起使用。虽然这个处理过程被称作“转换”，但并没有改变原始文档，而是在原文档内容的基础上创建了一个新的XML文档。然后, 这个新文档会被处理器序列化（输出）为标准的XML语法或其他格式。XSLT最常用于不同XML模式间的数据转换，或用于将XML数据转换为网页或PDF文档。目前大部分浏览器均支持XSLT。

XSLT把文档声明为 XSL 样式表的根元素是 <xsl:stylesheet> 或 <xsl:transform>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
或
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

XSL 样式表由一个或多套被称为模板（template）的规则组成。每个模板含有当某个指定的节点被匹配时所应用的规则。

示例：

//cdcatalog.xsl文件

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <!-- 用于创建模板，match属性也可用来为整个文档定义模板。match="/" 定义整个文档 -->
  <html>
  <body>
    <h2>My CD Collection</h2>
    <table border="1">
    <tr bgcolor="#9acd32">
      <th align="left">Title</th>
      <th align="left">Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <!--<xsl:value-of> 元素用于提取某个选定节点的值。 -->
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
    </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

//cdcatalog.xml文件
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
</catalog>

//支持的浏览器中打开cdcatalog.xml文件即可看到解析后的效果

二、XPath

XPath 是一种用于在 XML 文档中进行导航的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。XPath 是 W3C XSLT 标准的主要元素，并且 XQuery 和 XPointer 都构建于 XPath 表达之上。XPath 含有超过 100 个内建的函数。这些函数用于字符串值、数值、日期和时间比较、节点和 QName 处理、序列处理、逻辑值等等。

在 XPath 中，有七种类型的节点：元素、属性、文本、命名空间、处理指令、注释以及文档节点（或称为根节点）。

XPath 使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的（如bookstore选取bookstore下的所有元素，bookstore/book选取bookstore下的所有book元素）。

示例：

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore><!-- 父节点，每个元素以及属性都有一个父节点 -->

<book><!-- 是title的父节点，也是先辈，同时是bookstore的后代节点 -->
  <title lang="en">Harry Potter</title><!-- 子节点 -->
  <author>J K. Rowling</author> <!-- 与title为同胞节点 -->
  <year>2005</year>
  <price>29.99</price>
</book>

</bookstore>

//books.xml文件内容
<?xml version="1.0" encoding="ISO-8859-1"?>

<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">XQuery Kick Start</title>
  <author>James McGovern</author>
  <author>Per Bothner</author>
  <author>Kurt Cagle</author>
  <author>James Linn</author>
  <author>Vaidyanathan Nagarajan</author>
  <year>2003</year>
  <price>49.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>

//html文件内容
//使用js获取xpath中的标签及元素值。
<html>
<body>
<script type="text/javascript">
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}

xml=loadXMLDoc("/example/xmle/books.xml");
path="/bookstore/book/title"
// code for IE
if (window.ActiveXObject)
{
var nodes=xml.selectNodes(path);

for (i=0;i<nodes.length;i++)
  {
  document.write(nodes[i].childNodes[0].nodeValue);
  document.write("<br />");
  }
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result=nodes.iterateNext();

while (result)
  {
  document.write(result.childNodes[0].nodeValue);
  document.write("<br />");
  result=nodes.iterateNext();
  }
}
</script>

</body>
</html>

三、Device Light（设备光线）

简介：当设备的光线传感器检测到光强等级的变化时，它会通知浏览器这个改变。当浏览器得到这个通知后会发布一个提供光强信息的DeviceLightEvent事件。目前只有Firefox Mobile支持该属性

示例：

window.addEventListener('devicelight', function(event) {
  var html = document.getElementsByTagName('html')[0];

  if (event.value < 50) {
    html.classList.add('darklight');
    html.classList.remove('brightlight');
  } else {
    html.classList.add('brightlight');
    html.classList.remove('darklight');
  }
});

四、Battery API

简介：提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件。这个可以在设备电量低的时候调整应用的资源使用状态，或者在电池用尽前保存应用中的修改以防数据丢失。目前该api的支持度已知chrome支持，firefox中不支持，其他未知。

示例：

//我们同时监听放电状态和电池等级和剩余事件的事件（不论是否正在充电还是在使用电池）。这可以通监
//听 chargingchange, levelchange, chargingtimechange, dischargingtimechange 事件完成。

navigator.getBattery().then(function(battery) {

  console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
  console.log("Battery level: " + battery.level * 100 + "%");
  console.log("Battery charging time: " + battery.chargingTime + " seconds");
  console.log("Battery discharging time: " + battery.dischargingTime + " seconds");

  battery.addEventListener('chargingchange', function() {
    console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
  });

  battery.addEventListener('levelchange', function() {
    console.log("Battery level: " + battery.level * 100 + "%");
  });

  battery.addEventListener('chargingtimechange', function() {
    console.log("Battery charging time: " + battery.chargingTime + " seconds");
  });

  battery.addEventListener('dischargingtimechange', function() {
    console.log("Battery discharging time: " + battery.dischargingTime + " seconds");
  });

});

五、Beacon API

简介：Beacon 接口用于将异步和非阻塞请求发送到服务器。信标（Beacon ）请求使用HTTP协议中的POST方法，请求通常不需要响应。这个请求被保证在，页面的unload状态从发起到完成之前，被发送。该API主要用来在页面卸载之前，向服务器报告用户操作行为或代码异常等信息，方便数据统计。目前浏览器支持度不高

示例：

WorkerNavigator.sendBeacon('http://localhost:3001/sendMessage.json',"数据数据");

六、CSS Font Loading API

简介：CSS 字体加载 API 为您提供了动态加载字体资源时的events和interfaces。目前移动端浏览器支持有限，pc端除IE外基本支持该接口。目前fontFace提供了以下几种api

AnimationEvent：表示提供与动画相关的信息的事件。创建方式：new AnimationEvent(事件名称)最终返回事件实例

CSS：接口涵盖CSS相关的实用方法。尚且不存在实现这个接口的对象：它仅仅包含静态的方法，因此也是一个使用接口。CSS.supports()：返回 Boolean 对象，标示参数中的键值对或者条件是否被支持。CSS.escape()：可以用作转义字符串，用以作为CSS选择器的一部分

CSSConditionRule：表示单个条件 CSS 规则, 由条件和语句块组成。它是一个接口，需要实现才可使用

CSSMediaRule ：表示单个CSS @media 规则的接口。它实现 CSSConditionRule 接口，但它仍然是接口需要实现后才可使用。

CSSRule：通过查看CSS样式表的cssRules列表，可以获得对cssRules实现对象的引用。目前浏览器均已实现改方法。示例：document.styleSheets[0].cssRules[0].cssText。

CSSRuleList：一个数组对象包含着一个有序的CSSRule对象的集合。示例：document.styleSheets[0].cssRules

CSSStyleSheet：代表一个单一的CSS样式表。它从其父代StyleSheet继承属性和方法。
var styleObj= document.styleSheets[0].cssRules[0].style;
alert(styleObj.cssText);
for (var i = styleObj.length-1; i >= 0; i--) {
   var nameString = styleObj[i];
   styleObj.removeProperty(nameString);
}
alert(styleObj.cssText);
MediaQueryList：在一个document上维持着一系列的媒体查询，并负责处理当媒体查询在其document上发生变化时向监听器进行通知的发送。MediaQueryList对象使得通过观察其document而检测它的媒体查询的值的变化成为可能，而不是周期性地对这些媒体查询的值进行检查。

七、Channel Messaging API

简介：允许两个不同的脚本运行在同一个文档的不同浏览器上下文（比如两个 iframe，或者文档主体和一个 iframe，使用 SharedWorker 的两个文档，或者两个 worker）来直接通讯，在每端使用一个端口（port）通过双向频道（channel）向彼此传递消息。（postMessage，IE10及以上均支持）

//发送页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>html5通信</title>
    <style>
      section {
        border-radius: 10px;
        background-color: #f4f4f4;
        height: 200px;
        width: 400px;
        margin: 0 auto;
        padding: 10px;
      }
      iframe {
        margin-top: 5px;
        width: 395px;
        height: 160px;
      }
    </style>
  </head>
  <body>
    <!--
	PostMessage API
		又被称为跨文档消息通信，由于不同站点之间的信息交互需求，因此html5添加了跨文档消息信息，
		该规范可以确保标签页、窗口、ifream之间进行跨源通信

-->
    <h1>发送页面</h1>
    <section>
      <div>发送消息<input /><button>发送</button></div>
      <div>目标接收窗口</div>
      <iframe src="http://localhost:3001/PostMessage-Host.html"></iframe>
    </section>
    <script type="text/javascript">
      var iframe_win = document.querySelector('iframe').contentWindow;
      document.querySelector('button').addEventListener('click', function(e) {
        e.preventDefault();
        iframe_win.postMessage(document.querySelector('input').value, 'http//localhost:3001');
      });
    </script>
  </body>
</html>

//接受页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>html5通信</title>
  </head>
  <body>
    <!--
	PostMessage API
		又被称为跨文档消息通信，由于不同站点之间的信息交互需求，因此html5天假了跨文档消息信息，该规范可以确保标签页、窗口、ifream之间进行跨源通信

-->
    <header>
      <h1>接收页面</h1>
    </header>
    <ul></ul>

    <script type="text/javascript">
      window.onmessage = function(e) {
        if (e.origin !== 'http://localhost:3001') {
          return;
        }
        var li = document.createElement('li');
        li.innerHTML = e.origin + ' 发送：' + e.data;
        document.querySelector('ul').appendChild('li'); //展示数据
      };
    </script>
  </body>
</html>

八、Credential Management API

简介：

允许网站存储和检索用户，联合账户和公钥证书。这些功能允许用户在不输入密码的情况下登录，查看他们曾经登录到一个站点的联合帐户，并且在会话过期且没有显式的登录流程的情况下恢复会话。

此API允许网站与用户代理的密码系统进行交互，以便网站能够以统一的方式处理站点凭证，而用户代理则可以为他们的凭证管理提供更好的帮助。例如，用户代理在处理联合身份提供程序或使用不仅仅是用户名和密码的深奥登录机制时特别困难。为了解决这些问题，Credential Management API为网站提供了存储和检索不同类型凭据的方法。这为用户提供了一些功能，比如查看他们曾经登录到某个站点的联合帐户，或者在会话过期且没有显式的登录流程的情况下恢复会话。

规范的更高版本允许从不同的子域检索凭证。例如，存储在login.example.com中的密码可用于登录www.example.com。要利用这一点，必须通过调用CredentialsContainer.store()显式存储密码。这有时被称为公共后缀列表（PSL）匹配;但是规范仅建议使用PSL来确定凭证的有效范围。它(子域共享凭据)不需要它。因此浏览器的实现可能会有所不同。

目前实现度不高，暂时无法使用。

九、Fetch API

简介：

Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和灵活的功能集。fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。

fetch() 必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response。你也可以传一个可选的第二个参数init（参见 Request）。IE Edge支持fetch API，大部分浏览器已经实现改API。

示例：

//fetch使用，以及header修改
fetch(url, {
  method: "POST",
  headers: {
      "Content-Type": "application/json",
  },
  mode: "cors",
  body: JSON.stringify({
      content: "留言内容"
}).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});