【知识梳理】3.8通讯类

时间 2021-05-22

标签 javascript html java web ajax json segmentfault 后端 api 跨域栏目 JavaScript 繁體版

原文原文链接

1.同源策略及限制

源:协议（http://）、域名（www.example.com）、端口（80）javascript

同源策略限制从一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。html

目的：这是一个用于隔离潜在恶意文件的关键的安全机制。java

限制范围:web

Cookie、LocalStorage 和 IndexDB 没法读取；
DOM 没法得到；
AJAX 请求不能发送。

参考文档：浏览器同源政策及其规避方法ajax

能够跨域的三个标签：json

<img src="xxx.png">
<link href="xxx">
<script src="xxx">

三个标签的场景segmentfault

<img>，用于打点统计，统计网站多是其余域；
<link><script>，可使用CDN，CDN的也是其余域；
<script>，能够用于jsonp

2.先后端通讯

Ajax（仅支持同源通讯）
WebSocket（支持同源、跨域）
CORS（支持同源、跨域）

3.手动编写一个ajax

处理IE兼容性问题，

var xhr = XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');

readyState后端
- 0，（未初始化）尚未调用send()方法；
- 1，（载入）已经调用send()方法，正在发送请求；
- 2，（载入完成）send()方法执行完成，已经接收到所有相应内容；
- 3，（交互）正在解析响应内容；
- 4，（完成）响应内容解析完成，能够再客户端调用了。
statusapi
- 2**，表示成功处理请求，如200；
- 3**，须要重定向，浏览器直接跳转；
- 4**，客户端请求错误，如404；
- 5**，服务器端错误。

var xhr = new XMLHttpRequest();
xhr.open("GET","/api",false);
xhr.onreadystatechange = function(){
    //这里的函数异步执行
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            alert(xhr.responseText);
        }
    }
}
xhr.send(null);

4.建立Ajax

XMLHTTPRequest对象的工做流程
兼容性处理
事件的触发条件
事件的触发顺序

参考文档：聊聊Ajax那些事跨域

util.json = function (options) {
     var opt = {
         url: '',
         type: 'get',
         data: {},
         success: function () {},
         error: function () {},
     };
     util.extend(opt, options);
     if (opt.url) {
         var xhr = XMLHttpRequest
            ? new XMLHttpRequest()
            : new ActiveXObject('Microsoft.XMLHTTP');//1.声明对象，处理IE兼容性
         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('&');
             xhr.open(type, url.replace(/\?$/g, ''), true);//2.open，肯定XMLHttpRequest对象的发送方式（用的那个协议：GET/POST等）
             xhr.send();//3.发送请求
         }
         if (type === 'POST') {
             xhr.open(type, url, true);
             xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
             xhr.send(dataArr.join('&'));
         }
         xhr.onload = function () {//4.响应
             if (xhr.status === 200 || xhr.status === 304 ||xhr.status === 206) {//206适用于接收部分媒体资源，304利用本地缓存
                 var res;
                 if (opt.success && opt.success instanceof Function) {
                     res = xhr.responseText;
                     if (typeof res ==== 'string') {
                         res = JSON.parse(res);//转成JSON
                         opt.success.call(xhr, res);
                     }
                 }
             } else {
                 if (opt.error && opt.error instanceof Function) {
                     opt.error.call(xhr, res);
                 }
             }
         };
     }
 };

5.JSONP实现原理

<script>
//此处定义回调函数
window.callback = function(data){
    //这是咱们跨域获得的信息
    console.log(data);
}
</script>

<script src="http://www.baidu.com/api.js"></script>
<!-- 以上将返回 callback({x:100,y:200})，此处执行回调函数 -->

6.跨域通讯的几种方式

1.JSONP

原理：经过script标签的异步加载实现的；

//JSONP

//1.浏览器发送请求,告诉服务端callback的名称
<script src="http://www.abc.com/?data=name&callback=jsonp" charset="utf-8"></script>

//2.服务器响应下发script内容，callback的名称做为函数名返回
<script>
    jsonp({
        data:{
        
        }    
    })
</script>

//代码实现
 /**
  * [function 在页面中注入js脚本]
  */
 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;
 };
//本地须要有以callback的名称建立函数
 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

url地址中#后边的叫Hash,Hash变更页面不会刷新（Hash作跨域通讯的基本原理）；
url地址中?后边的叫search,search变更页面会刷新页面，因此search不能作跨域通讯。

// hash

      // 场景：当前页面 A 经过iframe或frame嵌入了跨域的页面 B，要给跨域的 B 发送消息

      // 在A中伪代码以下：
      var B = document.getElementsByTagName('iframe');
      B.src = B.src + '#' + 'data';//经过JSON.stringify()转成字符串'data'
      // 在B中的伪代码以下
      window.onhashchange = function () {
          var data = window.location.hash;
      };

3.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);//http://A.com
          console.log(event.source);//Awindow
          console.log(event.data);//data
      }, false);

4.WebSocket

// Websocket

    var ws = new WebSocket('wss://echo.websocket.org');//ws非加密，wss加密

    //发送消息onopen
      ws.onopen = function (evt) {
          console.log('Connection open ...');
          ws.send('Hello WebSockets!');
      };
    //接收消息onmessage
      ws.onmessage = function (evt) {
          console.log('Received Message: ', evt.data);
          ws.close();
      };
    //关闭链接
      ws.onclose = function (evt) {
          console.log('Connection closed.');
      };

参考文档：WebSocket 教程

5.CORS

新的通讯标准（经过新的API:fetch()实现CORS通讯）。能够理解为：支持跨域通讯的Ajax。当你在浏览器中发送一个ajax跨域请求时，浏览器会在http头中加入一个origin。若是只是一个普通的ajax，跨域时就会被浏览器拦截。

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

参考文档：跨域资源共享 CORS 详解

6.服务器端设置 http header

//注意：不一样后端语言的写法可能不同

//第二个参数填写容许跨域的域名城，不建议直接写"*"
response.setHeader("Access-Control-Allow-Origin","http://a.com,http://b.com");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.addHeader("Access-Control-Allow-Methods","GET,POST,PUT,DELETE,OPTIONS");


//接受跨域的cookie
response.setHeader("Access-Control-Allow-Credentials", "true");