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

JSONP详解

news 2025/7/4 22:50:33

JSONP（JSON with Padding）是一种非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过JavaScript callback的形式实现跨域访问。以下是对JSONP的详细解释：

一、JSONP的背景与原理

  1. 背景：

    • 由于浏览器的同源策略（Same Origin Policy），浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互，这包括共享和传递变量等。这就造成一些涉及到多个服务器的应用在整合时遇到麻烦，跨域访问的问题使得A站点无法访问B站点的数据。
    • 尽管浏览器不允许页面中的脚本程序跨域读取数据，但却允许HTML引用跨域的资源，如图片、CSS和脚本程序。对于脚本程序的引用比较特殊，它被浏览器解析以后，就和本地的脚本程序别无二致且可立即进行解释并执行。

  2. 原理：

    • JSONP利用<script>标签的src属性可以跨域引用文件的特点，通过动态创建<script>标签并设置其src属性为跨域资源的URL（通常包含callback参数），从而加载并执行服务器返回的JavaScript代码。
    • 服务器在返回数据时，会将JSON数据包装成一个函数调用，并将这个函数调用的名称设置为客户端传递的callback参数的值。
    • 当这段JavaScript代码被客户端的浏览器执行时，它会调用客户端预先定义好的回调函数，并将JSON数据作为参数传递给这个函数，从而实现了跨域数据的传输。

二、JSONP的使用

  1. 客户端注册回调函数：

    • 在客户端，首先需要注册一个回调函数，用于处理服务器返回的数据。

  2. 动态创建<script>标签：

    • 创建一个新的<script>标签，并设置其type属性为"text/javascript"。
    • 将<script>标签的src属性设置为跨域资源的URL，并在URL中附加callback参数，其值为客户端回调函数的名称。

  3. 服务器返回数据：

    • 服务器在接收到请求后，会解析出callback参数的值，并将JSON数据包装成一个以这个值为名称的函数调用。
    • 服务器将这段JavaScript代码作为响应返回给客户端。

  4. 客户端执行回调函数：

    • 当这段JavaScript代码被客户端的浏览器执行时，它会调用客户端预先定义好的回调函数，并将JSON数据作为参数传递给这个函数。
    • 客户端可以在回调函数中处理这些数据，如更新页面内容、发起新的请求等。

三、JSONP的优缺点

  1. 优点：

    • 兼容性较好：可用于解决主流浏览器的跨域数据访问问题。
    • 简单易用：通过动态创建<script>标签并设置src属性即可实现跨域请求。

  2. 缺点：

    • 仅支持GET请求：由于JSONP是通过<script>标签的src属性发起请求的，因此只能使用GET方法。
    • 安全性问题：JSONP可能会受到XSS攻击等安全威胁。因此，在使用JSONP时需要注意防范安全风险，如验证输入、限制callback参数的值等。

四、JSONP的应用场景

JSONP主要用于解决跨域数据访问的问题。在以下场景中，JSONP是一个可行的解决方案：

  • 前端需要与不同域的服务器进行通信，获取数据。
  • 跨域请求的数据量不大，且不需要使用POST等复杂请求方法。
  • 对安全性要求不是特别高，或者可以通过其他手段来保障安全性的场景。

综上所述，JSONP是一种简单而有效的跨域数据访问方式，但需要注意其安全性和使用限制。在实际应用中，应根据具体需求和场景来选择是否使用JSONP。

以下是JSONP相关的视频，提供了JSONP的概念、实现原理以及如何解决跨域问题的详细解释，可供参考:

五、案例

JSONP（JSON with Padding）是一种跨域请求数据的技术，它利用 <script> 标签的 src 属性来加载和执行一个 JavaScript 文件。这个 JavaScript 文件通常包含一个函数调用，并将数据作为参数传递给这个函数。

以下是一个简单的 JSONP 示例，演示如何从另一个域获取数据：

服务器端代码（假设使用 Node.js 和 Express）

首先，我们需要一个服务器来返回 JSONP 响应。这里我们使用 Node.js 和 Express 来创建一个简单的服务器。

