JSONP详解-CSDN博客

本文链接：https://blog.csdn.net/m0_55049655/article/details/142964456

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

一、JSONP的背景与原理

背景：
- 由于浏览器的同源策略（Same Origin Policy），浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互，这包括共享和传递变量等。这就造成一些涉及到多个服务器的应用在整合时遇到麻烦，跨域访问的问题使得A站点无法访问B站点的数据。
- 尽管浏览器不允许页面中的脚本程序跨域读取数据，但却允许HTML引用跨域的资源，如图片、CSS和脚本程序。对于脚本程序的引用比较特殊，它被浏览器解析以后，就和本地的脚本程序别无二致且可立即进行解释并执行。
原理：
- JSONP利用<script>标签的src属性可以跨域引用文件的特点，通过动态创建<script>标签并设置其src属性为跨域资源的URL（通常包含callback参数），从而加载并执行服务器返回的JavaScript代码。
- 服务器在返回数据时，会将JSON数据包装成一个函数调用，并将这个函数调用的名称设置为客户端传递的callback参数的值。
- 当这段JavaScript代码被客户端的浏览器执行时，它会调用客户端预先定义好的回调函数，并将JSON数据作为参数传递给这个函数，从而实现了跨域数据的传输。

二、JSONP的使用

客户端注册回调函数：
- 在客户端，首先需要注册一个回调函数，用于处理服务器返回的数据。
动态创建<script>标签：
- 创建一个新的<script>标签，并设置其type属性为"text/javascript"。
- 将<script>标签的src属性设置为跨域资源的URL，并在URL中附加callback参数，其值为客户端回调函数的名称。
服务器返回数据：
- 服务器在接收到请求后，会解析出callback参数的值，并将JSON数据包装成一个以这个值为名称的函数调用。
- 服务器将这段JavaScript代码作为响应返回给客户端。
客户端执行回调函数：
- 当这段JavaScript代码被客户端的浏览器执行时，它会调用客户端预先定义好的回调函数，并将JSON数据作为参数传递给这个函数。
- 客户端可以在回调函数中处理这些数据，如更新页面内容、发起新的请求等。

三、JSONP的优缺点

优点：
- 兼容性较好：可用于解决主流浏览器的跨域数据访问问题。
- 简单易用：通过动态创建<script>标签并设置src属性即可实现跨域请求。
缺点：
- 仅支持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，因为我们使用了默认的回调函数名称