在现代 Web 应用程序的开发中,由于跨域访问的限制,经常需要在不同的域之间传输 JSON 数据。但是,浏览器强制遵循同源策略,限制了浏览器从一个域向另一个域请求数据的能力。为此,我们可以使用 JSONP(JSON with Padding)技术,它通过动态创建 script 标签实现了跨域传输 JSON 数据。
JSONP 实现了一个简单但非正式的协议,在客户端发出一个 GET 请求时,服务端返回一些 JavaScript 代码,使客户端能够利用这些代码执行回调。JSONP 非常适合用于构建跨域的 JSON 数据请求,但不能用于 POST 请求等其他类型的 Ajax 请求。本文将介绍如何在JavaScript中使用JSONP,并提供一个实际的例子。
实现JSONP
JSONP 可以通过以下代码实现:
function jsonp(url, callbackName, callback) {
const script = document.createElement('script');
script.src = `${url}?callback=${callbackName}`;
window[callbackName] = (data) => {
callback(data);
document.body.removeChild(script);
};
document.body.appendChild(script);
}
我们可以看到,这个函数有三个参数:
-
url
: JSONP 数据请求的 URL。 -
callbackName
: 在服务端接受回调函数名的参数名。 -
callback
: 接收 JSONP 数据的回调函数。
这个函数会动态地创建一个新的 script 标签,为获取 JSONP 数据请求 URL 添加一个查询参数 callback=callbackName
。回调函数的名字将保留在查询参数中,以便服务端能够读取。
然后,在全局命名空间中,我们暴露这个名为 callbackName
的回调函数,并在脚本标签的 load
事件处理函数上执行这个函数。核心代码如下:
window[callbackName] = (data) => {
callback(data);
document.body.removeChild(script);
};
最后,我们再将新创建的 script 标签添加到文档中。因为该代码是通过 <script>
标签上定义的回调函数来执行的,所以这个 JSONP 请求的响应将被直接注入到我们的 JavaScript 中。
完整的代码如下:
function jsonp(url, callbackName, callback) {
const script = document.createElement('script');
script.src = `${url}?callback=${callbackName}`;
window[callbackName] = (data) => {
callback(data);
document.body.removeChild(script);
};
document.body.appendChild(script);
}
jsonp('https://api.github.com/users/octocat', 'myCallback', (data) => {
console.log(data);
});
在这个例子中,我们向 GitHub API 发送了一个 JSONP 请求,当响应返回时,在控制台打印响应数据。此外,我们利用服务端接受 callback=myCallback
参数,来创建了用于响应数据的回调函数。
JSONP 的优缺点
JSONP 的优点:
-
浏览器支持良好,能在绝大多数环境下正常使用。
-
不需要 Ajax 请求,无需 XMLHttpRequest 对象,不需要进行跨域 AJAX 的额外工作。
JSONP 的缺点:
-
安全性问题。由于是在全局作用域上执行代码,所以恶意攻击者可以通过 JSONP 某些特定的接口来进行 CSRF(跨站请求伪造)。因此,我们需要在服务端进行一些针对性的安全策略。
-
只支持 GET 请求,不能支持 POST 等其他类型的 AJAX 请求。
-
只支持文本请求,不能传输二进制图像、JSON、XML 等类型的文件。文章来源:https://www.toymoban.com/news/detail-602116.html
总结
JSONP 是一个使用非常广泛的跨域请求技术。通过简单的回调的方式,能方便地实现从不同域名的服务端动态地获得 JSON 数据。虽然使用起来比较方便,但也存在某些限制。JSONP 体现了一种传统 JavaScript 方式,如果不需要传输敏感数据或处理安全要求比较高的场景,我们仍然可以使用此技术。文章来源地址https://www.toymoban.com/news/detail-602116.html
到了这里,关于JavaScript学习 -- jsonp跨域请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!