JSONP是什么
JSONP是通过动态创建<script>标签实现跨域数据访问的一种方法,JSON+Padding的缩写就是JSONP,但是,JSONP获得的数据并不一定是JSON,而是所有JavaScript。
JSONP到底是什么
请求方:网站A的前端(浏览器)
响应方:网站B的后端(服务器)
- 请求方动态创建<script>标签,<script>的src指向响应方,并且传一个查询参数?callback=xxx
- 响应方接受请求,根据查询参数callback=xxx构建形如:
xxx.call(undefined, '请求的数据')
的响应 - 请求方接受响应,并且执行
xxx.call(undefined, '请求的数据')
- 请求方就得到了想要的数据
另:一般情况下,查询参数xxx会被取名为一个随机数,如:wky123056123
let script = document.createElement('script')
script.src = 'http://jack.com:8002?callback=' + functionName
document.body.appendChild(script)
let functionName = 'wky' + parseInt(Math.random()*1000000, 10)
window[functionName] = function(result){
alert(result)
}
script.onload = function(e){
e.currentTarget.remove()
}
script.onerror = function(e){
e.currentTarget.remove()
}
通过jQuery实现JSONP
$.ajax({
url: "http://jack.com:8002",
jsonp: "callback",
dataType: "jsonp",
success: function( response ) {
alert( response )
}
})