jsonp跨域

js跨域

利用了script src沒有同源限制，進行跨域請求。
例如，www.a.com 想請求 www.b.com 的內容

//a網站的請求頁：
<script>
 function jsonp(json){
    //對返回的json數據的處理
}
</script>
<script src="http;//www.b.com/jsonp.js"></script>

//b網站的jsonp.js 響應頁
jsonp({'name':'amy',age:22})

要點

1. a網站定義jsonp的回調處理。

2. a網站jsonp跨域請求

3. b網站使用a網站的同名函數處理跨域請求

補充說明

以上即是js的jsonp實現跨域，其實它和ajax的XHR對象並無任何關係，因爲jquery 把jsonp的實現封裝在了ajax中，因此jsonp和ajax常常同時被提起.

---

jquery 跨域

不使用jsonp的ajax請求

$.ajax({ 
    type: "GET",     
    url: "http://www.b.com/jsonp.js"
    dataType: "json",
    success: function(data) {
        //對data的處理
    },
    error: function(jqXHR){     
        alert("發生錯誤：" + jqXHR.status);  
    },     
});

若是不使用jsonp會有跨域報錯。

使用了jsonp 的請求:

$.ajax({ 
    type: "GET",     
    url: "http://www.b.com/jsonp.js"
    dataType: "jsonp",
    jsonp:"callback",//「callback」：任意名字均可以
    success: function(data) {
        //對data的處理
    },
    error: function(jqXHR){     
        alert("發生錯誤：" + jqXHR.status);  
    },     
});

服務端的修改

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請求

---

另闢蹊徑

XHR2（XMLHttpRequest Level 2）
只需在服務器端設置兩個參數便可：

header('Access-Control-Allow-Origin:*');//容許跨域請求的域名，容許所有設爲*
header('Access-Control-Allow-Methods:POST,GET');