【通信】前端通信相关知识点_前端通信行业相关经验-优快云博客

本文详细解析了同源策略的定义及其限制，探讨了前后端通信方式，包括Ajax的工作流程与兼容性处理，以及跨域通信的多种解决方案如JSONP、Hash、postMessage、WebSocket和CORS。

概述：什么是同源策略及限制前后端如何通信如何创建Ajax 跨域通信的几种方式

什么是同源策略及限制

源的概念：协议域名端口

协议、域名、端口号中只要有一个不同，便属于跨域。访问受限的几个方面：1、cookie、LocalStorage 和 IndexDB（浏览器提供的本地数据库）无法读取 2、Dom 无法获得 3、Ajax 请求不能发送

前后端如何通信

Ajax 同源策略下的通信

WebSoket 不受同源策略限制

CORS 支持同源通信也支持跨域通信，新的通信信息标准

如何创建Ajax

分析：1、XMLHttpRequest 对象的工作流程（只有高级浏览器支持，IE不支持）

2、兼容性处理

3、事件的触发条件

4、事件的触发顺序

var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');
    xhr.open(type, url, true)
    xhr.send();
    xhr.onload = function (){//监听成功失败
      //200-利用强缓存或返回正常 304-重定向，利用本地缓存 206-请求媒体资源时分批响应状态码为206
      if(xhr.status === 200 || xhr.status === 304 || xhr.status === 206){
        var res = xhr.responseText;
        if(typeof res === 'string'){
          res = JSON.parse(res)
        }
      }
    }

跨域通信的几种方式

JSONP

JSONP原理：前端声明好一个函数，后端执行函数，执行函数参数中携带所要请求的数据。在页面中创建script标签接收数据，接收完成后清除创建的script 标签。

实现方法：

util.jsonp = function (url, onsuccess, onerror, charset) {
     var callbackName = util.getName('tt_player');//获取回调名称
     window[callbackName] = function () {//以回调名称注册一个全局函数
         if (onsuccess && util.isFunction(onsuccess)) {
             onsuccess(arguments[0]);
         }
     };
     var script = util.createScript(url + '&callback=' + callbackName, charset);
     script.onload = script.onreadystatechange = function () {
         if (!script.readyState || /loaded|complete/.test(script.readyState)) {
             script.onload = script.onreadystatechange = null;
             // 移除该script的 DOM 对象
             if (script.parentNode) {
                 script.parentNode.removeChild(script);
             }
             // 删除函数或变量
             window[callbackName] = null;
         }
     };
     script.onerror = function () {
         if (onerror && util.isFunction(onerror)) {
             onerror();
         }
     };
     document.getElementsByTagName('head')[0].appendChild(script);
 };

Hash url地址中#后的内容，hash变动，页面不会刷新 ?后的内容(search)更新则会刷新页面，所以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;
      };

postMessage h5新增跨域通信方式

// postMessage
      // 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
      Bwindow.postMessage('data', 'http://B.com');//参数1：要发送的数据  参数2：要接收数据的源
      // 在窗口B中监听
      Awindow.addEventListener('message', function (event) {
          console.log(event.origin);//获取发送数据的源
          console.log(event.source);//A 窗口的引用
          console.log(event.data);
      }, false);

WebSocket 不受同源策略限制

// Websocket【参考资料】http://www.ruanyifeng.com/blog/2017/05/websocket.html

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

      ws.onopen = function (evt) {
          console.log('Connection open ...');
          ws.send('Hello WebSockets!');
      };

      ws.onmessage = function (evt) {
          console.log('Received Message: ', evt.data);
          ws.close();
      };

      ws.onclose = function (evt) {
          console.log('Connection closed.');
      };

CORS 新的通信标准，可以理解为支持跨域通信的Ajax，浏览器在识别当前是跨域通信时，会在请求头加 origin，从而支持跨域

// CORS【参考资料】http://www.ruanyifeng.com/blog/2016/04/cors.html
      // url（必选），options（可选）fetch 跨域通信方法
      fetch('/some/url/', {
          method: 'get',
      }).then(function (response) {//请求成功回调

      }).catch(function (err) {//请求出错回调
        // 出错了，等价于 then 的第二个参数，但这样更好用更直观
      });