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

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

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

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

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2026/1/29 2:57:56

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2026/1/22 9:24:47

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2026/1/26 8:42:13

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2026/1/24 22:16:24

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2026/1/1 23:11:45

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点（小球运动模拟）6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...

编程新知 2025/7/7 1:11:39

机器学习的数学基础：线性模型

线性模型 线性模型的基本形式为&#xff1a; f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法&#xff0c;得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...

编程新知 2025/10/2 9:07:50

WinUI3开发_使用mica效果

简介 Mica(云母)是Windows10/11上的一种现代化效果&#xff0c;是Windows10/11上所使用的Fluent Design(设计语言)里的一个效果&#xff0c;Windows10/11上所使用的Fluent Design皆旨在于打造一个人类、通用和真正感觉与 Windows 一样的设计。 WinUI3就是Windows10/11上的一个…...

编程新知 2026/1/29 4:41:49