06-跨域通信类

前言

从本章起，对代码的要求没之前那么高了，但是，要求你对知识面的掌握要足够宽。

前端通信类的问题，主要包括以下内容：

  • 1、什么是同源策略及限制

同源策略是一个概念，就一句话。有什么限制，就三句话。能说出来即可。

  • 2、前后端如何通信

如果你不准备，估计也就只能说出ajax。这个可以考察出知识面。

  • 3、如何创建Ajax

Ajax在前后端通信中经常用到。做业务时，可以借助第三方的库，比如vue框架里的库、jQuery也有封装好的方法。但如果让你用原生的js去实现，该怎么做？

这就是考察你的动手能力，以及框架原理的掌握。如果能写出来，可以体现出你的基本功。是加分项。

  • 4、跨域通信的几种方式

这部分非常重要。无非就是问你：什么是跨域、跨域有什么限制、跨域有几种方式。

下面分别讲解。

同源策略的概念和具体限制

同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（来自MDN官方的解释）

具体解释：

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

（2）限制：这个源的文档没有权利去操作另一个源的文档。这个限制体现在：（要记住）

  • Cookie、LocalStorage和IndexDB无法获取。

  • 无法获取和操作DOM。

  • 不能发送Ajax请求。我们要注意，Ajax只适合同源的通信。

前后端如何通信

主要有以下几种方式：

  • Ajax：不支持跨域。

  • WebSocket：不受同源策略的限制，支持跨域。

  • CORS：不受同源策略的限制，支持跨域。一种新的通信协议标准。可以理解成是：同时支持同源和跨域的Ajax。

如何创建Ajax

关于Ajax请求，可以看本人的基础文章：Ajax入门和发送http请求

在回答 Ajax 的问题时，要回答以下几个方面：

  • 1、XMLHttpRequest 的工作原理

  • 2、兼容性处理

XMLHttpRequest只有在高级浏览器中才支持。在回答问题时，这个兼容性问题不要忽略。

  • 3、事件的触发条件

  • 4、事件的触发顺序

XMLHttpRequest有很多触发事件，每个事件是怎么触发的。

发送 Ajax 请求的五个步骤（XMLHttpRequest的工作原理）

（1）创建XMLHttpRequest 对象。

（2）使用open方法设置请求的参数。open(method, url, 是否异步)。

（3）发送请求。

（4）注册事件。 注册onreadystatechange事件，状态改变时就会调用。

如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

（5）获取返回的数据，更新UI。

发送 get 请求和 post 请求

get请求举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. <h1>Ajax 发送 get 请求</h1>
  9. <input type="button" value="发送get_ajax请求" id='btnAjax'>
  11. <script type="text/javascript">
  12.     // 绑定点击事件
  13.     document.querySelector('#btnAjax').onclick = function () {
  14.         // 发送ajax 请求 需要 五步
  16.         // （1）创建异步对象
  17.         var ajaxObj = new XMLHttpRequest();
  19.         // （2）设置请求的参数。包括：请求的方法、请求的url。
  20.         ajaxObj.open('get', '02-ajax.php');
  22.         // （3）发送请求
  23.         ajaxObj.send();
  25.         //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
  26.         //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
  27.         ajaxObj.onreadystatechange = function () {
  28.             // 为了保证 数据 完整返回，我们一般会判断 两个值
  29.             if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
  30.                 // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
  31.                 // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
  32.                 console.log('数据返回成功');
  34.                 // 数据是保存在 异步对象的 属性中
  35.                 console.log(ajaxObj.responseText);
  37.                 // 修改页面的显示
  38.                 document.querySelector('h1').innerHTML = ajaxObj.responseText;
  39.             }
  40.         }
  41.     }
  42. </script>
  43. </body>
  44. </html>

post 请求举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. <h1>Ajax 发送 get 请求</h1>
  9. <input type="button" value="发送put_ajax请求" id='btnAjax'>
  10. <script type="text/javascript">
  12.     // 异步对象
  13.     var xhr = new XMLHttpRequest();
  15.     // 设置属性
  16.     xhr.open('post', '02.post.php');
  18.     // 如果想要使用post提交数据,必须添加此行
  19.     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  21.     // 将数据通过send方法传递
  22.     xhr.send('name=fox&age=18');
  24.     // 发送并接受返回值
  25.     xhr.onreadystatechange = function () {
  26.         // 这步为判断服务器是否正确响应
  27.         if (xhr.readyState == 4 && xhr.status == 200) {
  28.             alert(xhr.responseText);
  29.         }
  30.     };
  31. </script>
  32. </body>
  33. </html>

onreadystatechange 事件

