前端通信基础

1、什么是同源策略及限制

（1）同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
这个是一个用于隔离潜在恶意文件的关键的安全机制。
源：协议、域名、端口
（2）Cookie、localStorage 和indexDB无法读取。
（3）DOM无法获得。
（4）ajax请求不能发送

2、前后端如何通信

ajax（同源）
websocket
cors

3、如何创建ajax

var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHttp);
xhr.open(type, url, true);
xhr.sendRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send();

（1）XMLHttpRequest对象的工作流程
（2）兼容性处理
（3）事件的触发条件
（4）事件的触发顺序

4、跨域通信的几种方式

（1）jsonp
script标签的异步加载
原理：视频#3-13的第20分钟
（2）hash
hash改变，页面是不刷新的
search改变，页面是会刷新的
window.onhashchange 得到window.location.hash
（3）postMessage

Bwindow.postMessage('data', 'http://B.com');
windwo.addEventListener('message', function(event) {
    console.log(event.origion); // http://A.com
    console.log(event.source); // Awindow
    console.log(event.data); // data
})

（4）websocket

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

（5）cors
①cors会在http请求中添加origin的请求头
②ajax不支持跨域，cors是变种的ajax
③同源下，fetch就是ajax

fetch('/some/url', {
    method: 'get'
}).then(function(response) {

}).catch(function(err) {})

④参考资料：http://www.ruanyifeng.com/blog/2016/04/cors.html