HTML5学习笔记(六)-Communication API

本章探讨用于构建实时（real-time）跨源（cross-origin）通信的两个重要模块：跨文档消息通信（Cross Document Messaging）和XMLHttpRequest Level 2.

一、跨文档消息通信

    出于安全方面的考虑，运行在同一浏览器中的框架、标签页、窗口间的通信一直都受到了严格的限制。然而现实中存在一些合理的让不同站点的内容能在浏览器内进行交互的需求。为了满足需求，浏览器厂商和标准制定机构一直同意引入一种新功能：跨文档消息通信。

    跨文档消息通信可以确保iframe、标签页、窗口间安全的进行跨源通信。它把postMessage API定义为发送消息的标准方式。

 

二、使用postMessage API

1、浏览器支持情况检测

在调用postMessage前，应该首先检测浏览器是否支持它。下面就是一种检测是否支持postMessage的方法：

if (typeof window.postMessage === "undefined") {
    //该浏览器不支持postMessage
}

 2、发送消息

通过调用目标页面window对象中的postMessage()函数可发送消息，代码如下：

window.postMessage("Hello, world", "portal.example.com");

 第一个参数包括要发送的数据，第二个参数是消息传送的目的地。要发送消息给iframe，可以再相应iframe的contentWindow中调用postMessage，代码如下：

document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world", "chat.example.net");

 3、监听消息事件

接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。

window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
    switch(e.origin) {
        case "friend.example.com":
            //处理消息
            processMessage(e.data);
            break;
        default:
            //消息来源无法识别
            //消息被忽略
    }
}

 消息事件是一个拥有data（数据）和origin（源）属性的DOM事件。data属性是发送方传递的实际消息，而origin属性是发送来源。

源由规则（scheme）、主机（host）、端口（port）组成。

例如：由于规则不同（如https与http），所以https://www.example.com页面与http://www.example.com页面的源是不同的。

源的概念中不考虑路径。如：http://www.example.com/index.html与http://www.example.com/page2.html只是路径不同，他们是相同的源。

源在API和协议中以字符串的形式出现。

var originWhiteList = ["portal.example.com", "games.example.com", "www.example.com"];

function checkWhiteList(origin) {
    for (var i=0; i<originWhiteList.length; i++) {
        if (origin === originWhiteList[i]) {
            return true;
        }
    }
    return false;
}

function messageHandler(e) {
    if (checkWhiteList(e.origin)) {
        processMessage(e.data);
    } else {
        //忽略来自未知源的消息
    }
}

 postMessage API可以适用于同源和非同源通信，鉴于它的一致性，在同源文档间通信时也推荐适用postMessage。

 

三、XML HttpRequest Level 2

XML HttpRequest API使得Ajax技术的实现成为了可能。作为它的改进版，主要有一下两方面的改进：

• 跨源XMLHttpRequest;

        过去，XMLHttpRequest仅限于同源通信。XMLHttpRequest Level 2通过CORS（Cross Origin Resource Sharing，跨源资源共享）实现了跨源XMLHttpRequests。

• 进度事件（Progress events）

        XMLHttpRequest Level 2用了一个有意义的名字Progress进度来命名进度事件。通过为事件处理程序属性设置回调函数，可以实现对这些事件的监听。

下表是新的进度事件名称：

进度时间的名称

loadstart

progress

abort

error

load

loadend

 

1、浏览器支持情况检测

常用的做法是检测XMLHttpRequest对象中是否存在withCredentials属性：

var xhr = new XMLHttpRequest();
if (typeof xhr.withCredentials === undefined) {
    //不支持跨源的XMLHttpRequest
} else {
    //支持跨源的XMLHttpRequest
}

 

2、构建跨源请求

首先创建新的XMLHttpRequest对象：

然后指定不同源的地址来构造跨源XMLHttpRequest：

var crossOriginRequest = new XMLHttpRequest();
crossOriginRequest.open("GET", "http://www.example.net/stockfeed", true);

 在请求过程中无比确保能够监听到错误。

 

3、使用进度事件

XMLHttpRequest Level 2不再使用数值型状态表示法，而是提供了命名进度事件。为事件处理程序属性设置相应的回调函数后，就可以对这些事件进行监听了。

进度事件使用了多个文本域，分别记录代发送数据的总量、已发送数据的总量，以及用于数据总量是否已知的布尔值。

crossOriginRequest.onprogress = function(e) {
    var total = e.toatl;
    var loaded = e.loaded;

    if (e.lengthComputable) {
        //利用进度信息做些事情
    }
}
crossOriginRequest.upload.onprogress = function(e) {
    var total = e.toatl;
    var loaded = e.loaded;

    if (e.lengthComputable) {
        //利用进度信息做些事情
    }
}

 

4、二进制数据

支持新的二进制API（如Typed Array）的浏览器可以用XMLHttpRequest来发送二进制数据。Level 2规范支持调用send()方法发送Blob和ArrayBuffer对象

var a = new Uint8Array([8,6,7,5,3,0,9]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/data/", true);
console.log(a);
xhr.send(a.buffer);

 XMLHttpRequest Level 2也会公开二进制响应数据。将responseType属性值设置为text、document、arraybuffer或blob来控制 有response属性返回的对象类型。如果想要查看HTTP响应体包含的原始字节，需要将responseTyper属性值设为arraybuffer或blob。

 

四、进阶功能

1、结构化的数据

早期版本的postMessage仅支持字符串。后来版本支持Javascript对象、canvas imageData和文件等其他数据类型。不同浏览器支持的情况也不同。

 

2、Framebusting

Framebusting技术可以保证某些内容不被加载到iframe中。应用程序首先检测其所在窗口是否为最外层的窗口，若不是则跳脱包含它的框架：

if (window !== window.top) {
    window.top.location = location;
}

不过，你可能会有选择的允许某些合作方的页面在其框架中引用你的内容。一般解决方案是使用postMessage在互信页面间握手通信，代码如下：

var framebustTimer;
var timeout = 3000;

if (window !== window.top) {
    framebustTimer = setTimeout(
        function() {
            window.top.location = location;
        }, timeout);
}

window.addEventListener("message", function(e) {
    switch(e.origin) {
        case trustedFramer :
            clearTimeout(framebustTimer);
            break;
    }
}, true);

 

五、扩展阅读

关于XMLHttpRequest Level 2的使用实例可以参看这篇文章，例子很丰富。

http://dev.opera.com/articles/view/xhr2/