注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。

readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）

  • 0: 请求未初始化

  • 1: 服务器连接已建立

  • 2: 请求已接收

  • 3: 请求处理中

  • 4: 请求已完成，且响应已就绪

事件的触发条件

06-跨域通信类 - 图1

事件的触发顺序

06-跨域通信类 - 图2

上图的参考链接：

实际开发中用的 原生Ajax请求

  2.     var util = {};
  4.     //获取 ajax 请求之后的json
  5.     util.json = function (options) {
  7.         var opt = {
  8.             url: '',
  9.             type: 'get',
  10.             data: {},
  11.             success: function () {
  12.             },
  13.             error: function () {
  14.             },
  16.         };
  17.         util.extend(opt, options);
  18.         if (opt.url) {
  19.             //IE兼容性处理：浏览器特征检查。检查该浏览器是否存在XMLHttpRequest这个api，没有的话，就用IE的api
  20.             var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');
  22.             var data = opt.data,
  23.                 url = opt.url,
  24.                 type = opt.type.toUpperCase();
  25.             dataArr = [];
  26.         }
  28.         for (var key in data) {
  29.             dataArr.push(key + '=' + data[key]);
  30.         }
  32.         if (type === 'GET') {
  33.             url = url + '?' + dataArr.join('&');
  34.             xhr.open(type, url.replace(/\?$/g, ''), true);
  35.             xhr.send();
  36.         }
  38.         if (type === 'POST') {
  39.             xhr.open(type, url, true);
  40.             // 如果想要使用post提交数据,必须添加此行
  41.             xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  42.             xhr.send(dataArr.join('&'));
  43.         }
  45.         xhr.onload = function () {
  46.             if (xhr.status === 200 || xhr.status === 304) { //304表示：用缓存即可。206表示获取媒体资源的前面一部分
  47.                 var res;
  48.                 if (opt.success && opt.success instanceof Function) {
  49.                     res = xhr.responseText;
  50.                     if (typeof res === 'string') {
  51.                         res = JSON.parse(res);  //将字符串转成json
  52.                         opt.success.call(xhr, res);
  53.                     }
  54.                 }
  55.             } else {
  56.                 if (opt.error && opt.error instanceof Function) {
  57.                     opt.error.call(xhr, res);
  58.                 }
  59.             }
  60.         };
  61.     }

Ajax 的推荐链接：https://segmentfault.com/a/1190000006669043

跨域通信的几种方式

方式如下：

  • 1、JSONP

  • 2、WebSocket

  • 3、CORS

  • 4、Hash

  • 5、postMessage

上面这五种方式，在面试时，都要说出来。

1、JSONP

面试会问：JSONP的原理是什么？怎么实现的？

在CORS和postMessage以前，我们一直都是通过JSONP来做跨域通信的。

JSONP的原理：通过<script>标签的异步加载来实现的。比如说，实际开发中，我们发现，head标签里，可以通过<script>标签的src，里面放url，加载很多在线的插件。这就是用到了JSONP。

JSONP的实现：

比如说，客户端这样写：

  1.     <script src="http://www.smyhvae.com/?data=name&callback=myjsonp"></script>

上面的src中，data=name是get请求的参数，myjsonp是和后台约定好的函数名。
服务器端这样写：

  1.         myjsonp({
  2.             data: {}
  4.         })

于是，本地要求创建一个myjsonp 的全局函数，才能将返回的数据执行出来。

实际开发中，前端的JSONP是这样实现的：

  1. <script>
  3.     var util = {};
  5.     //定义方法：动态创建 script 标签
  6.     /**
  7.      * [function 在页面中注入js脚本]
  8.      * @param  {[type]} url     [description]
  9.      * @param  {[type]} charset [description]
  10.      * @return {[type]}         [description]
  11.      */
  12.     util.createScript = function (url, charset) {
  13.         var script = document.createElement('script');
  14.         script.setAttribute('type', 'text/javascript');
  15.         charset && script.setAttribute('charset', charset);
  16.         script.setAttribute('src', url);
  17.         script.async = true;
  18.         return script;
  19.     };
  22.     /**
  23.      * [function 处理jsonp]
  24.      * @param  {[type]} url      [description]
  25.      * @param  {[type]} onsucess [description]
  26.      * @param  {[type]} onerror  [description]
  27.      * @param  {[type]} charset  [description]
  28.      * @return {[type]}          [description]
  29.      */
  30.     util.jsonp = function (url, onsuccess, onerror, charset) {
  31.         var callbackName = util.getName('tt_player'); //事先约定好的 函数名
  32.         window[callbackName] = function () {      //根据回调名称注册一个全局的函数
  33.             if (onsuccess && util.isFunction(onsuccess)) {
  34.                 onsuccess(arguments[0]);
  35.             }
  36.         };
  37.         var script = util.createScript(url + '&callback=' + callbackName, charset);   //动态创建一个script标签
  38.         script.onload = script.onreadystatechange = function () {   //监听加载成功的事件，获取数据
  39.             if (!script.readyState || /loaded|complete/.test(script.readyState)) {
  40.                 script.onload = script.onreadystatechange = null;
  41.                 // 移除该script的 DOM 对象
  42.                 if (script.parentNode) {
  43.                     script.parentNode.removeChild(script);
  44.                 }
  45.                 // 删除函数或变量
  46.                 window[callbackName] = null;  //最后不要忘了删除
  47.             }
  48.         };
  49.         script.onerror = function () {
  50.             if (onerror && util.isFunction(onerror)) {
  51.                 onerror();
  52.             }
  53.         };
  54.         document.getElementsByTagName('head')[0].appendChild(script); //往html中增加这个标签，目的是把请求发送出去
  55.     };
  57. </script>

