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

JSONP详解

news 2025/8/22 0:58:40

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 代码，所以要确保信任数据源。

 

http://www.lryc.cn/news/461128.html

相关文章：

  • Leetcode—1115. 交替打印 FooBar【中等】（多线程）
  • Visual Studio Code基础：使用debugpy调试python程序
  • 超全！一文详解大型语言模型的11种微调方法
  • C 主要函数解析
  • vue3学习：数字时钟遇到的两个问题
  • 吴恩达深度学习笔记：卷积神经网络（Foundations of Convolutional Neural Networks）3.7-3.8
  • 【Linux】最基本的字符设备驱动
  • 利用 Llama 3.1模型 + Dify开源LLM应用开发平台，在你的Windows环境中搭建一套AI工作流
  • Docker常用命令分享二
  • 【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式？
  • [Java基础] 运算符
  • [001-02-018].第05节：数据类型及类型转换
  • Netty基础
  • 602，好友申请二：谁有最多的好友
  • 【Matlab算法MATLAB实现的音频信号时频分析与可视化（附MATLAB完整代码）
  • 界面耻辱纪念堂--可视元素03
  • 国产龙芯处理器选择迅为2K1000开发板有资料
  • MySQL 命令（持续更新）
  • Linux下Docker方式Jenkins安装和配置
  • 低代码框架参考
  • 2024 年 9 月区块链游戏研报：行业回暖，Telegram 游戏引发热潮
  • python爬虫登录校验之滑块验证、图形验证码（OCR）
  • （一）Python程序结构
  • 二叉树——相同的树
  • 探秘 1688 商品详情接口：高并发批量采集的实战攻略
  • 【C语言】sizeof
  • 2024-10-15 问AI: [AI面试题] 人工智能中使用了哪些不同的搜索算法？
  • 2024 年 04 月编程语言排行榜，PHP 排名创新低？
  • Element中el-table组件设置max-height右侧出现空白列的解决方法
  • unity学习-全局光照（GI）