JSONP（JSON with Padding）是一种跨域数据请求方式，它利用了 HTML <script> 标签没有跨域限制的特性来实现跨域数据请求。虽然 JSONP 已经被 CORS 所替代，但在一些特定场景下仍然有其用武之地。
JSONP 的原理
JSONP 的原理其实很简单，就是利用 script 标签的跨域特性来加载一个远程脚本，该脚本返回一个函数调用，函数的参数就是需要传递的数据。这样就实现了跨域数据请求。
JSONP 的使用步骤
- 创建一个 script 标签
- 设置 script 标签的 src 属性为目标 API 地址，并在 URL 中指定一个回调函数名
- 在全局范围内定义一个与回调函数名相同的函数，该函数的参数就是需要处理的数据
- 当 script 标签加载完毕后，会自动执行定义的回调函数，从而获取到数据
JSONP 示例代码
// www.javascriptcn.com code example
<!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>JSONP Example</title>
</head>
<body>
<script>
function handleData(data) {
console.log(data);
}
const apiUrl = 'https://api.example.com/data?callback=handleData';
const script = document.createElement('script');
script.src = apiUrl;
document.body.appendChild(script);
</script>
</body>
</html>在上面的示例代码中，我们创建了一个名为 handleData 的全局函数来处理返回的数据，并通过设置 script 标签的 src 属性来加载远程数据。
这就是 JSONP 的基本用法，通过这种方式可以实现跨域数据请求，但需要注意的是 JSONP 存在一些安全风险，因为它是通过动态加载脚本来实现的，可能会被注入恶意代码。因此在使用 JSONP 时要注意数据的安全性。