Web前端之通信类

心已赠人 2023-07-20 10:36 1阅读 0赞

### 通信类 ###

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

# 什么是同源策略及限制 #

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。  
注意：源是指协议、域名、端口所组合，比如http：//www.xxx/端口  
（1）Cookie、LocalStrorage和IndexDB无法获取  
（2）DOM无法获得  
（3）AJAX请求不能发送（只能同源通信，跨域就不行了）

# 前后端如何通信 #

1、Ajax（异步操作）  
只能同源通信  
（1）XMLHttpRequest对象的工作流程  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]  
（2）兼容性处理（老版的IE不支持，主要是看你是否有兼容处理的想法和思考）  
（3）事件的触发条件  
（4）事件的触发顺序

接下来我们来模拟ajax的功能

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>通信类</title>
    </head>
    
    <body>
    </body>
    
    <script>
        var util = { };
        //返回数组中的指定项
        util.indexOf = function (array, item) { 
            for (var i = 0; i < array.length; i++) { 
                if (array[i] === item) { 
                    return i;
                }
            }
            return -1;
        };
    
        //判断是否为函数
        util.isFunction = function (source) { 
            return '[object Function]' === Object.prototype.toString.call(source);
        };
    
        //判断是不是IE浏览器
        util.isIE = function () { 
            // userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。
            var myNav = navigator.userAgent.toLowerCase();
            return (myNav.indexOf('msie') !== -1) ? parseInt(myNav.split('msie')[1]) : false;
        }
    
        //对象浅复制 “=”代表浅复制 “===”代表深复制
        util.extend = function (dst, obj) { 
            for (var i in obj) { 
                if (obj.hasOwnProperty(i)) { 
                    dst[i] = obj[i];
                }
            }
        };
    
        //实现ajax的json
        util.json = function (options) { 
            var opt = { 
                url: '',
                type: 'get',
                data: { },
                success: function () {  },
                error: function () {  }
            };
            util.extend(opt, options);
            if (opt.url) { 
                //浏览器特征检查,如果存在就新建一个对象，不存在就新建IE下的一个对象
                //新建对象，同时考虑到了兼容
                //XMLHttpRequest 对象用于和服务器交换数据。
                var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');
                var data = opt.data,
                    url = opt.url,
                    type = opt.type.toUpperCase(),
                    dataArr = [];
                for (var k in data) { 
                    dataArr.push(k + '=' + data[k]);
                }
                // get/post类型 打开方式不同，所以下面来区分
                if (type === 'GET') { 
                    url = url + '?' + dataArr.join('&');
                    // 用open确定打开方式
                    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('&'));
                }
                //接下里去响应，监控执行状态是否成功
                xhr.onload = function () { 
                    // 判断http协议的状态码
                    if (xhr.status === 200 || xhr.status === 304) { 
                        var res;
                        if (opt.success && opt.success instanceof Function) { 
                            res = xhr.responseText;
                            if (typeof res === 'string') { 
                                //拿回来的东西转换为JSON格式
                                res = JSON.parse(res);
                                opt.success.call(xhr, res)
                            }
                        }
                    } else { 
                        if (opt.error && opt.error instanceof Function) { 
                            opt.error.call(xhr, res)    
                        }
                    }
                }
            }
        };
    
    </script>
    
    </html>

2、WebSocket  
不限制同源策略，不受同源策略限制  
3、CORS  
支持跨域也支持同源

# 如何创建Ajax #

见上

# 跨域通信的几种方式 #

**1、JSONP**  
原理：利用script的异步加载  
这个博客中中讲的很详细也很通俗易懂  
[https://blog.csdn.net/hansexploration/article/details/80314948][https_blog.csdn.net_hansexploration_article_details_80314948]

/** * [function 获取一个随机的5位字符串] * @param {[type]} prefix [description] * @return {[type]} [description] */
     util.getName = function (prefix) { 
         return prefix + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
     };
      /** * [function 在页面中注入js脚本] * @param {[type]} url [description] * @param {[type]} charset [description] * @return {[type]} [description] */
     util.createScript = function (url, charset) { 
         var script = document.createElement('script');
         script.setAttribute('type', 'text/javascript');
         charset && script.setAttribute('charset', charset);
         script.setAttribute('src', url);
         script.async = true;
         return script;
     };
     /** * [function jsonp] * @param {[type]} url [description] * @param {[type]} onsucess [description] * @param {[type]} onerror [description] * @param {[type]} charset [description] * @return {[type]} [description] */
     util.jsonp = function (url, onsuccess, onerror, charset) { 
         var callbackName = util.getName('tt_player');
         window[callbackName] = function () { 
             if (onsuccess && util.isFunction(onsuccess)) { 
                 onsuccess(arguments[0]);
             }
         };
         //创建script标签
         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);
     };

**2、Hash**  
Hash就是url中\#后面的东西，hash改变页面不刷新  
url中？后面的改变是刷新页面的，所以不能做通信

// 利用hash，场景是当前页面 A 通过iframe或frame嵌入了跨域的页面 B
    //通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。
    //<iframe src="demo_iframe_sandbox.htm"></iframe>
    // 在A中伪代码如下：
    var B = document.getElementsByTagName('iframe');
    B.src = B.src + '#' + 'data';
    // 在B中的伪代码如下
    window.onhashchange = function () { 
        var data = window.location.hash;
    };

**3、postMessage**  
h5中的标准

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

**4、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.');
          };

**5、CORS**  
CORS为什么支持块域通信  
CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

// CORS【参考资料】http://www.ruanyifeng.com/blog/2016/04/cors.html
          // url（必选），options（可选）
          //fetch实现CORS通信的
          fetch('/some/url/', { 
              method: 'get',
          }).then(function (response) { 
    
          }).catch(function (err) { 
            // 出错了，等价于 then 的第二个参数，但这样更好用更直观
          });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70]: /images/20230528/63ed25db65314dff9be9b4152d7ad919.png
[https_blog.csdn.net_hansexploration_article_details_80314948]: https://blog.csdn.net/hansexploration/article/details/80314948