JSONP是一种非常常见的实现跨域请求的方法。其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输。
JSONP的请求过程
- 请求阶段:浏览器创建一个
script
标签,并给其src
赋值(类似http://example.com/api/?callback=jsonpCallback
)。 - 发送请求:当给
script
的src
赋值时,浏览器就会发起一个请求。 - 数据响应:服务端将要返回的
数据
作为参数和函数名称
拼接在一起(格式类似”jsonpCallback({name: 'abc'})
”)返回。当浏览器接收到了响应数据,由于发起请求的是script
,所以相当于直接调用jsonpCallback
方法,并且传入了一个参数。
var newscript = document.createElement('script');
newscript.src = 'https://sp0.baidu.com/su?username=Jack&callback=foo';
document.body.appendChild(newscript);
function foo(data) { //callback函数要绑定在window对象上
console.log(data); //foo({ username: 'Jack' })
}