跨域初步
- 因为ajax受到同源策略的限制，不能跨域读取数据。
- 但有些属性不受同源策略影响，比如script标签的src属性。
- 因此我们可以用script标签的src属性到其他非同源的网站获取后台数据。
- 前端代码如下
<script src="http://www.api.com/data.php"></script>
console.log(a);
- 后台代码如下
header("content-type:text/html;charset=utf-8");
$arr = array(
"name" => "zs",
"age" => 18
);
echo "var a =".$arr;
此时script标签会解析后台传送过来的数据，后台传送过来的数据为
var a = {"name":"zs","age" = 18}字符串; 这就相当于在前端声明了一个var
变量， 所以此时打印console.log(a); 就会得到这个字符串。
第一次优化
由于第一次的代码不受我们控制，优化1
前端代码如下
<button>按钮</button> <!--在面页中添加一个按钮-->
<script>
function func(data){
console.log(data);
}
// 给按钮添加一个点击事件，当我们点击时发送跨域请求
var button = document.querySelector("button");
button.onclick = function () {
var script = document.createElement("script");
script.src = "http://www.api.com/data.php";
document.body.appendChild(script);
}
</script>
后台代码如下
header("content-type:text/html;charset=utf-8");
$arr = array(
"name" => "zs",
"age" => 18
);
echo "func($arr)";
当我们点击按钮时此时后台返回的func( {"name":"zs","age" = 18});
就会调用我们声明的函数；我们就拿到了后台的数据；
封装jsonp 再优化
前端代码如下
<script>
var button = document.querySelect('button');
button.onclick = function(){
jsonp("http://www.api.com/data.php",function(data){
console.log(data);
})
}
function jsonp ( url , fn ){
var script = document.createElement('script');
var fnName = "fn" + new Data().valueOf();
window [ fnName ] = fn;
script.src = url + "?callback = " +fnName;
document.body.appendChild(script);
}
</script>
后台代码如下
header("content-type:text/html;charset=utf-8");
$arr = array(
"name" => "zs",
"age" => 18
);
$result = json_encode($arr);
$fnName = $_GET['callback'];
echo "$fnName($result);";
- jsonp和ajax没有关系，ajax受到同源策略的影响,jsonp就是用来做跨域
- jsonp的原理是通过script标签去获取数据，script标签不受同源策略的影响。
- jsonp的使用需要后台的配合。
- jsonp只支持get请求，不支持post，因为script就是get请求。
- 缺点：
- jsonp操作比较麻烦，需要封装，使用jquery封装好的比较方便。
- 只支持get请求，不支持post
2017-10-26 总结  ；天气 晴
