jsonp+php實現跨域

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數據  
?>