jsonp实现跨域的原理:
+ 浏览器请求外部的javascript是不受同源策略限制的
+ 我们伪造一个script
标签,并把请求后太数据的url复制到script标签的src属性上
+ 将script节点添加到html文档中,浏览器会自动发出请求
jsonp应该注意这一点:自己伪造的javascript请求,浏览器拿到后会把它当做js代码执行,所以使用jsonp后台返回的应该是一段js代码,在实际应用中往往是一个函数调用】
例子:
例如我们可能伪造这么一个链接去请求/getUserList
接口,这时我们跟后台约定了一个参数callback
<script src="http:localhost:7000/getUserList?callback=print"></script>
后台在接收到jsonp请求时,返回的应该是一段js代码,所以与常规接口调用不同,后台在组织好数据之后,还应该将其封装到回调函数里面,所以后台可能会有下面的代码:
var callback = req.query.callback
var user = {name:'wang',mail:'2252009032@qq.com'}
var result = callback + '(' + JSON.stringify(user) + ')'
res.send(result)
所以最后浏览器收到的数据为:
print({name:'wang',mail:'2252009032@qq.com'})
这是一段js代码,这里使用的print函数是已经定义好了的······
解释完jsonp,这里自己封装了一下:
function myCallback(data) {
console.log(data)
}
function jsonp(url, data, callback) {
if (typeof data == 'string') {
callback = data
data = {}
}
var hasParams = url.indexOf('?')
url += hasParams ? '&' : '?' + 'callback=' + callback
var params
for (var i in data) {
params += '&' + i + '=' + data[i]
}
url += params
var script = document.createElement('script')
script.setAttribute('src', url)
document.querySelector('head').appendChild(script)
}
jsonp('http://baidu.com',{id:34},'myCallback')