原理
主要就是利用了 script 标签的src没有跨域限制来完成的。
执行的过程
(1)前端定义一个解析函数,例如 jsonpCallback=function(res){}
(2)通过params的形式包装script的请求参数,并且声明执行函数(如 cb=jsonpCallback)
(3)后端获取到前端声明的执行函数(jsonpCallback),并以携带参数并且调用执行函数的方式传递给前端
(4)前端zaiscript标签返回资源的时候就回执行jsonpCallback,并以回调函数的方式拿到返回的数据了
优缺点
缺点:只能进行GET请求,需要后台配合
优点:兼容性好,在一些古老的浏览器中都可以运行
简单使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题栏文档</title>
</head>
<body>
<script type="text/javascript">
function jsonp(res) {
console.log(res) // 后台返回的数据
}
</script>
// 这是后台配合 整理出来的文件地址 我们加上callback 回调函数
<script src="https://xxx.com/aaa/aa/a.js?callback='jsonp'" type="text/javascript"></script>
</body>
</html>
上述就是利用