使用HTML5 跨域共享特性解決AJAX跨域數據同步問題

　　HTML 5以前的標準由於考慮到瀏覽器安全問題並不允許直接跨域通信，於是爲了達到跨域通信的目的各種蛋疼的解決辦法出現了，常用的有：jsonp、使用代理文件、地址欄hash等等，這些辦法的出現在達到解決跨域問題的同時，也增加了前端頁面的性能開銷和維護成本。HTML5新的標準中，增加了” Cross-Origin Resource Sharing”特性，這個特性的出現使得跨域通信只需通過配置http協議頭來即可解決。

　　Cross-Origin Resource Sharing 詳細解釋見：

　　http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html

　　Cross-Origin Resource Sharing實現的最重要的一點就是對參數” Access-Control-Allow-Origin”的配置，即通過 次參數檢查該跨域請求是否可以被通過。

　　如：Access-Control-Allow-Origin:http://a.com表示允許a.com下的域名跨域訪問;

　　Access-Control-Allow-Origin:*表示允許所有的域名跨域訪問。

　　

 

　　

 

　　如果需要讀取讀取cookie：

　　需要配置參數：Access-Control-Allow-Credentials:true

　　同時在xhr發起請求的時候設置參數withCredentials爲true：

　　var xhr = new XMLHttpRequest();

　　xhr.open();

　　xhr.withCredentials = true; //這個放在xhr.open後面執行，否則有些瀏覽器部分版本會異常，導致設置無效。

　　示例代碼：

　　php:

header('Access-Control-Allow-Origin:http: //a.com');

header('Access-Control-Allow-Methods:POST,GET');

header('Access-Control-Allow-Credentials:true');

echo 'Cross-domain Ajax'

　　JS:

var xhr = new XMLHttpRequest(); ;

xhr.open('GET', 'http: //b.com/cros/ajax.php', true);

xhr.withCredentials = true;

xhr.onload = function () {          

  alert(xhr.response);//reposHTML;

};  

xhr.onerror = function () {

alert('error making the request.');

};

xhr.send();