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

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

  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) {// ①声明对象,兼容IEvar 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. 具体代码实现

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/35820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Stable Diffusion+Temporal-kit 半虚半实应用

1.先下载temporal-kit,重启webui 2.下载好ffmpeg,配置好环境,下载Ebsynth 3.准备好你需要的视频,拖到预处理视频位置 4.填写参数,点解保存设置,然后并点击生成,会生成到目标文件夹的input位置 5.然后拉出input文件夹里面你想切换成处理的帧图片,然后填写prompt查看效…

中国省级、城市-数字经济创新创业、分项指数(2010-2020年)

一、数据介绍 数据名称&#xff1a;中国省级、城市-数字经济创新创业、分项指数 数据年份&#xff1a;2010-2020年 数据范围&#xff1a;31省、336个城市 数据来源&#xff1a;北大企业大数据研究中心 二、参考文献 参考文献&#xff1a; 戴若尘,王艾昭,陈斌开.中国数字…

Win10使用Guest和空密码访问共享的完整步骤

目录 前言 启动Guest 给予Guest网络权限 允许空密码登陆 启用不安全的来并登陆 总结 前言 我们经常需要使用空密码和guest账户访问Windows共享&#xff0c;因为某些设备不支持输入密码等&#xff0c;那么该如何设置呢&#xff0c;因为步骤比较固定而且繁琐&#xff0c;于…

Python小白入门:文件、异常处理和json格式存储数据

这里写自定义目录标题 所用资料 一、从文件中读取数据1.1 读取整个文件1.2 文件路径1.3 逐行读取1.4 创建一个包含文件各行内容的列表1.5 使用文件的内容1.6 包含一百万位的大型文件1.7 圆周率值中包含你的生日吗练习题 二、写入文件2.1 写入空文件2.2 写入多行2.3 附加到文件练…

Maven 生成(打包)带有依赖的可以直接执行的一个 jar 包

在pom中增加如下内容 <build><plugins><plugin><artifactId>maven-assembly-plugin</artifactId><configuration><archive><manifest><mainClass>com.example.xxx.YourClass</mainClass></manifest></…

酷开系统丨酷开会员,带你解锁K歌新姿势

不管时代怎么变化&#xff0c;K歌这项娱乐活动始终深受人们的喜爱。不知道你有没有遇到过这种情况&#xff1a;周末在家宅了一天&#xff0c;突然心血来潮想去KTV唱歌&#xff0c;但奈何外面过于闷热实在不想出门&#xff0c;可在手机上唱歌又不过瘾&#xff0c;让人很是苦恼……

tomcat入门介绍

tomcat官网下载8.5.9版本&#xff0c;官网地址&#xff1a;https://tomcat.apache.org/download-80.cgi 下载完成后直接解压即可 tomcat目录 解压后&#xff0c;可以看到tomcat有以下目录 /bin - 启动、关闭和其他脚本 *.sh后缀是linux下的脚本文件*.bat后缀windows系统下的…

绘画AI工具的介绍与使用----强到离谱-2023年必备免费好用的AI工具

一.绘画AI www.seaart.ai 这个是网站地址&#xff0c;进去之后直接注册登录即可&#xff0c;几乎都是免费使用&#xff0c;不用担心是否要VIP 点击网站进入之后登录&#xff0c;然后进入主页面&#xff0c;一张图片给你介绍清楚主页 我会根据菜单栏来给大家演示&#xff0c;首…

web会话跟踪以及JWT响应拦截机制

目录 JWT 会话跟踪 token 响应拦截器 http是无状态的&#xff0c;登录成功后&#xff0c;客户端就与服务器断开连接&#xff0c;之后再向后端发送请求时&#xff0c;后端需要知道前端是哪个用户在进行操作。 JWT Json web token (JWT), 是为了在网络应用环境间传递声明而…

Unity特效总览

一、粒子 Unity中的粒子组件叫做Particle System。 粒子系统顾名思义&#xff0c;与“微粒”有关。粒子系统会生成和发射很多粒子&#xff0c;通过控制粒子的生成数量、大小、角度、速度、贴图和颜色等众多属性&#xff0c;可以实现或真实或炫酷的各种效果。其中&#xff0c;…

leetcode做题笔记76最小覆盖子串

给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 "" 。 注意&#xff1a; 对于 t 中重复字符&#xff0c;我们寻找的子字符串中该字符数量必须不少于 t 中该字符数量。如果…

【Unity】VS Code 没有智能提示 Unity 中的类

正常来说&#xff0c;VS Code中会对部分输入类名进行提示&#xff0c;如下图所述 假如你从Unity 中进入 VS Code后发现没有提示相关 Unity的类&#xff0c;可能是 Unity 中 有关于 VS Code的相关Package 没有跟着 VS Code升级到最新版本。 点击Unity Windows 下拉框中的 Pac…

如何在电力行业运用IPD?

电力行业是国民经济众多垄断行业中较早实施改革的行业之一。近几年我国电力行业保持着较快的发展速度&#xff0c;也取得了很大的成绩&#xff0c;发电机容量和发电量居世界首位。2015-2020年&#xff0c;全国发电量不断攀升。 电力是以电能作为动力的能源。电力的发现和应用掀…

简绘ChatGPT支持Midjourney绘图 支持stable diffusion绘图

简绘支持Midjourney绘图和stable diffusion绘图。 这意味着简绘具备Midjourney绘图和stable diffusion绘图功能的支持。

生信豆芽菜-单基因表达比较

网址&#xff1a;http://www.sxdyc.com/panCancerExpCom 该工具主要用于查看单基因在泛癌的癌组织和癌旁组织中表达比较&#xff0c;可以只选择TCGA数据库&#xff0c;也可以选择TCGAGTEx数据库&#xff08;GTEx数据库&#xff0c;存放了正常组织全基因的表达谱&#xff09; …

人类智能的三个基本要素

人类智能的三个基本要素包括&#xff1a;适应性、灵活性和从稀疏观察中做出一般推断的能力。这些要素使得智能系统能够适应不同的环境和任务&#xff0c;处理多样性和复杂性&#xff0c;并从有限的信息中进行学习和推理&#xff0c;对于构建更强大和智能的人工智能系统至关重要…

ERROR: While executing gem ... (Gem::FilePermissionError)

sudo gem install -n /usr/local/bin cocoapodsERROR: While executing gem ... (Gem::FilePermissionError)You dont have write permissions for the /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/gems/2.6.0 directory.解决办法&#xff1a; 1.删…

limereport报表使用

在这里我使用报表是以报表的形式显示数据库的信息。所以首先需要准备的资料有&#xff1a;limereport源码&#xff0c;还有数据库&#xff0c;我这里使用的是qsqlite数据库。 1、下载limereport报表源码 2、运行自带的案例&#xff1a;demo_r1 3、点击 “Run Report Designer”…

【Spring专题】手写简易Spring容器过程分析——引导篇

目录 前言说在前面阅读准备 思路整理手写源码示例一、手写前的准备1.1 注解1.2 测试Bean1.3 调用实例 二、构造方法&#xff08;构建基本流程&#xff09;三、实现scan()方法3.1 doGetScanPackage()&#xff1a;获取扫描路径3.2 doLoadClassFromDiskAndScan()&#xff1a;从电脑…

HTML大于号、小于号、空格、引号等常用的转义代码写法

在这里插入代码片HTML 原始码 显示结果 描述 < < 小於号或显示标记 > > 大於号或显示标记 &amp; & 可用於显示其它特殊字符 &quot; " 引号 &reg; 己注册 © © 版权 &trade; ™ 商标 &ensp; 半…