通信相关

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

同源策略限制指的是限制从一个源加载的文档与另一个源加载的文档进行进行交互，它是一种隔离潜在的恶意文件的安全机制。所谓同源，指的是同协议，同端口，同域名，三者缺一不可，那所谓非同源，指的是三者中有一个不同，就算非同源，也是所谓的跨域。

同源策略会有如下限制：

cookie、localstorage、indexDB无法读取，dom无法操作、ajax请求无法发送

2、前后端如何通信

前后端通信方式有：Ajax 有同源策略限制、websocket 不限制同源、CORS支持跨域也支持同源

3、如何创建Ajax？

var xhr=null;



// 先判断是不是ie浏览器，ie使用ActiveXObject

if(window.ActiveObject){

   xhr=new ActiveObject();

}else if(window.XMLHttpRequest){

  xhr=new XMLHttpRequest();

}



// 设置请求的URL参数，第一个参数是请求的方式，第二个参数是请求的URL

xhr.open("get","file.php");



// 如果是post请求还要写上请求头

// xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")

// xhr.open("post","file.php");



// 发送请求

xhr.send();



// 注册事件

xhr.onreadystatechange=function(){

   if(xhr.readyState==4&&xhr.status==200){

      var text=xhr.responseText;

   }

}

4、跨域通信的几种方式？

jsonp

<script src="www.mmmm.com/?callback=jsonp"></script>

<script>
    jsonp({
        data: ''
    })
</script>

hash

这个方法利用的是iframe标签来实现跨域通信，比如在一个页面a中写的iframe标签，通过给它的src属性写入b特面路径和需要传递的数据，传入的数据前面加上hash“#”，然后通过iframe发送数据给目标页面b，来实现通信。

// 伪代码


// 当前页面a通过iframe嵌入了跨域的页面b
// 获取iframe, src是b页面
var b=document.getElementsByTagName("iframe")[0];

// 获取b节点里面的src属性，写hash数据
b.src="b.src+'#'+'data';

// b页面
// 监听变化
window.onhashchange=function(){
    var data=window.location.hash;
}

postMessage

// 伪代码

// A页面向B页面发送数据
Bwindow.postMessage('data',"http://www.nnnn.com");


// B页面接收
window.addEventListener('message',function(event){
    console.log(event.origin);   // http://www.nnnn.com
    console.log(event.source);   // Bwindow
    console.log(event.data);     // data
});

websocket

var ws=new WebSocket("wss://nn.com");

// 发送
ws.onopen=function(){
    ws.send("bcn");
}

// 接收数据
ws.onmessage=function(e){
    console.log(e.data)
    ws.close();
}

// 关闭
ws.onclose=function(){
    console.log("close");
}

 

CORS

ajax的一个变种

fetch({
    'some/url'
},{
    methods: 'get'
}).then((response)=>{

}).catch((err)=>{

})