跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
所谓同源是指,域名,协议,端口均相同
我们想要调取不同的数据需要跨域,解决跨域问题显得十分的重要
跨域的三种方式 1 jsonp跨域
2 使用代理
3 cors(后台)
主要讲讲jsonp跨域的方式(简单,兼容好|只能用get跨域)
实现原理:因为script标签具有跨域能力,所以我们将想要跨域的地址放入script标签中并发送一个回调函数,后台返回回调函数到前端就可以实现跨域
首先我们要动态创建一个script标签 把回调函数拼接在想要跨域的地址后面
具体代码
前台
function callback(data){
alert("age:" + data.age + "name:" + data.name);
}
let url = "xxxxxx&callback=callback";
let obj = document.createElement('script');
obj.attr("src",url);
document.getElementByTagName('body')[0].appendchild(obj);
后台
<?php
$data = array(
'age' => 20,
'name' => '张三',
);
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";
接收数据
$.ajax({
type : "get",
async: false,
url : "xxxxx",
dataType: "jsonp",
jsonp:"callback", //请求php的参数名
jsonpCallback: "callback",//要执行的回调函数
success : function(data) {
alert("age:" + data.age + "name:" + data.name);
}
});
网友评论