一, JSONP 是什么?
JSONP 是解决跨域请求的一种技术. 浏览器为了防止 CSRF 攻击会采用同源策略 (协议 / 主机 / 端口均相同) 限制, 对非同源发起 http 请求 (即跨域请求) 会被浏览器阻止.
二, JSONP 跨域请求的原理?
script 标签的 src 属性不受同源策略限制, 用此方式对非同源服务器请求资源, 返回的 JS 代码会调用指定的函数, 携带的参数就是所需的数据, 这样就完成了跨域请求.
三, 原生 JS 的 JSONP 跨域请求:
首先声明一个处理返回数据的函数, 返回的 JS 代码会调用此函数:
- function dosomething(data) {
- console.log(data)
- }
然后创建 script 标签添加到页面, src 设为请求地址, 请求地址的参数规定了返回的函数名:
<script src="http://example.com/data.php?callback=dosomething"></script>
最后服务端会返回一段 JS 代码, 它会调用指定的函数, 携带的参数就是所需的数据, 至此跨域请求就完成了.
dosomething({name:"逐逸"});
四, jQuery 的 JSONP 跨域请求:
这里的 success 就跟上面的 dosomething 一样.
- $.Ajax({
- url: "http://example.com/data.php",
- type: "GET",
- dataType: "jsonp", // 指定服务器返回的数据类型
- success: function(data) {
- console.log(data)
- }
- });
五, JSONP 的优点与缺点:
优点: 它不被同源策略限制, 而且兼容性更好, 在古董浏览器中都可以运行.
缺点: 它只支持 GET 请求, 而不支持 POST 等其他类型的 HTTP 请求.
来源: https://www.cnblogs.com/joych3n/p/10658233.html