const express = require('express');  
const app = express();  
const port = 3000;  app.get('/data', (req, res) => {  const callback = req.query.callback || 'callback';  const data = {  message: 'Hello, this is a JSONP response!',  timestamp: new Date().toISOString()  };  res.jsonp(data); // Express 的 jsonp 方法会自动处理 callback 参数  // 或者手动处理：  // res.send(`${callback}(${JSON.stringify(data)})`);  
});  app.listen(port, () => {  console.log(`Server is running at http://localhost:${port}`);  
});
客户端代码（HTML + JavaScript）

接下来，我们在客户端使用 JSONP 来请求数据。

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>JSONP Example</title>  
</head>  
<body>  <h1>JSONP Example</h1>  <div id="response"></div>  <script>  function handleResponse(data) {  const responseDiv = document.getElementById('response');  responseDiv.innerHTML = `<p>${data.message}</p><p>Timestamp: ${data.timestamp}</p>`;  }  // 创建一个 script 元素并设置其 src 属性  const script = document.createElement('script');  script.src = `http://localhost:3000/data?callback=handleResponse`;  // 将 script 元素添加到 DOM 中，这将触发请求  document.body.appendChild(script);  // 当服务器响应时，会执行 handleResponse 函数，并将数据作为参数传递给它  </script>  
</body>  
</html>
// 定义一个全局的回调函数，用于处理JSONP响应  
window.handleJsonpResponse = function(data) {  console.log('Received JSONP response:', data);  // 在这里处理你的数据  // 例如，更新页面上的某些元素  document.getElementById('response').innerText = JSON.stringify(data, null, 2);  
};  // 创建一个函数来发起JSONP请求  
function jsonpRequest(url, callbackName, params) {  // 如果没有提供回调函数名称，则使用默认名称  callbackName = callbackName || 'callback';  // 创建一个唯一的回调函数名称（在实际应用中，这可以防止潜在的冲突）  // 但为了简化示例，我们在这里不使用唯一名称  // 将参数转换为查询字符串格式  const queryString = Object.keys(params)  .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))  .join('&');  // 将回调函数名称添加到查询字符串中  if (queryString) {  queryString += `&${callbackName}=handleJsonpResponse`;  } else {  queryString = `${callbackName}=handleJsonpResponse`;  }  // 创建并配置一个新的<script>元素  const script = document.createElement('script');  script.src = url + (url.includes('?') ? '&' : '?') + queryString;  // 将<script>元素添加到DOM中，这会触发请求  document.body.appendChild(script);  // 可以在这里添加逻辑来在请求完成后移除<script>元素  // 但对于JSONP来说，这通常不是必需的，因为响应是一个自执行的函数  // 注意：由于JSONP的异步性质，我们不能在这里直接返回数据  // 相反，我们依赖于全局回调函数来处理数据  
}  // 使用jsonpRequest函数发起请求  
const jsonpUrl = 'http://example.com/data'; // 替换为实际的跨域URL  
const params = {  // 在这里添加任何你需要的请求参数  // 例如：id: 123, format: 'json'  
};  jsonpRequest(jsonpUrl, null, params); // 第二个参数为null，因为我们使用了默认的回调函数名称
运行步骤
  1. 启动 Node.js 服务器：保存服务器端代码到一个文件（例如 server.js），然后在终端中运行 node server.js。
  2. 打开客户端 HTML 文件：将客户端代码保存到一个 HTML 文件（例如 index.html），然后在浏览器中打开这个文件。

当 HTML 文件加载时，它会通过 JSONP 请求从服务器获取数据，并在页面上显示。

注意事项
  • JSONP 是一种比较老的跨域数据获取技术，现代应用通常使用 CORS（跨源资源共享）或 fetch API 来处理跨域请求。
  • JSONP 的安全性问题需要注意，因为它会执行从服务器返回的 JavaScript 代码，所以要确保信任数据源。

 

相关文章：

JSONP详解

JSONP&#xff08;JSON with Padding&#xff09;是一种非官方的协议&#xff0c;它允许在服务器端集成Script tags返回至客户端&#xff0c;通过JavaScript callback的形式实现跨域访问。以下是对JSONP的详细解释&#xff1a; 一、JSONP的背景与原理 背景&#xff1a; 由于浏…...

编程日记 2024/10/16 18:51:13

Leetcode—1115. 交替打印 FooBar【中等】（多线程）

2024每日刷题&#xff08;180&#xff09; Leetcode—1115. 交替打印 FooBar C实现代码 class FooBar { private:int n;sem_t fooSem;sem_t barSem;public:FooBar(int n) {this->n n;sem_init(&fooSem, 0, 1);sem_init(&barSem, 0, 0);}~FooBar() {sem_destroy(&…...