2、WebSocket

WebSocket的用法如下：

  1.     //
  3.     var ws = new WebSocket('wss://echo.websocket.org'); //创建WebSocket的对象。参数可以是 ws 或 wss，后者表示加密。
  5.     //把请求发出去
  6.     ws.onopen = function (evt) {
  7.         console.log('Connection open ...');
  8.         ws.send('Hello WebSockets!');
  9.     };
  12.     //对方发消息过来时，我接收
  13.     ws.onmessage = function (evt) {
  14.         console.log('Received Message: ', evt.data);
  15.         ws.close();
  16.     };
  18.     //关闭连接
  19.     ws.onclose = function (evt) {
  20.         console.log('Connection closed.');
  21.     };

Websocket的推荐链接：http://www.ruanyifeng.com/blog/2017/05/websocket.html

面试一般不会让你写这个代码，一般是考察你是否了解 WebSocket概念，知道有这么回事即可。

3、CORS

CORS 可以理解成是既可以同步、也可以异步的Ajax。

fetch 是一个比较新的API，用来实现CORS通信。用法如下：

  1.       // url（必选），options（可选）
  2.       fetch('/some/url/', {
  3.           method: 'get',
  4.       }).then(function (response) {  //类似于 ES6中的promise
  6.       }).catch(function (err) {
  7.         // 出错了，等价于 then 的第二个参数，但这样更好用更直观
  8.       });

推荐链接里有详细的配置。

另外，如果面试官问：“CORS为什么支持跨域的通信？”

答案：跨域时，浏览器会拦截Ajax请求，并在http头中加Origin。

4、Hash

url的#后面的内容就叫Hash。Hash的改变，页面不会刷新。这就是用 Hash 做跨域通信的基本原理。

补充：url的?后面的内容叫Search。Search的改变，会导致页面刷新，因此不能做跨域通信。

使用举例：

场景：我的页面 A 通过iframe或frame嵌入了跨域的页面 B。

现在，我这个A页面想给B页面发消息，怎么操作呢？

（1）首先，在我的A页面中：

  1.     //伪代码
  2.     var B = document.getElementsByTagName('iframe');
  3.     B.src = B.src + '#' + 'jsonString';  //我们可以把JS 对象，通过 JSON.stringify()方法转成 json字符串，发给 B

（2）然后，在B页面中：

  1.     // B中的伪代码
  2.     window.onhashchange = function () {  //通过onhashchange方法监听，url中的 hash 是否发生变化
  3.         var data = window.location.hash;
  4.     };

5、postMessage()方法

H5中新增的postMessage()方法，可以用来做跨域通信。既然是H5中新增的，那就一定要提到。

场景：窗口 A (http:A.com)向跨域的窗口 B (http:B.com)发送信息。步骤如下。

（1）在A窗口中操作如下：向B窗口发送数据：

  1.     // 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
  2.      Bwindow.postMessage('data', 'http://B.com'); //这里强调的是B窗口里的window对象

（2）在B窗口中操作如下：

  1.     // 在窗口B中监听 message 事件
  2.     Awindow.addEventListener('message', function (event) {   //这里强调的是A窗口里的window对象
  3.         console.log(event.origin);  //获取 ：url。这里指：http://A.com
  4.         console.log(event.source);  //获取：A window对象
  5.         console.log(event.data);    //获取传过来的数据
  6.     }, false);

我的公众号

想学习更多技能？不妨关注我的微信公众号：千古壹号（id：qianguyihao）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

06-跨域通信类 - 图3