通信类

1、什么是同源策略及限制
2、前后端如何通信
3、如何创建Ajax
4、跨域通信的几种方式

 

 

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

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的安全机制。（协议，域名和端口构成一个源，三个中任何一个不一样就是源不一样，就是跨域了。限制是指一个源操作不了另一个源的内容）
限制的几个方面：
1）Cookie、LocalStorage和IndexDB无法读取
2）DOM无法获得
3）AJAX请求不能发送

 

 

2、前后端如何通信

1）Ajax (受同源策略限制)
2) WebSocket (不受同源策略限制)
3) CORS（支持跨域，同源通信）

 

 

3、如何创建Ajax

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

 

 

4、跨域通信的几种方式

1）JSONP

var callbackName = function(){
　　onsuccess();
}
var script = util.CreateScript(url + '&callback='+callbackName, charset)

 

2）Hash （hash变不刷新页面，search变会刷新页面）

// 利用hash,场景是当前页面 A 通过iframe或frame嵌入了跨域的页面 B
// A的伪代码如下
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' +'data';
// B的伪代码如下
window.onhashchange = function(){
　　var data = window.location.hash;
}

 

3) postMessage (H5中的新方式)

// 窗口A 向跨域的窗口B 发送信息
window.postMessage('data', 'http://B.com');
// 在窗口B中监听：
window.addEventListener('message', function(event) {
　　console.log(event.data);
}, false)

 

4) WebSocket

// websocket
var ws = new WebSocket('wss://echo.websocket.org');
// 打开socket，发送数据
ws.onopen = function (evt) {
　　console.log('connetction open ...');
　　ws.send('Hellow Socket');
}
// 监听返回数据，关闭连接
ws.onmessage = function (evt) {
　　console.log(evt.data);
　　ws.close();
}
// 监听关闭连接
ws.onclose = function (evt) {
　　console.log('connection closed.')
}

 

5) CORS（ajax的一个变种）

// CORS
// url必须，options可选
fetch('/some/url', {
　　method: 'get'
}).then (function(res) {
　　// do sth
}).catch(function(err){
　　// 出错了：等价于then的第二个参数，但这样更好用更直观
})