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

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

news 2025/9/12 6:10:18
前言❤️ 不管前方的路多么崎岖不平，只要走的方向正确，都比站在原地更接近幸福 ❤️

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 之间，进行资源的交互，例如：

  1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB；
  2. 无法接触非同源网页的 DOM；
  3. 无法向非同源地址发送 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 节流的应用场景

  1. 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
  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

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

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

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

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

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

并发编程要点

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

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

HDFS黑名单退役服务器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Simulink壁咚(一)——What and How

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

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

【PyTorch】Pytorch基础第0章

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

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

Android学习总结

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

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

虚拟机ubuntu安装samba服务

安装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. 测试目的内存压力测试的目的是评估开发板中的内存子系统性能和稳定性&#xff0c;以确保它能够满足特定的应用需求。开发板通常用于嵌入式系统、物联网设备、嵌入式智能家居等场景&#xff0c;这些场景对内存的要求通常比较高。其内存压力测试的主要目的有&#xff1a;1.对确…...

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

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

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

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

Java开发的一些编码建议

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

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

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

前言作为当前先进的深度学习目标检测算法YOLOv8&#xff0c;已经集合了大量的trick&#xff0c;但是还是有提高和改进的空间&#xff0c;针对具体应用场景下的检测难点&#xff0c;可以不同的改进方法。此后的系列文章&#xff0c;将重点对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容器 基本概念 简介&#xff1a; 所有元素都会在插入时会被自动排序&#xff0c;例如&#xff0c;在set容器放入元素1、…...

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

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

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

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

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

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

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

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

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

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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/9/11 16:48:32

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/9/8 0:05:02

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/25 10:29:46

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/9/11 12:55:04

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/9/10 3:57:22

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/7/23 16:26:20

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/7/9 6:14:15

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/9/6 5:58:09

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2025/9/4 15:27:33