Ajax:跨域 JSONP

Ajax:跨域 & JSONP

    • 同源与跨域
      • 同源
      • 跨域
    • JSONP
      • jQuery发送JSONP


同源与跨域

同源

如果两个页面的协议、域名、端口号都相同,则两个页面同源

例如:

http://www.test.com/index.html

与其同源的网页:

http://www.test.com/other.html
http://www.test.com:80/other.html

注意,如果一个网址没有写:端口号,说明默认端口号为80

不同源的网页:

http://blog.test.com/other.html      // 域名不同
http://www.test.com:8888/other.html  // 端口不同
https://www.test.com/other.html      // 协议不同

注意,httphttps不是一个协议。

同源策略是浏览器提供的一个安全功能,同源策略限制了从同一个源加载的文档或脚本与另一个源的资源交互,这样可以隔离潜在的恶意文件。

JavaScript就是一种脚本,受到同源策略限制,简单来说就是A网站的JavaScript无法与B网站进行交互。

  1. 无法读取非同源页面的cookielocalStorage
  2. 无法接触非同源页面的DOM
  3. 无法向非同源地址发送Ajax请求

跨域

如果两个页面的协议、域名、端口号有任何一项不同,则两个页面跨域

也就是说,同源的对立面就是跨域。

基于同源策略,浏览器会对跨域请求进行拦截,如下图:

在这里插入图片描述

浏览器允许用户通过Ajax向跨域的地址发起请求,但是当响应到达浏览器,基于同源策略检测到响应跨域了,那么就会进行拦截,Ajax收不到响应。

为了实现跨域请求,有JSONPCORS两种解决方案。

  • JSONP:兼容性好,兼容低版本IE,只支持GET请求,不支持POST
  • CORS:是跨域请求的根本解决方案,支持GETPOST请求,但是不兼容低版本浏览器

JSONP

JSONP全称Json with Padding,是一种json的使用模式,可以解决主流浏览器的跨域问题。

由于浏览器同源策略的限制,网页中无法通过阿贾克斯请求非同源的接口数据。但是<script>标签不受浏览器同源策略的影响,可以通过src属性,请求非同源的js脚本。

JSONP 的实现原理,就是通过 <script>标签的 src属性,请求跨域的数据接口,并通过函数调用的形式接收跨域接口响应回来的数据。

<script>function test(data) {console.log(data)}
</script><script>test({ name: '张三', age: 20 })
</script>

以上代码中,定义了两个<script>标签,第一个标签内部实现了test方法,第二个标签内调用了这个方法。由于所有的 <script> 标签共享全局作用域,这是合法的。

假设现在把这个调用的方法放到另一个js文件中./js/test.js

test({ name: 'ls', age: 30 })

./js/test.js文件中,直接调用test方法。

这样可以通过<script src=''>进行引入:

<script>function test(data) {console.log(data)}
</script><script src="./js/test.js"></script>

这样,当前页面的test方法,就可以被./js/test.js这个文件进行调用。

基于这个策略,可以实现两个服务器之间的JavaScript脚本互相配合,如果想要告诉调用方法的服务器,自己有哪些函数可以调用,可以通过?callback=的方式传递参数:

<script src="./js/test.js?callback=test"></script>

这就是JSONP解决跨域的原理。

测试:

$.ajax({method: 'GET',url: 'file://D:\code_web\blog\test\test.js',success: function (res) {console.log(res)}
})  

以上代码在test.html中,向file://D:\code_web\blog\test\test.js发起请求,这是一个本地文件路径。为了用户安全考虑,浏览器不允许Ajax直接访问用户主机上的内容,这是基于同源策略实现的。

报错:

在这里插入图片描述

其中Cross origin requests表示这是一个跨域请求。

<script>function test(data) {console.log(data)}
</script><script src="file://D:\code_web\blog\test\test.js?callback=test"></script>

同样的情况,把test函数定义在test.html中,通过src=属性选择同一主机下的test.js文件。

在这里插入图片描述

这次请求成功了,可以看到其发送了一个GET请求,去请求file://D:\code_web\blog\test\test.js这个文件,请求成功后,下方的控制台调用函数,并输出调用结果。

要注意的是,平常要通过<script>引入本地js文件,直接src="路径"就可以了,无需file://这样的协议前缀,这里只是为了测试跨域问题。

可以看出<script>可以实现跨域请求,这也是JSONP实现跨域的方式。


jQuery发送JSONP

使用jQuery发送JSONP请求非常简单,增加一个dataType属性即可:

$(function () {$.ajax({url: 'https://jsonplaceholder.typicode.com/posts?id=1',dataType: 'jsonp',success: function (res) {console.log(res)}})
})

