jsonp

同源策略

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。

 

什么是jsonp？

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

 

jsonp有什么用？

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

 

如何使用jsonp？

html：

<script>
    function fn(data){
        for(var key in data){
            console.log(key+"----"+data[key]);
        }
    }
    var element=document.createElement("script");
    element.type="text/javascript";
    element.src="http://127.0.0.1/jsonp/test.php?callback=fn";
    document.body.appendChild(element);
</script>

或者直接：

<script>
     function fn(data){
        for(var key in data){
            console.log(key+"----"+data[key]);
        }
     }
</script>
<script type="text/javascript" src="http://127.0.0.1/jsonp/test.php?callback=fn"></script>   //JavaScript的链接，必须在function的下面。

服务端php代码：

$arr=array("a"=>1,"b"=>2,"c"=>3);
$result=json_encode($arr); 
$callback=$_GET["callback"];
echo $callback."($result)";

 

jquery方法实现  

$.ajax:

$.ajax({
      url:"http://127.0.0.1/jsonp/test.php",
      dataType:"jsonp",
      success:function(data){
          for(var key in data){
              console.log(key+"----"+data[key]);
          }
      }
})

$.getJSON

$.getJSON(
    "http://127.0.0.1/jsonp/test.php?callback=?",
    function(data){
        for(var key in data){
            console.log(key+"----"+data[key]);
        }
    }
);

$.get

$.get(
    'http://127.0.0.1/jsonp/test.php?callback=?', 
    function (data) { 
        for(var key in data){
            console.log(key+"----"+data[key]);
        } 
    }, 
    'jsonp'
); 

jsonp原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）