编程日记 2024/10/16 18:50:11

Visual Studio Code基础：使用debugpy调试python程序

相关阅读 VS codehttps://blog.csdn.net/weixin_45791458/category_12658212.html?spm1001.2014.3001.5482 一、安装调试器插件 在VS code中可以很轻松地调试Python程序&#xff0c;首先需要安装Python调试器插件&#xff0c;如图1所示。 图1 安装调试器插件 Python Debugge…...

编程日记 2024/10/16 18:46:06

超全！一文详解大型语言模型的11种微调方法

导读&#xff1a;大型预训练模型是一种在大规模语料库上预先训练的深度学习模型&#xff0c;它们可以通过在大量无标注数据上进行训练来学习通用语言表示&#xff0c;并在各种下游任务中进行微调和迁移。随着模型参数规模的扩大&#xff0c;微调和推理阶段的资源消耗也在增加。…...

编程日记 2024/10/16 18:43:03

C 主要函数解析

1、fseek 函数 int fseek(FILE *stream, long offset, int fromwhere); 第一个参数stream为文件指针 第二个参数offset为偏移量&#xff0c;正数表示正向偏移&#xff0c;负数表示负向偏移 第三个参数origin设定从文件的哪里开始偏移,可能取值为&#xff1a;SEEK_CUR、 SEE…...

编程日记 2024/10/16 18:42:01

vue3学习：数字时钟遇到的两个问题

在前端开发学习中&#xff0c;用JavaScript脚本写个数字时钟是很常见的案例&#xff0c;也没什么难度。今天有时间&#xff0c;于是就用Vue的方式来实现这个功能。原本以为是件非常容易的事&#xff0c;没想到却卡在两个问题上&#xff0c;一个问题通过别人的博文已经找到答案&…...

编程日记 2024/10/16 18:40:00

吴恩达深度学习笔记：卷积神经网络（Foundations of Convolutional Neural Networks）3.7-3.8

目录 第四门课 卷积神经网络&#xff08;Convolutional Neural Networks&#xff09;第三周 目标检测&#xff08;Object detection&#xff09;3.7 非极大值抑制&#xff08;Non-max suppression&#xff09;3.8 Anchor Boxes 第四门课 卷积神经网络&#xff08;Convolutional…...

编程日记 2024/10/16 18:38:58

【Linux】最基本的字符设备驱动

前面我们介绍到怎么编译出内核模块.ko文件&#xff0c;然后还加载了这个驱动模块。但是&#xff0c;那个驱动代码还不完善&#xff0c;驱动写好后怎么在应用层使用也没有介绍。 字符设备抽象 Linux内核中将字符设备抽象成一个具体的数据结构&#xff08;struct cdev&#xff…...

编程日记 2024/10/16 18:37:57

利用 Llama 3.1模型 + Dify开源LLM应用开发平台，在你的Windows环境中搭建一套AI工作流

文章目录 1. 什么是Ollama&#xff1f;2. 什么是Dify&#xff1f;3. 下载Ollama4. 安装Ollama5. Ollama Model library模型库6. 本地部署Llama 3.1模型7. 安装Docker Desktop8. 使用Docker-Compose部署Dify9. 注册Dify账号10. 集成本地部署的 Llama 3.1模型11. 集成智谱AI大模型…...

编程日记 2024/10/16 18:35:56

Docker常用命令分享二

docker的用户组管理过程&#xff1a; 1、sudo : 可以让普通用户临时获得root用户的权限&#xff0c;来新建docker用户组 2、普通用户并没有使用sudo的权限 3、先要让root用户把testing用户加入到sudoers的授权文件中 4、sudoers的文件居然是只读的&#xff0c;先解决这个问…...

编程日记 2024/10/16 18:34:55

【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式？

引言 受小程序camera组件预览和抽帧图像不一致的特性影响&#xff0c;一直未全功能支持全屏模式&#xff0c;详见本系列文件第四节小程序如何抽帧&#xff1b;随着插件在云上赛事、健身锻炼、AI体测、AR互动场景的深入应用&#xff0c;各开发者迫切的希望能在全屏模式下应用&am…...

编程日记 2024/10/16 18:32:52

