当前位置：首页 > news >正文

Ajax进阶篇02---跨域与JSONP

news 文章来源：https://blog.csdn.net/battledao/article/details/123587333 2025/1/16 2:02:54

前言	❤️ 不管前方的路多么崎岖不平，只要走的方向正确，都比站在原地更接近幸福 ❤️

Ajax进阶篇02---跨域与JSONP

- 一、Ajax进阶篇02---跨域与JSONP
- - （1）同源策略
  - - 1.1 什么是同源
    - 1.2 什么是同源策略
  - （2）跨域
  - - 2.1 什么是跨域
    - 2.2 浏览器对跨域请求的拦截
    - 2.3 如何实现跨域数据请求
  - （3）JSONP
  - - 3.1 什么是JSONP
    - 3.2 JSONP的实现原理
    - 3.3 JSONP的缺点
    - 3.4 jQuery中的JSONP
    - 3.5 自定义参数及回调函数名称
    - 3.6 jQuery中JSONP的实现过程
  - （4）防抖
  - - 4.1 什么是防抖
    - 4.2 防抖的应用场景
  - （5）节流
  - - 5.1 什么是节流
    - 5.2 节流的应用场景
    - 5.3 节流阀的概念
    - 5.3 节流案例 – 鼠标跟随效果
  - （6）总结防抖和节流的区别
- 二、总结

一、Ajax进阶篇02—跨域与JSONP

（1）同源策略

1.1 什么是同源

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。

例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：

URL	是否同源	原因
http://www.test.com/other.html	是	同源（协议、域名、端口相同）
https://www.test.com/about.html	否	协议不同（http 与 https）
http://blog.test.com/movie.html	否	域名不同（www.test.com 与 blog.test.com）
http://www.test.com:7001/home.html	否	端口不同（默认的 80 端口与 7001 端口）
http://www.test.com:80/main.html	是	同源（协议、域名、端口相同）

1.2 什么是同源策略

1️⃣ 同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能；

2️⃣ MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制；

3️⃣ 通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB；
无法接触非同源网页的 DOM；
无法向非同源地址发送 Ajax 请求；

（2）跨域

2.1 什么是跨域

同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。

出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互；

2.2 浏览器对跨域请求的拦截

😆温馨提醒😆：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！

2.3 如何实现跨域数据请求

1️⃣ 现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP和 CORS；

2️⃣ JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求；

3️⃣ CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器；

（3）JSONP

3.1 什么是JSONP

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题

3.2 JSONP的实现原理

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

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

3.3 JSONP的缺点

由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。

😆温馨提醒😆：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest 这个对象。

3.4 jQuery中的JSONP

jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求，代码演示如下：

$.ajax({url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',// 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonpdataType: 'jsonp',success: function(res) {console.log(res)}
})

😆温馨提醒😆：默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称。

3.5 自定义参数及回调函数名称

在使用 jQuery 发起 JSONP 请求时，如果想要自定义 JSONP 的参数以及回调函数名称，可以通过如下两个参数来指定：

$.ajax({url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',dataType: 'jsonp',// 发送到服务端的参数名称，默认值为 callbackjsonp: 'callback',// 自定义的回调函数名称，默认值为 jQueryxxx 格式jsonpCallback: 'abc',success: function(res) {console.log(res)}
})

3.6 jQuery中JSONP的实现过程

jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除 <script> 标签的方式，来发起 JSONP 数据请求。

在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；
在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script>标签；

（4）防抖

4.1 什么是防抖

防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时；

4.2 防抖的应用场景

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；

实现输入框的防抖：

var timer = null;                    // 1. 防抖动的 timerfunction debounceSearch(keywords) { // 2. 定义防抖的函数timer = setTimeout(function() {// 发起 JSONP 请求getSuggestList(keywords)}, 500)
}$('#ipt').on('keyup', function() {  // 3. 在触发 keyup 事件时，立即清空 timerclearTimeout(timer)// ...省略其他代码debounceSearch(keywords)
})

（5）节流

5.1 什么是节流

节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率；

5.2 节流的应用场景

鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

5.3 节流阀的概念

1️⃣ 节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作；
2️⃣ 当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了；
3️⃣ 每次执行操作前，必须先判断节流阀是否为空；

5.3 节流案例 – 鼠标跟随效果

案例素材：
请添加图片描述
完整代码演示如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./lib/jquery.js"></script><style>/* CSS 样式 */html,body {margin: 0;padding: 0;overflow: hidden;}#angel {position: absolute;}</style>
</head><body><!-- UI 结构 --><img src="./angel.gif" alt="" id="angel" /><script>$(function () {// 1. 获取到图片var angel = $('#angel')// 步骤1. 定义节流阀var timer = null;// 2. 绑定 mousemove 事件$(document).on('mousemove', function (e) {// 步骤3：判断节流阀是否为空, 如果不为空, 则证明距离上次执行间隔不足16毫秒if (timer) { return }// 3. 设置图片的位置// 步骤2：开启延时器timer = setTimeout(function () {$(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px')console.log('ok')// 当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器timer = null}, 16)})})</script>
</body></html>

（6）总结防抖和节流的区别

防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效，前面 N 多次的触发都会被忽略；
节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件；

二、总结

😝 由于内容较多，所以我决定分开写啦，我会坚持一直更新呢！喜欢的朋友们记得点点赞哦！ 😝

Ajax进阶篇02---跨域与JSONP

前言❤️ 不管前方的路多么崎岖不平，只要走的方向正确，都比站在原地更接近幸福 ❤️Ajax进阶篇02---跨域与JSONP一、Ajax进阶篇02---跨域与JSONP（1）同源策略1.1 什么是同源1.2 什么是同源策略（2）跨域2.1 什…...

编程日记 2023/3/15 3:34:19

C 语言编程 — 线程池设计与实现

目录文章目录目录线程池（Thread Pool）tiny-threadpool数据结构设计Task / JobTask / Job QueueWorker / ThreadThread Pool ManagerPublic APIsPrivate Functions运行示例线程池（Thread Pool） 线程池（Thread Pool&am…...

编程日记 2023/3/15 3:24:10

并发编程要点

Java并发编程中的三大特性分别是原子性、可见性和有序性，它们分别靠以下机制实现： 原子性：原子性指的是对于一个操作，要么全部执行，要么全部不执行。Java提供了一些原子性操作，例如AtomicInteger等&#xf…...

编程日记 2023/3/15 3:19:09

HDFS黑名单退役服务器

黑名单：表示在黑名单的主机IP地址不可以，用来存储数据。企业中：配置黑名单，用来退役服务器。黑名单配置步骤如下： 1）编辑/opt/module/hadoop-3.1.3/etc/hadoop目录下的blacklist文件添加如下主机名称&…...

编程日记 2023/3/15 3:14:05

基于stm32智能语音电梯消毒系统

这次来分享个最近做的项目，stm32智能语音电梯消毒系统功能说明：在电梯，房间，客道区域内，检测到人，则执行相关动作！例如继电器开关灯，喷洒酒精等行为。手机app/微信小程序可以控制需要…...

编程日记 2023/3/15 3:09:04

FreeRTOS系列第1篇---为什么选择FreeRTOS？

1.为什么学习RTOS？ 作为基于ARM7、Cortex-M3硬件开发的嵌入式工程师，我一直反对使用RTOS。不仅因为不恰当的使用RTOS会给项目带来额外的稳定性风险，更重要的是我认为绝大多数基于ARM7、Cortex-M3硬件的项目，还没复杂到使用RTOS的地…...

编程日记 2023/3/15 3:04:01

基于.NET Core内置浏览器窗体应用程序界面框架

更多开源项目请查看：一个专注推荐.Net开源项目的榜单平常我们在做项目过程中，桌面软件具备操作高效、利用本地计算机做一些复杂运算、或者设定快捷操作等优势，但是桌面软件也有很多缺点，比如升级问题、系统兼容问题、系统bug排查…...

编程日记 2023/3/15 2:58:58

【数据结构初阶】一文带你学会归并排序（递归非递归）

目录前言递归实现代码实现非递归实现代码实现总结前言归并排序（Merge sort）是建立在归并操作上的一种有效的排序算法。该算法是采用分治法（Divide and Conquer）的一个非常典型的应用。作为一种典型的分而治之思想…...

编程日记 2023/3/15 2:53:57

Simulink壁咚(一)——What and How

目录一、前言二、Simulink 知多少三、滤波算法四、Model Verification 五、Model Coverage 六、Simulink测试实例七、Simulink Test 八、Test Manager 九、Test Harness 十、学习一、前言 Simulink从2017b以后更加工程化和实用化，基于MBD的功能日趋…...

编程日记 2023/3/15 2:48:52

【PyTorch】Pytorch基础第0章

本文参加新星计划人工智能(Pytorch)赛道：https://bbs.csdn.net/topics/613989052 这是目录PyTorch的简介PyTorch 构建深度学习模型的步骤搭建pytorch使用环境PyTorch的简介 PyTorch 是一个开源的机器学习框架，由 Facebook 的人工智能研究院（…...

编程日记 2023/3/15 2:43:51

Android学习总结

积累熟练掌握 Java 语言，面向对象分析设计能力，反射原理，自定义注解及泛型，多次采用设计模式重构公司项目；熟练掌握 IVM 原理，反射，动态代理以及对 ClassLoader 热修复有比较深的理解&#xff1…...

编程日记 2023/3/15 2:38:49

安装samba apt-get install samba 新建一个共享目录 mkdir /home/l/work chmod 777 /home/l/work 配置服务配置 /etc/samba/smb.confsudo smbpasswd -a l(添加用户名名称) 防火墙关闭 Ubuntu中我们使用命令查看当前防火墙状态; sudo ufw status inactive状态是防火墙关闭…...

编程日记 2023/3/15 2:33:48

开发板中的内存压力测试，你了解多少？

1. 测试目的内存压力测试的目的是评估开发板中的内存子系统性能和稳定性，以确保它能够满足特定的应用需求。开发板通常用于嵌入式系统、物联网设备、嵌入式智能家居等场景，这些场景对内存的要求通常比较高。其内存压力测试的主要目的有：1.对确…...

编程日记 2023/3/15 2:28:44

MATLAB | 这些花里胡哨的热图怎么画

好早之前写过一个绘制相关系数矩阵的代码，但是会自动求相关系数，而且画出来的热图只能是方形，这里写一款允许nan值出现，任意形状的热图绘制代码，绘制效果如下： 如遇到bug请后台提出，并去gitee下…...

编程日记 2023/3/15 2:23:41

Java开发的一些编码建议

1、无论是类、方法、字段、变量，尽可能的限制他们的作用范围，可以避免出现不必要的错误；同时虚拟机也能有更大的优化空间。 2、错误越早发现越好，编译时发生错误比在运行时发生错误好。而且编译时错误能更好的定位问题所在。这…...

编程日记 2023/3/15 2:18:40

【YOLOv8/YOLOv7/YOLOv5/YOLOv4/Faster-rcnn系列算法改进NO.59】引入ASPP模块

前言作为当前先进的深度学习目标检测算法YOLOv8，已经集合了大量的trick，但是还是有提高和改进的空间，针对具体应用场景下的检测难点，可以不同的改进方法。此后的系列文章，将重点对YOLOv8的如何改进进行详细的介绍&…...

编程日记 2023/3/15 2:13:39

C++STL set/multiset容器构造和赋值大小和交换插入和删除查找和统计

文章目录set/multiset容器1 set容器基本概念2 set容器构造和赋值3 set容器大小和交换4 set容器插入和删除5 set容器查找和统计set/multiset容器 1 set容器基本概念简介： 所有元素都会在插入时会被自动排序，例如，在set容器放入元素1、…...

编程日记 2023/3/15 2:08:36

产品研发项目进度管理软件工具有哪些推荐？整理10款最佳进度管理软件

项目进度管理是确保项目按时完成的关键过程，使用合适的项目进度管理工具能确保帮助项目管理者实时了解和控制项目的进展情况，及时发现和解决问题，减少项目风险，提高项目效率和管理水平。这里将整理出国内外最受欢迎的10款项目进度…...

编程日记 2023/3/15 2:03:34

「ML 实践篇」分类系统：图片数字识别

目的：使用 MNIST 数据集，建立数字图像识别模型，识别任意图像中的数字； 文章目录1. 数据准备（MNIST）2. 二元分类器（SGD）3. 性能测试1. 交叉验证2. 混淆矩阵3. 查准率与查全率4. P-R 曲…...

编程日记 2023/3/15 1:58:33

从大专到测开，上海某字母站大厂的面试题，岗位是测开(25K*16)

简单介绍一句，大专出身，三年经验。跳了四次槽，面试了无数次，现在把自己的面试经验整理出来分享给大家，堪称必杀技！ 1，一切从实际出发，对实际工作进行适当修饰 2，不会的简…...

编程日记 2023/3/15 1:53:29

【面试题】Python软件工程师能力评估试题（一）

文章目录前言应试者需知（一）Python 语言基础能力评估1、理解问题并完成代码：2、阅读理解代码，并在空白处补充完整代码：3、编写一个装饰器：exposer4、阅读代码并在空白处补充完整代码：5、自行用P…...

编程日记 2023/3/15 1:48:25

Java八股文（Java多线程面试题）

并行和并发的区别？（1）并行是指两个或者多个事件在同一时刻发生；而并发是指两个或多个事件在同一时间间隔发生；（2）并行是在不同实体上的多个事件，并发是在同一实体上的多个事件&#…...

编程日记 2023/3/15 1:43:23

小程序当前页面如何分享别的页面内容呢？

需求分析因为功能的需要分为两点他需要调转转发，并且有首页转发点击button按钮进行转发邀请好友帮忙助力，如何做到一个页面多种转发如何区分，是button转发还剩右上角三个点转发呢？ 通过onShareAppMessage()这个函数的事件…...

编程日记 2023/3/15 1:38:21

编写Java哪个编译器好

现在能够编写Java代码的工具简直不要太多，各种各样五花八门，但目前效率最高的还是Intellij Idea。但这个工具对于完全零基础的小白来说，第一次用起来是比较复杂的，因为它的功能太多了。这就好比你要学开车，如果上来就给…...

编程日记 2023/3/15 1:33:18

第十六章 Java为什么使用序列化

为何要指定serialVersionUID的值如果不指定显示serialVersionUID的值，jvm在序列化时会自动生成一个serialVersionUID，跟属性一起序列化，再进行持久化或者网络传输，在反序列化时，jvm会根据属性自动生成一个新版的serial…...

编程日记 2023/3/15 1:28:16

28岁小公司程序员，无车无房不敢结婚，要不要转行？

大家好，这里是程序员晚枫，又来分享程序员的职场故事了~ 今天分享的这位朋友叫小青，我认识他2年多了。以前从事的是土木行业，2年前找我咨询转行程序员的学习路线和职业规划后，通过自学加入了一家创业公司，成…...

编程日记 2023/3/15 1:23:14

出道即封神的ChatGPT，现在怎么样了？

从互联网的普及到智能手机，都让广袤的世界触手而及，如今身在浪潮中的我们，已深知其力。前阵子爆火的ChatGPT，不少人保持观望态度。现如今，国内关于ChatGPT的各大社群讨论，似乎沉寂了不少，现在怎…...

编程日记 2023/3/15 1:18:10

【计算机视觉】CNN 可视化算法

文章目录一、CAM算法1.1 概述1.2 CAM算法介绍二、Grad-CAM算法2.1 概述2.2 Guided Backpropagation2.3 Occlusion Sensitivity2.4 Grad-CAM 整体结构和效果2.5 Grad-CAM 实现细节一、CAM算法 1.1 概述本文介绍 2016 年提出的 CAM (Class Activation Mapping) 算法&#xff0…...

编程日记 2023/3/15 1:13:07