如果要发送JSONP请求,填入dataType: 'jsonp',由于JSONP只能使用get,所以也不再需要指定请求的方法为get

在这里插入图片描述

发送出去的请求,多出来一个callback=jQuery....参数。这是由jQuery自动生成的,如果通过jQuery发送JSONP请求,其会携带一个callback=jQuery....参数,jQuery....是随机生成的回调函数名称。

jQuery允许用户自己指定这个回调函数的参数:

$.ajax({url: 'https://jsonplaceholder.typicode.com/posts?id=1',dataType: 'jsonp',jsonp: 'call',jsonpCallback: 'test',success: function (res) {console.log(res)}
})
  • jsonp:指定回调函数的key
  • jsonpCallback:指定回调函数的value

在这里插入图片描述

此时回调函数就变成了call=test,这可以方便后端进行解析。但是一般不会去指定jsonp,直接用默认的callback即可,更多时候只指定回调函数的函数名。

jQuery也是通过<script>标签的src属性实现的跨域访问,但是jQuery会动态创建和移除<script>标签。在发起请求时创建一个<script>,在请求成功后,再移除刚才创建的标签。


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

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

相关文章

MySql中表的复合查询

复合查询 ​ 本篇开始将介绍在MySql中进行复合查询的操作。平时在开发过程中只对一张表进行查询的操作是远远不够的&#xff0c;更多的都是多张表一起查询&#xff0c;所以本篇将介绍多张表中的复合查询&#xff0c;主要介绍多表查询、自连接以及子查询。 文章目录 复合查询导…

Discourse 是否可以简化文本操作

当下的文本处理很多都在慢慢转换到 MD。 有一段时间&#xff0c;论坛都会使用默认的 BBCode&#xff0c;包括 Discuz 现在也是这样的。 MD 文件有一定的入门使用门槛&#xff0c;但习惯了还好。 我们这里用得最多的就是标题和图片&#xff0c;其他的排版用得比较少&#xff…

如何找到适合的工程管理系统?9款对比

本文推荐的9款精选工程项目综合管理系统有: 1. Worktile&#xff1b;2. 广联达&#xff1b;3. 斯维尔&#xff1b;4. 品茗工程管理软件&#xff1b;5. 明源云&#xff1b;6. 泛微OA&#xff1b;7. Microsoft Project&#xff1b;8. Procore&#xff1b;9. Buildertrend。 在管理…

安卓在windows连不上fastboot问题记录

fastboot在windows连不上fastboot 前提是android studio安装 google usb driver 搜索设备管理器 插拔几次找安卓设备 在其他设备 或者串行总线设备会出现安卓 右键更新驱动 下一步下一步然后可以了

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-24

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-24 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-24目录1. Optimizing Preference Alignment with Differentiable NDCG Ranking摘要研究背景问题与挑战如何解决创新点算法模型算…

Linux基础知识作业

关卡任务 任务描述闯关任务完成SSH连接与端口映射并运行hello_world.py可选任务 1将Linux基础命令在开发机上完成一遍可选任务 2使用 VSCODE 远程连接开发机并创建一个conda环境可选任务 3创建并运行test.sh文件

【STM32】单片机ADC原理详解及应用编程

本篇文章主要详细讲述单片机的ADC原理和编程应用&#xff0c;希望我的分享对你有所帮助&#xff01; 目录 一、STM32ADC概述 1、ADC&#xff08;Analog-to-Digital Converter&#xff0c;模数转换器&#xff09; 2、STM32工作原理 二、STM32ADC编程实战 &#xff08;一&am…

vue文件转AST,并恢复成vue文件(适用于antdv版本升级)

vue文件转AST&#xff0c;并恢复成vue文件---antdvV3升级V4 vue文件转AST&#xff0c;重新转回原文件过程如何获取项目路径读取项目文件&#xff0c;判断文件类型分别获取vue文件 template js&#xff08;vue2和vue3&#xff09;处理vue 文件template部分处理vue script部分uti…

<<机器学习实战>>15-26节笔记:逻辑回归参数估计、梯度下降及优化、模型评价指标

梯度下降缺点&#xff1a;有可能有鞍点&#xff08;如果不是凸函数的时候&#xff09;&#xff0c;不一定能找到最小值解决方法&#xff1a;随机梯度下降&#xff08;选一条数据&#xff09;和小批量梯度下降&#xff08;选几条数据这两个解决方法又会带来新问题&#xff0c;比…

机器视觉-相机、镜头、光源(总结)

