3.04.02jsonp
1.概念
- 同源策略:数据地址与页面地址的协议、IP和端口都相一致的情况下,可以直接用ajax等技术进行数据交互,这是同源策略的表现方式
- 跨域:数据地址与页面地址的协议、IP和端口中其一个或着多个不一致的情况下,就属于跨域
- 想要进行跨域访问:需要后端开发者设置允许跨域,前端开发者进行跨域操作
- 往往网页ip地址与服务器ip地址不一样却能用ajax的数据进行交互,因为后端开发者设置了跨域操作,这种情况也是跨域的一种
- jsonp:(JSON with Padding)解决跨域问题的一种方法,JSON是一种数据的格式
2.使用jsonp进行跨域访问
1.用法
- XMLHttpRequest这个对象是不支持跨域的,但是script标签的src属性是可以跨域读取脚本的,我们可以巧妙地借助script标签的src属性进行跨域访问
- jsonp仅仅支持get方式,因为参数是拼接在url后面的
- 前端用法:
<script>
// 使用jsonp
// 代码:
// 1、动态创建script标签(因为后台响应的内容是一段脚本,函数的调用)
// 所以利用script标签的src属性 就可以读取这段脚本
var script = document.createElement("script");
// 定义变量 记录接口
var url = "http://47.93.52.8:8002/search?keyword=大壮&callback=jsonp";
// 2、设置script标签的src属性
script.setAttribute("src",url);
// 3、把script标签添加到head标签里面
document.querySelector("head").appendChild(script);
// 4、定义foo函数
function jsonp(res){
// res 就是藏在脚本中的数据
console.log(res);
}
// 另一种写法
// window['jsonp'] = function(res){
// console.log(res);
// }
// 备注:
// jsonp仅仅支持get方式,因为参数是拼接在url后面的
</script>
- 这里浏览器打印的内容(console.log(res)打印的内容):
[
{
"userName":"尼古拉斯.大壮","userAccount":"18316486768","createTime":"2021-10-09T12:47:40.000Z","code":200,"message":"查询成功!"
},
{
"userName":"爱新觉罗.大壮","userAccount":"18316486162","createTime":"2021-10-09T12:47:40.000Z","code":200,"message":"查询成功!"
}
]
- http://47.93.52.8:8002/search?keyword=大壮&callback=jsonp里面的内容(按住ctrl+单击鼠标访问里面的内容):
jsonp([{"userName":"尼古拉斯.大壮","userAccount":"18316486768","createTime":"2021-10-09T12:47:40.000Z","code":200,"message":"查询成功!"},{"userName":"爱新觉罗.大壮","userAccount":"18316486162","createTime":"2021-10-09T12:47:40.000Z","code":200,"message":"查询成功!"}])
- 在服务器端,需要对script的src进行url解析,将data作为参数放入回调函数中,最后通过res.end(callback(data))中将要执行的函数放入客户端的script中,在客户端对该函数进行执行。所以callback函数得是个全局变量,方便另一个script标签里面的代码去调用callback函数
- 后台程序员给前端开发者提供一段脚本,数据就在这个脚本中,以实参的形式传递给callback函数呈现出来。
2.简单例子
-
再来一个简单例子,看看服务器端的代码,让你明白jsonp方式进行数据交互的详情
-
后端(nodejs为例)
app.get('/jsonp_data_get', function (req, res) {
res ={
name:'aaa',
nickname:'bbb'
};
res.end(req.query.callback+'('+JSON.stringify(res)+')');//jsonp格式
- 前端:
let script = document.creatElement('script');
function getData(data){
console.log(data)
}
script.src = 'http://localhost:8080/jsonp_data_get?callback=getData';
document.body.appendChild(script)
- 最终的结果相当于添加了这样的script标签(直接调用了传入了数据了getData函数)
<script>
getData(response)
</script>
3.jq里的jsonp
- 用法:
//执行ajax函数中的jsonp逻辑(因为jquery作者把jsonp的逻辑封装在ajax函数中)
$.ajax({
url: "url地址",
type: "get ",
dataType: "jsonp",//必选参数
success: function (res) {
console.log(res);
},
error:function(err) {
console.log(err);
}
})