【基础类】—前后端通信类系统性学习

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

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

https://www.baidu.com:80/
https://www.baidu.com:8080
// 不同源

3. 限制：不是一个源的文档，你没有权利去操作另一个源的文档，主要限制方面
   3-1. Cookie、LocalStorage 和 IndexDB 无法读取
   3-2. DOM无法获得
   3-3. Ajax 请求不能发送

二、前后端如何通信

1. Ajax
   同源下通信方式
2. WebSocket
   支持同源和跨域通信
3. CORS
   支持同源和跨域通信

三、如何创建Ajax

1. XMLHttpRequest 对象的工作流程
   1-1 声明对象，兼容IE
   1-2 根据请求方式的不同，设置不同传参方式
   1-3 open方法，确定发送的方式、地址、是否异步
   1-4 send方法，发送请求
   1-5 监听响应状态变化, 处理返回数据

 /**
  * [json 实现ajax的json]
  * @param  {[type]} options [description]
  * @return {[type]}         [description]
  */
  util.json = function (options) {
      var opt = {
          url: '',
          type: 'get',
          data: {},
          success: function () {},
          error: function () {},
      };
      util.extend(opt, options);
      if (opt.url) {
          // ①声明对象，兼容IE
          var xhr = XMLHttpRequest
             ? new XMLHttpRequest()
             : new 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]);
          }
          // ② 根据请求方式的不同，传递参数的方式也不相同
          if (type === 'GET') {
              url = url + '?' + dataArr.join('&');
              // ③ open方法，确定发送的方式、地址、是否异步
              xhr.open(type, url.replace(/\?$/g, ''), true);
              // ④ send方法，发送请求
              xhr.send();
          }
          if (type === 'POST') {
              xhr.open(type, url, true);
              xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
              xhr.send(dataArr.join('&'));
          }
          // ⑤ 监听响应状态变化
          xhr.onload = function () {
              // ⑥ 处理返回数据， 200表示成功返回 304表示缓存中读取， 如果请求是媒体资源，还需要判断206，因为媒体资源是分段返回的
              if (xhr.status === 200 || xhr.status === 304) {
                  var res;
                  if (opt.success && opt.success instanceof Function) {
                      res = xhr.responseText;
                      if (typeof res === 'string') {
                          res = JSON.parse(res);
                          opt.success.call(xhr, res);
                      }
                  }
              } else {
                  if (opt.error && opt.error instanceof Function) {
                      opt.error.call(xhr, res);
                  }
              }
          };
      }
  };

2. 兼容性处理
3. 事件的触发条件
4. 事件的触发顺序

四、跨域通信的几种方式

1.JSONP

1. JSONP： 再出来postMessage之前，一直使用JSONP进行跨域通信
2. JSONP 原理： 利用script标签的异步加载来实现的
3. JSONP 具体的实现逻辑
   3-1 向服务端发送请求，并告诉服务端callback的名称

<script src="http:www.abc.com/?callback=jsonp"></script>

3-2 服务端返回数据，全局注册jsonp函数，同时执行本地jsonp函数

<script src="http:www.abc.com/?callback=jsonp"></script>
<script>
	jsonp({
		data: {}
	})
</script>

4. 代码实现步骤

   4-1 确定回调函数的名称

   4-2 根据名称注册全局函数

   4-3 动态创建scrpit标签

   4-4 监听脚本的加载事件

   4-5 监听加载是否成功，成功后，删除该script标签，同时删除全局函数

   4-6 往html里面新增script标签，发送请求

5. 具体代码实现

  /**
   * [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]);
          }
      };
      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

1. Hash: url中，#号后面的东西为hash, hash的变动，页面不会刷新
2. search: url中，?号后面的东西叫search，search的改变，页面会刷新，所以search不能做跨域通信
3. 使用hash通信 代码实现

// 利用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;
      };

3.postMessage

1. postMessage：同源策略是限制跨域通信，实际业务中又需要跨域通信，使用postMessage实现跨域通信，H5新出的
2. postMessage代码实现

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

4.WebSocket

1. WebSocket：支持跨域通信
2. WebSocket 代码实现

// Websocket【参考资料】http://www.ruanyifeng.com/blog/2017/05/websocket.html
	  // wss 服务器地址
      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

1. CORS：支持跨域通信的Ajax

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

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