[Java基础] 运算符

[Java基础] 基本数据类型 [Java基础] Java HashMap 的数据结构和底层原理 目录 算术运算符 比较运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 常见面试题 Java语言支持哪些类型的运算符&#xff1f; 请解释逻辑运算符&&和&的区别? 请解释条件运…...

编程日记 2024/10/16 18:28:46

[001-02-018].第05节：数据类型及类型转换

我的后端学习大纲 我的Java学习大纲 1、数据类型介绍&#xff1a; 1.0.计算机存储单位&#xff1a; 1.1.基本数据类型介绍&#xff1a; a.整型&#xff1a;byte、short、int、long 1.整型包括&#xff1a;byte、short、int、long&#xff0c;可如下图方式类比记忆&#xff1…...

编程日记 2024/10/16 18:25:43

Netty基础

Netty基础 一级目录I/O请求基础知识Netty如何实现自己的I/O模型 网络框架的选型 Netty整体架构Netty逻辑处理架构网络通信层事件调度层服务编排层 组件关系梳理Netty源码结构 netty是目前最流行的一款高性能java网络编程框架&#xff0c;广泛使用于中间件、直播、社交、游戏等领…...

编程日记 2024/10/16 18:19:36

602，好友申请二：谁有最多的好友

好友申请二&#xff1a;谁有最多的好友 实现 with tmp as (selectrequester_id idfrom RequestAcceptedunion allselectaccepter_id idfrom RequestAccepted )selectid,count(*) num from tmp group by id order by num desc limit 1;...

编程日记 2024/10/16 18:18:35

【Matlab算法MATLAB实现的音频信号时频分析与可视化（附MATLAB完整代码）

MATLAB实现的音频信号时频分析与可视化 前言正文：时频分析实现原理代码实现代码运行结果图及说明结果图：结果说明：总结前言 音频信号的时频分析是信号处理领域中的一个重要研究方向。它允许我们同时观察信号在时间和频率域的特性，为音频处理、语音识别、音乐分析等应用提供…...

编程日记 2024/10/16 18:14:31

界面耻辱纪念堂--可视元素03

更多的迹象表明&#xff0c;关于在程序里使用新的动态界面元素&#xff0c;微软的态度是不确定的&#xff0c;其中一个是仅仅需要对比一下Office97 里的“Coolbars”和“标准工具条”。Coolbar 按钮直到用户指针通过的时候才成为按钮&#xff08;否则是平的&#xff09;。 工具…...

编程日记 2024/10/16 18:13:31

国产龙芯处理器选择迅为2K1000开发板有资料

硬件配置国产龙芯处理器&#xff0c;双核64位系统&#xff0c;板载2G DDR3内存&#xff0c;流畅运行Busybox、Buildroot、Loognix、QT5.12 系统!接口全板载4路USB HOST、2路千兆以太网、2路UART、2路CAN总线、Mini PCIE、SATA固态盘接口、4G接口、GPS接口WIF1、蓝牙、Mini HDMI…...

编程日记 2024/10/16 18:12:29

MySQL 命令（持续更新）

将 MySQL 命令结果输出到文件中 通过 k8s MySQL pod 里的客户端连接到 MySQL 服务器 kubectl exec mysql-pod -- mysql -hx.x.x.x -uroot -proot -e SELECT * FROM db.table; > result.txt通过 k8s MySQL pod 的客户端连接 MySQL 服务器&#xff0c;直接进入到 MySQL 客户端…...

编程日记 2024/10/16 18:11:28

Linux下Docker方式Jenkins安装和配置

一、下载&安装 Jenkins官方Docker仓库地址&#xff1a;https://hub.docker.com/r/jenkins/jenkins 从官网上可以看到&#xff0c;当前最新的稳定版本是 jenkins/jenkins:lts-jdk17。建议下在新的&#xff0c;后面依赖下不来 所以&#xff0c;我们这里&#xff0c;执行doc…...

编程日记 2024/10/16 18:10:27

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/6/21 13:57:28

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/6/15 11:32:55

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/7/2 21:32:47

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/6/24 3:19:42

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/6/21 12:54:36

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/6/21 15:45:49

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

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

目录 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…...

编程新知 2025/7/4 16:38:45

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

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

编程新知 2025/6/15 14:34:31

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

编程新知 2025/6/21 12:51:52