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

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

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

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

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2026/2/1 21:17:19

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/30 10:10:55

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2026/2/7 11:25:15

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/1/20 19:15:45

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/29 3:55:23

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2026/1/31 8:53:50

智能职业发展系统：AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

编程新知 2025/9/26 10:15:18

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

编程新知 2026/2/5 5:58:30