目录 1、机器视觉光源概述 2、光源的作用 3、光谱 4、工业场景常见光源 4.1、白炽灯 4.2、卤素灯 4.3、 荧光灯 4.4、LED灯 4.5、激光灯 5、光源的基本性能 5.1、光通量 5.2、光效率 5.3、发光强度 5.4、光照度 5.5、均匀性 5.6、色温 5.7、显色性 6、基本光学…

2024年信息化管理与计算技术研讨会 (ICIMCT 2024)--分会场

目录 重要信息 大会简介 荣誉主席 主讲嘉宾 征稿主题 会议日程 参会方式 重要信息 大会时间&#xff1a;2024年11月15-17日 大会地点&#xff1a;中国-成都 大会官网&#xff1a; http://www.icbar.net/ 大会简介 2024年信息化管理与计算技术研讨会 (ICIMCT 2024)为…

JAVA基础:集合 (学习笔记)

集合 什么是集合&#xff1f; 一种引用数据类型&#xff0c;可以存储多个数据 为什么要学习集合&#xff1f; 数组的缺点&#xff1a; &#xff08;1&#xff09;空间长度不可以改变。 &#xff08;2&#xff09;没办法获得数组中真实的元素个数。 &#xff08;3&#xff…

【Android】perfetto使用学习

在开发者选项中的系统跟踪里抓取的perfetto文件是保存在/data/local/traces 里的 adb pull /data/local/traces ./ 主线程中的执行是受vsync信号控制的&#xff0c;即间隔调用的 如果写一个while线程&#xff0c;一直使用cpu&#xff0c;是怎样的呢&#xff0c;这里我们来试验一…

asp.net core 入口 验证token,但有的接口要跳过验证

asp.net core 入口 验证token,但有的接口要跳过验证 在ASP.NET Core中&#xff0c;你可以使用中间件来验证token&#xff0c;并为特定的接口创建一个属性来标记是否跳过验证。以下是一个简化的例子&#xff1a; 创建一个自定义属性来标记是否跳过验证&#xff1a; public clas…

【算法】递归系列:206.反转链表(两种递归实现)

目录 1、题目链接 2、题目介绍 3、解法 递归法&#xff08;从前往后递归&#xff09; 从后往前递归 4、代码 递归法&#xff08;从前往后递归&#xff09; 从后往前递归 1、题目链接 206.反转链表 2、题目介绍 3、解法 递归法&#xff08;从前往后递归&#xff09; 递归…

OpenIPC开源FPV之Ardupilot配置

OpenIPC开源FPV之Ardupilot配置 1. 源由2. 问题3. 分析3.1 MAVLINK_MSG_ID_RAW_IMU3.2 MAVLINK_MSG_ID_SYS_STATUS3.3 MAVLINK_MSG_ID_BATTERY_STATUS3.4 MAVLINK_MSG_ID_RC_CHANNELS_RAW3.5 MAVLINK_MSG_ID_GPS_RAW_INT3.6 MAVLINK_MSG_ID_VFR_HUD3.7 MAVLINK_MSG_ID_GLOBAL_P…

基于rk356x u-boot版本功能分析及编译相关(二)

🎏技术驱动源于热爱,祝各位学有所成。 文章目录 build.sh脚本分析make.sh编译脚本分析接上,rk3568的u-boot编译在 基于rk356x u-boot版本功能分析及编译相关(一)已有描述,下面针对编译脚本进行分析,在编译之前都进行了哪些工作。 build.sh脚本分析 在编译目录下执行…

二叉树与堆的实现

一 . 概念与结构 在树的概念与结构中树的概念与结构-CSDN博客&#xff0c; 我们发现子结点可以为 0 或者是更多 &#xff0c; 结构较为复杂 &#xff0c; 然后把树的结点个数 加个限制条件 --> 不能超过 2 --> 我们引出了二叉树&#xff0c;在实际运用广 且高效 &#xf…

springboot-springboot官方文档架构

spring官网 >project&#xff1a;spring项目列表&#xff0c;包含了spring一系列框架的List >springboot(也可以换成其他框架)&#xff1a;springboot框架 >learn:显示这个框架的各个版本的reference doc和api doc >某版本的reference doc © 著作权归作者所有…

提示工程(Prompt Engineering)指南(进阶篇)

在 Prompt Engineering 的进阶阶段&#xff0c;我们着重关注提示的结构化、复杂任务的分解、反馈循环以及模型的高级特性利用。随着生成式 AI 技术的快速发展&#xff0c;Prompt Engineering 已经从基础的单一指令优化转向了更具系统性的设计思维&#xff0c;并应用于多轮对话、…