JSONP（JSON with Padding）是一种解决跨域问题的传统方案。它是一种利用 <script> 标签的 src 属性不受同源策略限制的特性，通过动态创建 <script> 标签，将数据以回调函数的方式返回到客户端的跨域解决方案。
JSONP 的基本思路是，在客户端定义一个全局函数，作为回调函数的名称。然后，客户端创建一个 <script> 标签，并将其 src 属性设置为一个跨域的 URL，该 URL 会在响应中返回一个 JavaScript 脚本，其中包含了调用客户端定义的回调函数的代码，并将需要返回的数据作为回调函数的参数传递回来。
服务器端在接收到请求后，会根据请求参数中的回调函数名称，生成一段调用该回调函数的 JavaScript 代码，并将需要返回的数据作为参数传递给该回调函数。然后，服务器将这段 JavaScript 代码返回给客户端。
客户端在接收到服务器返回的 JavaScript 代码后，会立即执行该代码。由于代码中是调用客户端定义的全局函数，因此可以成功接收到服务器返回的数据，从而实现了跨域请求。
需要注意的是，JSONP 只支持 GET 请求，不支持 POST、PUT 等其他类型的请求。此外，由于 JSONP 是通过动态创建 <script> 标签来实现跨域的，因此存在一定的安全风险，例如可能会被注入恶意脚本等。因此，在实际应用中，应该谨慎使用 JSONP，并尽量使用更安全的跨域解决方案，如 CORS。
案例
以下是一个简单的JSONP跨域实现案例：
假设我们有一个跨域的API接口，返回一些用户数据。由于同源策略的限制，我们无法直接通过JavaScript代码来获取这些数据。但我们可以使用JSONP来解决这个问题。
首先，我们在客户端定义一个全局函数handleData，作为回调函数的名称。该函数将接收到服务器返回的数据，并进行处理。
function handleData(data) {
console.log('Received data:', data);
// 处理接收到的数据
}
然后，我们创建一个<script>标签，并将其src属性设置为API接口的URL。在URL中，我们传递一个callback参数，其值为回调函数的名称handleData。
javascript复制代码
const script = document.createElement('script');
script.src = 'https://example.com/api?callback=handleData';
document.head.appendChild(script);
当服务器接收到这个请求后，会根据请求参数中的callback参数，生成一段调用handleData函数的JavaScript代码，并将需要返回的数据作为参数传递给该函数。然后，服务器将这段JavaScript代码返回给客户端。
假设服务器返回的数据如下：
json复制代码
{
"name": "John",
"age": 30,
"email": "john@example.com"
}
则服务器返回的JavaScript代码如下：
javascript复制代码
handleData({
"name": "John",
"age": 30,
"email": "john@example.com"
});
客户端在接收到服务器返回的JavaScript代码后，会立即执行该代码。由于代码中是调用客户端定义的全局函数handleData，因此可以成功接收到服务器返回的数据，从而实现了跨域请求。在本例中，handleData函数会将接收到的数据打印到控制台。
