跨域資源共享

1.什麼是跨域資源共享

CORS（Cross-Origin Resource Sharing,跨域資源共享）就是一個站點中的資源去訪問另一個不一樣源站點上的資源，其基本思想，就是使用自定義的HTTP頭部讓瀏覽器和服務器進行溝通，從而決定請求或響應是成功仍是失敗。

2.爲何要使用跨域資源共享

因爲跨域安全策略限制，經過XHR實現ajax通訊，XHR對象只能訪問與包含它的頁面位於同一個域中的資源。而實際應用中，經過 <link> 標籤加載外部樣式表文件、經過 <img> 標籤加載外部圖片、經過 <script> 標籤加載外部腳本文件等都須要使用跨域請求。

3.CORS的實現

IE對CORS的實現
請求跨域文件

var xdr = new XDomainRequest();
xdr.onload = function(){
    alert(xdr.responseText);
};
xdr.onerror=function(){
    alert("an error occurred");
};
xdr.open("get", "http://www.baidu.com/resource/");
xdr.send();

Origin:http://www.baidu.com/resource/  //自定義頭部NCZ的使用POST方法發送的請求
Access-Control-Request-Method:POST
Access-Control-Request-Method:NCZ

服務器文件
<?php

header("Access-Control-Allow-Origin:http://www.baidu.com/resource/");//容許的相應的源
header("Access-Control-Allow-Method:POST,GET");//容許的方法
header("Access-Control-Allow-Header:NCZ");//容許的頭部
header("Access-Control-Max-Age:86400");//請求緩存多長時間

firefox,safari,chrome對CORS的實現

var xhr=new createXHR();
xhr.onreadystatechange=function(){
    if(xhr.readystate==4){
        if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
            alert(xhr.responseText);
        }
    }else{
        alert("request was failed:"+xhr.status);
    }
};
xhr.open("get", "http://www.baidu.com/resource/");
xdr.send();

4.其餘跨域技術

JSONP(JSON with Padding 填充式JSON 或參數式JSON)
SONP由兩部分組成：回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數，而數據就是傳入回調函數中的JSON數據。
例如：

<script type="text/javascript">
 function handleResponse(response){
 //處理得到的json數據
 }
</script>
<script src="http://example.com/data.php?callback=handleResponse"></script>//一個JSONP的請求

首先第一個script便籤訂義了一個處理數據的函數;
而後第二個script標籤載入一個js文件，http://example.com/data.php 是數據所在地址，可是由於是當作js來引入的，因此http://example.com/data.php 返回的必須是一個能執行的js文件;
最後js文件載入成功後會執行咱們在url參數中指定的函數，而且會把咱們須要的json數據做爲參數傳入。因此php應該是這樣的

<?php
$callback = $_GET['callback'];//獲得回調函數名
$data = array('1','2','3');//要返回的數據
echo $callback.'('.json_encode($data).')';//輸出

輸出結果爲：handleResponse(['1','2','3']);
jsonp是須要服務器端的頁面進行相應的配合的。
圖像ping
Comet
服務器發送事件
Web Sockets
SSE與Web SSockets