jsonp的跨域原理

跨域初步

• 因为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);";

1. jsonp和ajax没有关系，ajax受到同源策略的影响,jsonp就是用来做跨域
2. jsonp的原理是通过script标签去获取数据，script标签不受同源策略的影响。
3. jsonp的使用需要后台的配合。
4. jsonp只支持get请求，不支持post，因为script就是get请求。
5. 缺点：
6. jsonp操作比较麻烦，需要封装，使用jquery封装好的比较方便。
7. 只支持get请求，不支持post

2017-10-26 总结 &nbsp；天气 晴