[分享] XMLHttpRequest執行AJAX 跨網域存取

跟大家在介紹Socket.io 的時候，意外發現居然Socket.io 可以執行跨網域的存取，為什麼？這個時候問題就已經埋下，挖掘之後發現！居然是平凡無奇的XMLHttpRequest，還有針對IE做的奇怪處理，到底是怎麼辦到的？

分析
W3C 提案Cross-Origin Resource Sharing(CORS)，這份文件裡面提到，可以透過文件Header 設定可存取網域限制，以及存取方法、時間等，限制的部份有幾個：

必須為http, https
傳送資料方式為GET, POST
資料格式為application/xml

透過剛才的CORS，發展出更高層級XMLHttpRequest，W3C裡面也有實現方式XMLHttpRequest Level 2草案，裡面的這一段介紹:

The XMLHttpRequest Level 2 specification enhances the XMLHttpRequest object with new features, such as cross-origin requests, progress events, and the handling of byte streams for both sending and receiving.

XMLHttpRequest Level 2，可以支援cross-domain 請求，這個部份符合我們的需求。與CORS結合之後，似乎就可以ajax 跨網域存取，感覺不賴。

IE呢？

IE8以上有類似XMLHttpRequest Level 2的物件，稱為XDomainRequest，在
XDomainRequest - Restrictions, Limitations and Workarounds這篇文章裡面仔細描述如何搭配CORS原則完成跨網域的實做。

實做

準備請求網頁，header 就遵守CORS的規範編寫，範例為cross.php

<?php
header("Access-Control-Allow-Origin: http://clonn.info");
echo "hello cross domain.";
?>

Header 的部份宣告Access-Control-Allow-Origin，並且限制可存取網域為http://clonn.info，如果希望所有網站都可以存取可以使用"*"

接著準備一個十分基本的html 網頁，裡面的Javascript 就是這場重頭戲。


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://60.248.47.246/demo/crossDomain/cross.php");
if (request){
    request.onload = function(){
        alert(request.responseText);
    };
    request.send();
}

這邊會向cross.php頁面請求，主要的請求在createCORSRequest 裡面，要檢查瀏覽器是否支援XMLHttpRequest Level 2 ，可藉由檢查物件裡是否預設有withCredentials屬性做為判斷，IE的部份檢查是否有XDomainRequest object。

藉由這個方法就能夠達到跨網域的存取。

線上模擬
Live demo

請求的頁面，回應畫面如下