jsonp

jsonp

• 本文将从跨域获取数据、同源、跨域、jsonp是什么、jsonp的原理是什么、jsonp和ajax的联系解释。

为什么要跨域获取数据？

• 在进行网站开发的过程中经常会用到第三方的数据，但是由于同源策略的限制导致ajax不能发送请求，因此也无法获得数据。

同源

• 同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同。

跨域

• 不同源则为跨域。

      http://api.example.com/detail.html  不同源 域名不同  
      https//www.example.com/detail.html   不同源 协议不同  
      http://www.example.com:8080/detail.html    不同源    端口不同  
      http://api.example.com:8080/detail.html    不同源    域名、端口不同  
      https://api.example.com/detail.html    不同源    协议、域名不同  
      https://www.example.com:8080/detail.html    不同源    端口、协议不同  
      http://www.example.com/detail/index.html    同源    只是目录不同  

jsonp是什么？

• jsonp是json的一种数据格式，是用来解决跨域获取数据的一种解决方案。

jsonp的原理是什么？

1. 动态创建script标签，
2. 通过标签的src属性获取js文件中的脚本，
3. 利用这个特性服务端不再返回JSON格式的数据，而是返回调用这个函数的js代码（回调函数）实现了跨域。

     <script>
       function fuc(data){
          console.log(data.name);
         }
     </script>
      <script src="http://www.baidu.com/api.php?callback=fuc"></script>  

    <?php
2     $cb = $_GET['callback'];
3     $data = array(
4                 'name'=> 'zs',
5                 'age'=>18,
6                 'gender'=>true
7             );
8     echo $cb.'('.json_encode($data).')';
9 ?>    

为什么不是真正的ajax？

• Ajax是页面无刷新的请求数据的操作。