随着前端的飞速发展,近些年 jsonp技术应用的越来越少,但是我们还是需要详细的去了解jsonp,这对于我们如何去和后台配合有极大的意义
jsonp
众所周知,jsonp是用来进行跨域获取数据的一种方式,至于为什么会有跨域,为什么要跨域,在这里就不做详细的解释了。
废话不多说,直接上代码
前台代码
function backFn(data) {
console.log(data)
}
<script src="httpsL//wwww.接口地址.com/?参数&callback=backFn"></script>
后台代码
这里用node为例子
服务器名称.get('/接口地址',(request,response) => {
fs.readFile('数据地址',(error,data) => {
let resData = `backFn(${
JSON.parse(data.toString())})`
response.send(resData)
console.log('请求已响应')
})
})
是不是觉得很懵?别怕,咱们一点一点来分析
- jsonp的原理就是动态的创建一个script标签,通过在src属性上写上接口地址来请求数据
- 请求的接口地址后面一定要跟上一个callback=backFN
- 其中backFn是你在前台已经写好的一个函数,这个函数内部用来接收请求回来的参数,这个参数要和后台协商好
- callback也要和后台协商好,这就像是一个信号
- 后台返回的数据格式一定要是 backFn(包含的数据) 格式
在这里对后端返回的数据格式有严格的要求,仔细看一看,是不是感觉很熟悉
backFn() ,是不是相当于直接执行了在前台我们早就写好的backFn函数,并且把数据
当作参数传了进来
这就是jsonp的原理,是不是感觉清晰明了?