jsonp跨域和CORS跨域

jsonp跨域

js+jsonp

客戶端 a:http://localhost

<script type="text/javascript"> 
    function jsonpCallback(response){
        console.log('The responsed data is: '+response.name);
    }
</script>
<script type="text/javascript" src="http://b.com/js/jsonp.js?callback=jsonpCallback"></script> 
<!--注意：JavaScript的連接，必須在function的下面。-->

服務器端 b:http://b.com

//jsonp.js
jsonpCallback({'name':'amy',age:22 })

jquery + jsonp

客戶端 a

//不使用jsonp的ajax請求(報錯)
        $.ajax({ 
        type: "GET",     
        url: "http://www.b.com/",
        dataType: "json",
        success: function(data) {
             console.log(data); 
        },
        error: function(jqXHR){     
            alert("發生錯誤：" + jqXHR.status);  
        },     
    });

//使用了jsonp 的請求:
        $.ajax({ 
        type: "GET",     
        url: "http://www.b.com/",
        dataType: "jsonp",
        jsonp:"callback",
        success: function(data) {
              console.log(data);    
        },
        error: function(jqXHR){     
            alert("發生錯誤：" + jqXHR.status);  
        }     
    });

服務器端 b:
服務端的修改

1.加上獲取請求的處理：
$jsonp = $_GET["callback"];//callback名字和請求的名字相同
2.返回參數以前加上$jsonp, 並用（）將參數括住,以php後端爲例：
//原來：$result ='{"success":true,"msg":"找到員工：員工編號：' . $value["number"] .'"}';
//改成：$result =$jsonp . '({"success":true,"msg":"找到員工：員工編號：' . $value["number"] .'"})';

ajax的處理把在get請求後追加了callback參數，並給她賦予了參數值，響應值追加了callback的參數值。

侷限

jsonp僅支持get請求