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

这篇具有很好参考价值的文章主要介绍了【基础类】—前后端通信类系统性学习。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

  1. 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
  2. 源:协议、域名和端口, 默认端口是80
    三者有一个不同,即源不同,就是跨域
https://www.baidu.com:80/
https://www.baidu.com:8080
// 不同源
  1. 限制:不是一个源的文档,你没有权利去操作另一个源的文档,主要限制方面
    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);
                  }
              }
          };
      }
  };
  1. 兼容性处理
  2. 事件的触发条件
  3. 事件的触发顺序

四、跨域通信的几种方式

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>
  1. 代码实现步骤
    4-1 确定回调函数的名称
    4-2 根据名称注册全局函数
    4-3 动态创建scrpit标签
    4-4 监听脚本的加载事件
    4-5 监听加载是否成功,成功后,删除该script标签,同时删除全局函数
    4-6 往html里面新增script标签,发送请求

  2. 具体代码实现文章来源地址https://www.toymoban.com/news/detail-636796.html

  /**
   * [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 的第二个参数,但这样更好用更直观
      });

到了这里,关于【基础类】—前后端通信类系统性学习的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C/C++网络编程基础知识超详细讲解第一部分(系统性学习day11)

    目录 前言 一、网络的含义与构成 含义: 构成:  二、网络的体系结构 1OSI七层模型 2TCP/IP协议体系结构  3数据经过体系结构,怎么封装?  4端口号 5大小端序 6TCP/UDP传输层的协议  三、系统函数API学习框架(TCP)     服务器(优先):  客户端: 四、服务器和客户端代码实

    2024年02月08日
    浏览(50)
  • C/C++网络编程基础知识超详细讲解第三部分(系统性学习day13)

                                                        懒大王感谢大家的关注和三连支持~    目录 前言 一、并发服务器 1.进程并发服务器 实例代码如下:  2.线程并发服务器 实例代码如下:  二、域通信 域通信TCP实例代码如下:  三、广播与组播(UDP)  1.广播 实例代码

    2024年02月05日
    浏览(47)
  • 如何系统性的学习Python语言

    零基础同学的福音来了,如果你对Python语言的学习感兴趣,接下来可以由浅入深的了解下Python语言,哪怕你是零基础的小白也完全可以学会的,最后也会给大家放出学习和实例相结合的教程及方法,给到各位同学系统性的教学,最重要的是免费,可真谓是学生党们的福音呀。

    2024年02月10日
    浏览(45)
  • 系统性学习vue-组件及脚手架

    书接上文 Vue脚手架是Vue官方提供的标准化开发工具(开发平台) CLI: command line interface (命令行接口工具) 俗称脚手架 备注: 如果下载缓慢可以配置npm淘宝镜像: npm config set registry https://registry.npm.taobao.org Vue脚手架隐藏了所有webpack相关配置,弱项查看具体的webpack配置,请执行 vue ins

    2024年02月02日
    浏览(47)
  • 初识C语言——详细入门(系统性学习day4)

    目录 前言 一、C语言简单介绍、特点、基本构成 简单介绍: 特点: 基本构成: 二、认识C语言程序 标准格式: 简单C程序: 三、基本构成分类详细介绍    (1) (2)数据类型 计算机中常用存储单位 数据类型的取值范围 打印输入类型 (3)常量和变量 常量的分类:

    2024年02月08日
    浏览(37)
  • C/C++ 线程超详细讲解(系统性学习day10)

    目录 前言 一、线程基础 1.概念  2.一个进程中多个线程特征 2.1 线程共有资源 2.2 线程私有资源   3.线程相关的api函数  3.1 创建线程 创建线程实例代码如下:  需要特别注意的是: -lpthread和-pthread的区别 3.2 给线程函数传参   传参实例代码如下: 3.3 给线程收尸 收尸实例代码

    2024年02月08日
    浏览(36)
  • vim的使用介绍以及命令大全(系统性学习day3)

                                                                                        懒羊羊感谢大家的关注和三连支持~  目录 前言 一、vim的使用介绍 二、命令大全 1.命令模式 (1)复制(配合粘贴命令p使用) (2)剪切 (3)粘贴 (4)删除 (5)撤销/恢复  (

    2024年02月08日
    浏览(41)
  • C/C++进程超详细详解【中部分】(系统性学习day07)

    目录 前言 一、守护进程 1.概念 2.守护进程创建的原理(如图清晰可见)  3.守护进程的实现(代码块) 二、dup和dup2 1,复制文件描述符 2.文件描述符重定向 三、系统日志 1,打开日志 2,向日志中写消息 3,关闭日志 四,文件锁 1.概念 2,给整个文件上锁 实例代码如下: 

    2024年02月08日
    浏览(47)
  • C/C++进程超详细详解【上部分】(系统性学习day06)

    目录 前言 一、进程基础 1.进程概念 2.进程特征 3.进程状态(如图清晰可见) 4,进程的标识 实例代码如下: 5.进程的种类 实例shell脚本程序如下: 二、进程API 1.创建子进程 实例代码如下: 2.exec函数族  函数族讲解图如下所示: 实例代码如下所示:  3.结束进程 实例代码如下

    2024年02月08日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包