解決ajax跨域請求 （總結）

ajax跨域請求，目前已用幾種方法實現：

 

1）用原生js的xhr對象實現。

               var url="http://freegeoip.net/json/";
              
               //建立xhr對象
               function createCORSXhr(url,method){
                    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;                        
                    }
                   
               //建立ajax請求，支持跨域
               function sendAjaxRequest(){
                    var xhr=createCORSXhr(url,"get");
                    xhr.onload=function(){
                         if(xhr.readyState==4){
                         if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
                              alert(xhr.responseText);
                              }else{
                                   alert(" ajax error...")
                                   }
                         }
                    };
                    xhr.onerror=function(){
                         alert("error code:"+xhr.status)
                    }
                    xhr.send(null);
                    };

               sendAjaxRequest()

 

這種方式須要獲取相應對象的支持，對於IE，則是XDomainRequest，此種方式cookie不會參與傳遞。該方式應用了CORS（跨域資源共享）技術，說到底，就是在請求頭和響應頭中作手腳。在請求頭中，加上Origin：協議+域名+端口,固然也能夠Origin：null。在響應頭中，服務端返回Access-control-Allow-Origin:*.

 

2),經過jsonp數據來實現，說白了，jsonp就是js可執行文件，因爲<script>和<link>,<img>加載的文件不受同源限制，因此能夠經過設置src和href來加載相應的跨域json或者xml數據，可是這種方式須要服務端相配合（服務端須要取出請求字符串中的回調函數名，而且返回給客戶端）。jsonp的格式爲：回調函數名（jsonData）。

     jQuery中的$.getJSON()默認實現了這種方式，只須要在url？callback=？便可，固然也能夠手動指定回調函數名。

 

該種方式必定須要服務端的配合。

 

測試網站： http://freegeoip.net/json/

 

3），第三個就是websocket了，固然須要這樣的服務器支持。標準的http服務器是不支持webSocket的。Tomcat7.XX支持websocket。

4），

使用window.name來進行跨域

window對象有個name屬性，該屬性有個特徵：即在一個窗口(window)的生命週期內,窗口載入的全部的頁面都是共享一個window.name的，每一個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的全部頁面中的，並不會因新頁面的載入而進行重置。

好比：有一個頁面a.html,它裏面有這樣的代碼：

再看看b.html頁面的代碼：

a.html頁面載入後3秒，跳轉到了b.html頁面，結果爲：

咱們看到在b.html頁面上成功獲取到了它的上一個頁面a.html給window.name設置的值。若是在以後全部載入的頁面都沒對window.name進行修改的話，那麼全部這些頁面獲取到的window.name的值都是a.html頁面設置的那個值。固然，若是有須要，其中的任何一個頁面均可以對window.name的值進行修改。注意，window.name的值只能是字符串的形式，這個字符串的大小最大能容許2M左右甚至更大的一個容量，具體取決於不一樣的瀏覽器，但通常是夠用了。

上面的例子中，咱們用到的頁面a.html和b.html是處於同一個域的，可是即便a.html與b.html處於不一樣的域中，上述結論一樣是適用的，這也正是利用window.name進行跨域的原理。

下面就來看一看具體是怎麼樣經過window.name來跨域獲取數據的。仍是舉例說明。

好比有一個www.example.com/a.html頁面,須要經過a.html頁面裏的js來獲取另外一個位於不一樣域上的頁面www.cnblogs.com/data.html裏的數據。

data.html頁面裏的代碼很簡單，就是給當前的window.name設置一個a.html頁面想要獲得的數據值。data.html裏的代碼：

那麼在a.html頁面中，咱們怎麼把data.html頁面載入進來呢？顯然咱們不能直接在a.html頁面中經過改變window.location來載入data.html頁面，由於咱們想要即便a.html頁面不跳轉也能獲得data.html裏的數據。答案就是在a.html頁面中使用一個隱藏的iframe來充當一箇中間人角色，由iframe去獲取data.html的數據，而後a.html再去獲得iframe獲取到的數據。

充當中間人的iframe想要獲取到data.html的經過window.name設置的數據，只須要把這個iframe的src設爲www.cnblogs.com/data.html就好了。而後a.html想要獲得iframe所獲取到的數據，也就是想要獲得iframe的window.name的值，還必須把這個iframe的src設成跟a.html頁面同一個域才行，否則根據前面講的同源策略，a.html是不能訪問到iframe裏的window.name屬性的。這就是整個跨域過程。

看下a.html頁面的代碼：

上面的代碼只是最簡單的原理演示代碼，你能夠對使用js封裝上面的過程，好比動態的建立iframe,動態的註冊各類事件等等，固然爲了安全，獲取完數據後，還能夠銷燬做爲代理的iframe。網上也有不少相似的現成代碼，有興趣的能夠去找一下。