跨域通信？

Question

我正在構建一個小應用程序，用於在我沒有的網站上使用的JavaScript。該應用程序包括一些可以改變網站的選項。我希望能夠添加登錄系統和聊天。由於跨域政策，我知道我不能定期ajax。我唯一知道如何做的另一件事是通過將腳本元素附加到網頁上來實現jsonp。

如果我要做一個通過腳本元素更新每秒的聊天系統，那會是太重的資源嗎？如果我使用jsonp，我應該爲新的請求更新一個腳本元素，還是每次都追加新的腳本元素？

是jsonp甚至要走這條路嗎？

Answer 1

跨源資源共享（CORS）是一個W3C工作草案，它定義了在跨源訪問源時瀏覽器和服務器必須如何通信。 CORS背後的基本思想是使用自定義HTTP頭來允許瀏覽器和服務器充分了解對方以確定請求或響應是成功還是失敗。

對於一個簡單的請求，一個使用GET或POST但沒有自定義標頭且其正文爲text/plain的請求會發送一個名爲Origin的額外標頭。 Origin頭部包含請求頁面的原點（協議，域名和端口），以便服務器可以輕鬆確定它是否應提供響應。一個例子Origin標可能是這樣的：

Origin: http://www.webiste.com 

如果服務器決定請求應該被允許的，它發出了一個訪問控制允許來源頭回顯已發送相同的起源或「*」如果它是公共資源。例如：

Access-Control-Allow-Origin: http://www.webiste.com 

如果此標題丟失或者來源不匹配，則瀏覽器將不允許請求。如果一切正常，則瀏覽器處理請求。請注意，請求和響應都不包含Cookie信息。

所有前面提到的瀏覽器都支持這些簡單的請求。 Firefox 3.5+，Safari 4+和Chrome都支持通過XMLHttpRequest對象使用。當試圖打開不同來源的資源時，會自動觸發此行爲，而無需任何額外的代碼。例如：

var xhr = new XMLHttpRequest(); 
xhr.open("get", "http://www.webiste.com/some_resource/", true); 
xhr.onload = function(){ //instead of onreadystatechange 
    //do something 
}; 
xhr.send(null); 

要做到同樣的Internet Explorer 8中，你需要使用XDomainRequest對象以相同的方式：

var xdr = new XDomainRequest(); 
xdr.open("get", "http://www.webiste.com/some_resource/"); 
xdr.onload = function(){ 
    //do something 
}; 
xdr.send(); 

Mozilla的團隊建議在他們的崗位約CORS是您應該檢查withCredentials屬性的存在以確定瀏覽器是否通過XHR支持CORS。然後，您可以夫婦與XDomainRequest對象的存在，以覆蓋所有的瀏覽器：

function createCORSRequest(method, url){ 
    var xhr = new XMLHttpRequest(); 
    if ("withCredentials" in xhr){ 
     xhr.open(method, url, true); 
    } else if (typeof XDomainRequest != "undefined"){ 
     xhr = new XDomainRequest(); 
     xhr.open(method, url); 
    } else { 
     xhr = null; 
    } 
     return xhr; 
    } 

var request = createCORSRequest("get", "http:/www.webiste.com/"); 
if (request){ 
    request.onload = function(){ 
     //do something with request.responseText 
    }; 
    request.send(); 
} 

的XMLHttpRequest在Firefox，Safari瀏覽器對象和Chrome有足夠的類似的接口到IE XDomainRequest對象，這種模式運作相當好。通用接口屬性/方法是：

• abort（） - 用於停止正在進行的請求。
• onerror - 使用而不是onreadystatechange來檢測錯誤。
• onload - 使用onreadystatechange來檢測成功。
• responseText - 用於獲取響應的內容。
• send（） - 用於發送請求。

Answer 2

將使用您的應用程序的服務器將需要將您的應用程序的域添加到跨域策略文件。這通常是一個存在於Web根目錄中的XML文件，但確切的性質取決於該服務器是否爲.NET，PHP等。

之後，您將能夠通過腳本進行ajax調用問題。

國際海事組織，動態添加腳本標記是要求麻煩，特別是如果DOM不知道你在做什麼。

希望這會有所幫助。