jsonp+php实现跨域

2019独角兽企业重金招聘Python工程师标准>>>

jsonp跨域原理

<script>标签没有跨域限制

json和jsonp的区别

json是一种基于文本的数据交换方式，或者叫做描述数据的一种格式。

var person = {
    "name": "test",
    "age": "25",
    "sex": "男"
};
 
var data = [1, 2, 3, 4, 5];

而jsonp是一种非官方跨域数据交互协议，该协议允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
比如我在a.com的网站上引用了b.com的一个b.js，但这样跨域的引用并不会产生错误，说明调用js文件时不受跨域的影响。

<script type="text/javascript" src="http://www.b.com/b.js"></script>

那么我们在b.js里添加如下代码，看看是否能够执行

alert("I from b");

确定是可以执行。

请求方式

如果使用jsonp进行跨域请求，所用到的请求方式只能是 get，在php后台接收不到$_POST的请求数据。

实例

jsonptest.html 页面主要代码

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  
            <script type="text/javascript">  
                $(function(){  
                      $.ajax({  
                           url : "http://ip/jsonpreturn.php",  // 远程IP地址或域名
                           dataType:"jsonp",  
                           data:{  
                               "name":"xiaoming",  
                               "pass":"123456"  
                           },  
                           type:"post",  // 就算使用post，在浏览器中也会变成get方式
                           jsonp:"callback",  
                           timeout: 5000,  
                           success:function(data){  
                                console.log(data); 
                           },  
                           error:function(XHR, textStatus, errorThrown){  
                               console.log('error: ' + textStatus);  
                               console.log('error: ' + errorThrown);  
                           }  
                      });  
                });  
            </script>  

jsonpreturn.php主要代码

<?php  
    $name = $_GET['name'];  // _POST接收不到数据
    $pass = $_GET['pass'];  
      
    $jsonp = $_GET['callback'];//get接收jsonp自动生成的函数名  
      
    $arr = array(  
        'name' => $name,  
        'pass' => $pass 
    );  
    echo $jsonp.'('. json_encode($arr). ')'; //jsonp函数名包裹json数据  
?>  

 

转载于:https://my.oschina.net/u/3460260/blog/1614744