前端面试之通信类

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

同源策略 限制从一个源（协议、域名和端口<默认是80>）加载的文档或者脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的关键的安全机制。

源不一样就是跨域了，其中限制是指：

1.Coolie、LocalStorage和IndexDB无法获取
2、DOM无法获得
3、Ajax请求无法发送

二、前后端如何通信

1、Ajax(同源策略)
2、WebSocket
3、CORS

三、如何创建Ajax

用原生js创建 （不用vue和JQuery）
1、XMLHttpRequest对象的工作流程（IE不支持）
2、兼容性处理（IE不支持，处理）
3、事件的触发条件
4、事件的触发顺序（响应顺序）
过程：
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.

(3)设置响应`HTTP`请求状态变化的函数.

(4)发送`HTTP`请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

 var xmlHttp = XMLHttpRequest ? new XMLHttpRequest() : new.window.ActiveXObject('Microsoft.XMLHTTP');
    //创建http请求
    var data = opt.data,
        url = opt.url,
        type = opt.type.toUpperCase(),
        dataArr = [];
    for (var k in data) {
        dataArr.push(k + '=' + data[k]);
    }
    if (type === 'GET') {
        url = url + '?' + dataArr.join('&');
        xhr.open(type, url.replace(/\?$/g, ''), true);
        xhr.send()
    }
    if (type === 'POST') {
        xhr.open(type, url, true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send(dataArr.join('&'));
    }
    // xmlHttp.open('GET', 'demo.php', 'true');
    // xmlHttp.send();
    //响应
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState === 4 & xmlHttp.status === 200) {}
    }

四、跨域通讯的几种方式

1、JSONP
2、Hash（改变 不刷新页面 search改变会刷新页面）
3、postMessage（h5新增加的）
4、WebSocket
5、CORS

• jsonp是什么原理？是怎么实现的？

原理：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

**优点：**是兼容性好，简单易用，支持浏览器与服务器双向通信。
**缺点：**是只支持GET请求。

<script>
    function createJs(sUrl){

        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }

    createJs('jsonp.js');

    box({
       'name': 'test'
    });

    function box(json){
        alert(json.name);
    }
</script>

Hash
postMessage
webSocket
CORS:fetch
浏览器拦截跨域Ajax请求