我
请说明 JSONP 的工作原理,它为什么不是真正的 Ajax?
难度:
JSONP(带填充的 JSON)是一种通常用于绕过 Web 浏览器中的跨域限制的方法,因为 Ajax 不允许跨域请求。
JSONP 通过<script>
标签发送跨域请求,通常使用callback
查询参数,例如:https://example.com?callback=printData
。 然后服务器将数据包装在一个名为printData
的函数中并将其返回给客户端。
html
<!-- https://mydomain.com -->
<script>
function printData(data) {
console.log(`My name is ${data.name}!`);
}
</script>
<script src="https://example.com?callback=printData"></script>
js
// 文件加载自 https://example.com?callback=printData
printData({ name: "Yang Shun" });
客户端必须在其全局范围内具有printData
函数,并且在收到来自跨域的响应时,该函数将由客户端执行。
JSONP 可能具有一些安全隐患。由于 JSONP 是纯 JavaScript 实现,它可以完成 JavaScript 所能做的一切,因此需要信任 JSONP 数据的提供者。
现如今,跨来源资源共享(CORS) 是推荐的主流方式,JSONP 已被视为一种比较 hack 的方式。