通信类

一、同源策略及限制

源：域名    端口号    协议

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

Cookie、LocalStorage和IndexDB无法读取

DOM无法获得

Ajax请求不能发送

二、前端通信

Ajax    同源通信

WebSocket    不限制同源

CORS    不限制同源

三、跨域通信

JSONP    利用script标签异步加载

    1. 给服务端传递一个回调名称

    2. 在window以回调名称注册一个全局函数

    3. 动态创建script标签

    4. 监听脚本加载事件，响应onload，判断onload响应是否成功， 删除函数或变量

    5. 在HTML文档中增加此script标签

https://github.com/webmodules/jsonp

Hash    URL#，快通信，页面不刷新

    页面A通过iframe或frame嵌入跨域页面B

    A中伪代码：

var B = document.getElementsByTarName('iframe');

B.src = B.src + '#' + 'data';

    B中伪代码：

window.onhashchange = function () {

    var data = window.location.hash;

};

postMessage    HTML5新增

    窗口A(http://A.com)向跨域的窗口B(http://B.com)发送消息

window.postMessage('data', 'http://B.com);

    在窗口B中监听

window.addEventListener('message', function (e) {

    console.log(e.origin);    //http://A.com

    console.log(e.source);    //窗口A的window

    console.log(e.data);

}, false);

WebSocket    新标准

var ws = new WebSocket('wss://echo.websocket.org');

ws.onopen = function (e) {

    console.log('Connection open ...');

    ws.send('Hello WebSockets!');

};

ws.onmessage = function (e) {

    console.log('Received Message: ' + e.data);

    ws.close();

}

ws.onclose = function (e) {

    console.log('Connection closed.');

};

CORS    新标准，支持跨域通信的Ajax

    浏览器会拦截Ajax请求，如果这个Ajax请求是跨域的，会在HTTP请求头中加一个origin

fetch(url [, options]);

fetch('/some/url', {

    method: 'get',

}).then(function (response) {

    //

}).catch(function (error) {

    //

});