通信类-同源策略

 // 通信类
       //  什么是同源策略
       //    同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
       //  前后端如何通信
       //    ajax cors websocket
       //  如何创建ajax
       //    XMLHttpRequest对象的工作流程
       //    兼容处理
       //    事件触发条件
       //    事件的触发顺序
       //  跨域通信方式
       //    jsonp
       //    hash
       //    postMessage(跨文档通信 这种方式允许一个页面的脚本发送文本信息到另一个页面的脚本中，不管脚本是否跨域。在一个window对象上调用postMessage()会异步的触发window上的onmessage事件，然后触发定义好的事件处理方法。一个页面上的脚本仍然不能直接访问另外一个页面上的方法或者变量，但是他们可以安全的通过消息传递技术交流。)

       //    websocket
       //    cors(跨域资源共享 这种方式使用了一个新的Origin请求头和一个新的Access-Control-Allow-Origin响应头扩展了HTTP。)

          // 利用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
          // 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
          Bwindow.postMessage('data', 'http://B.com');
          // 在窗口B中监听
          Awindow.addEventListener('message', function (event) {
              console.log(event.origin);
              console.log(event.source);
              console.log(event.data);
          }, false);

          // 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【参考资料】http://www.ruanyifeng.com/blog/2016/04/cors.html
          // url（必选），options（可选）
          fetch('/some/url/', {
              method: 'get',
          }).then(function (response) {

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