Ajax跨域

什麼是跨域

簡單的理解就是由於javascript同源策略的限制(同源策略: javascript或是cookie 默認只容許訪問同域名下的內容),例如a.com下不能訪問b.com下的內容,這就是跨域.

不一樣域條件

先看看域名的組成:

當協議 子域名 主域名 端口號任意一個不相同,就算是不一樣域,

跨域解決

• jsonp
  jsonp利用的是script標籤來實現(畢竟script不存在跨域問題),

只支持GET請求,不支持POST請求
通常在URL中傳入一個callback的參數,用來調用函數

function getJSON(url,fn){
// 建立 script標籤
    var oScript = document.createElement('script');
    oScript.src = url;
    document.body.appendChild(oScript);
    var reg = /callback=([^&]+)/;
    var fnName = url.match(reg)[1];
// 掛載window
    window[fnName] = fn;   // 函數在服務器端 執行
        oScript.onload = function(){
            document.body.removeChild(oScript);
            delete(window[fnName]);
        }
}

PHP頁面:

echo $_GET['callback'].'({"name":"hello"})';

以上就是jsonp方法的主要實現.

畢竟 jsonp不能實現POST請求

• CORS
  這個方法既能夠實現post又能夠實現 get請求

可是這個方法IE10如下不支持
基本思想: 使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功仍是 應該失敗。
在php頁面添加一下代碼:

header("Access-Control-Allow-Origin:*"); 
header("Access-Control-Allow-Methods","GET,POST");

補充一下

關於對 瀏覽器檢測是否支持 CORS

function createCORS(fn,url){
var xhr = new XMLHttpRequest();
if('withCredentials' in xhr){
    xhr.open(fn,url,true);
}else if(typeof XDomainRequest() != 'undefined'){
    cxhr = new XDomainRequest();
    cxhr.open(fn,url);
   }
}