Communication API

主要探讨用于构建实时跨源通信的两个重要模块：跨文档消息通信和XMLHttpRequest Level2。

（一）跨文档消息通信

通常出于安全方面考虑，运行于同一个浏览器的框架、标签页、窗口间的通信一直受到严重的限制，然而现实中存在一些合理的让不同站点的内容能在浏览器内进行交互的需求。

为满足要求而引进的新功能：跨文档消息通信。可以确保窗口间进行跨源通信。

发送消息通过postMessage(data,url)，然后添加消息事件监听器就行了，消息事件是一个拥有data（数据）和origin（源）的DOM事件。

使用postMessage API：

    1、浏览器支持情况检测：

        if(typeof window.postMessage === "undefined")    //true为浏览器不支持postMessage

    2、发送消息；

        window.postMessage(data, url) ;    //data：通信数据；url：传送目的地

    3、监听消息事件处理。

        window.addEventListener("message", messageHandler, true) ;

        function messageHandler(e){

            switch(e.origin) {    //获取传送源

                case "www.conghua.com" :

                    var data = e.data ;     //获取数据处理

                    break ;

                default :

                    //不信任源的处理

            }

        }

（二）XMLHttpRequest Level2

XMLHttpRequest Level2相对于XMLHttpRequest主要改进两方面：

1、跨源XMLHttpRequest：

    过去XMLHttpRequest只支持同源通信，XMLHttpRequest Level2通过CORS（Cross Origin Resource Sharing， 跨源资源共享）实现跨源的XMLHttpRequest。

    使用跨源XMLHttpRequest可以构建基于非源服务的Web应用程序，使客户端整合来自不同源的内容，如果目标服务器允许，可以使用用户证书访问受保护的内容，进而让用户直接访问个人信息。相反，如果通过服务器端对不同源进行整合，所有内容需要穿过服务端的基础层，可能会形成瓶颈。

2、进度事件（Process events）：

    在旧版本XMLHttpRequest中仅有readystatechange事件响应进度，而且IE对readyState==3不兼容，此外readyState更改事件缺乏与上传进程通信的方法。

    在XMLHttpRequest Level2中添加了一些进度事件：loadstart、progress、abort、error、load、loadend，可以调用相应的属性(onloadstart)对应的回调函数。

    处于向后兼容目的，就得readyState属性和readystatechange事件得以保留使用。

使用XMLHttpRequest API：

1、浏览器支持情况检测：

    var ajaxObject = new XMLHttpRequest() ;

    if(typeof ajaxObject.withCredentials ===undefined)    //true为浏览器不支持

2、构建跨源请求：

    ajaxObject.open("GET", url, true) ;    //和原来方法一样，但url路径可以跨源

3、使用进度事件：

    表示请求和响应的不同阶段，不再使用数值状态表示，而采用命名进度事件；进度事件使用了多个文本域，记录了代发数据总量、已发数据总量、以及标志数据总量 是否已知道的布尔值。

    ajaxObject.onprogress = function(e) {

        var total = e.total ;

        var loaded = e.loaded ;

        if (e.lengthComputable) {    //利用进度信息处理}

    }

4、二进制数据：

    支持新的二进制API，可以用XMLHttpRequest发送二进制数据，调用send()方法发送Blob和ArrayBuffer对象。

    var a = new Uint8Array([8,6,7,5]) ;

    ajaxObject.send(a.buffer) ;

    代码执行后会生成带有二进制内容体的HTTP POST请求。也可以将reaponse属性值设置为text、document、arraybuffer或者blob控制response属性返回的对象类型。