前端面试知识点--通信类（跨域通信方式）

什么是同源策略及限制?

同源策略限制从一个源加载的文档或脚本如何与另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

源包括三个部分：协议、域名、端口（http协议的默认端口是80）。如果有任何一个部分不同，则源不同，那就是跨域了。
限制体现于：

• Cookie、LocalStorage和IndexDB无法读取 ；
• DOM无法获得 和操作；
• AJAX请求不能发送；

前后端如何通信?

• Ajax：受同源策略限制；
• WebSocket：不受同源策略限制；
• CORS：可理解为支持跨域和同源通信的Ajax；

如何创建Ajax?

• XMLHttpRequest对象的工作流程
• 兼容性处理 （XMLHttpRequest只有在高级浏览器中才支持）
• 事件的触发条件
  
• 事件的触发顺序
  

XMLHttpRequest的使用【参考网址】https://segmentfault.com/a/1190000004322487
创建ajax【参考网址】https://segmentfault.com/a/1190000006669043

跨域通信的几种方式?

• JSONP
  • 原理：通过<script>标签的异步加载来实现的。比如说，实际开发中的head标签里，可以通过<script>标签的src属性加载外部url，加载很多在线的插件。这就是用到了JSONP。
  • 如何实现
    上面的url中，data=name是get请求的参数，jsonp是和后台约定好的函数名。

//客户端写法：
<script src="http://www.abc.com/?data=name&callback=jsonp" charset="utf-8"></script>
//服务器写法：
<script type="text/javascript">
	jsonp({
		data: {}
	});
</script>

• Hash
  url的#后面的内容就叫Hash。Hash的改变不会导致页面刷新。这就是用 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;
      };

• postMessage
  H5中新增的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

      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

      // url（必选），options（可选）
      fetch('/some/url/', {
          method: 'get',
      }).then(function (response) {
      }).catch(function (err) {
        // 出错了，等价于 then 的第二个参数，但这样更好用更直观
      });

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