跨域
雖然有同源策略的存在,但在js中跨域也依然很常見,有document.domain、window.name、圖片ping、jsonp、CORS,在這裡簡單總結下圖片ping、jsonp和CORS備忘。
圖片ping
圖片可以從任何URL中加載,所以將img的src設定成其他網域的URL,即可以實現簡單的跨域,可以使用onload和onerror事件來確定是否接受到了回應。
var img=new Image(); img.src='http://www.jb51.net'; img.onerror=function(){ alert('error'); } img.onload=function(){ alert('success'); }
這裡新建了一個img對象,給出的url是博客地址,這裡是個error事件,所以彈出error;如果將URL改為一張圖片http://images.jb51.net//710118 /o_MacBook Air.png,就會彈出onload載入資訊success,實現了簡單的跨域。
使用圖片ping跨域只能發送get請求,並且不能訪問響應的文本,只能監聽是否響應而已,可以用來追蹤廣告點擊。
jsonp
jsonp是帶有回呼函數callback的json,原名json with padding,翻譯是填充式json,參數式json。
因為script的src可以跨域,所以在發送的URL後面加上一個callback參數傳遞給伺服器,然後伺服器傳回的資料會作為callback的參數,因為這個callback是我們自己來實現的,所以可以對接受到的json資料進行處理。
簡單程式碼如下:
<script type="text/javascript"> function call(data){ alert(data.city); } </script> <script type="text/javascript" src='http://freegeoip.net/json/?callback=call'></script>
這裡,我們把腳本的src設定為http://freegeoip.net/json/?callback=call,這是一個取得使用者ip位址的api(有興趣的可以點擊這裡查看),然後將callback當作一個參數拼接在URL後,傳回的json資料就會作為callback的參數,在這裡callback我們定義為call函數,也就是傳回的json資料就會作為call的參數傳進去,這個call函數僅僅彈出用戶的城市city。筆者這裡的輸出結果是河北。其他ip資訊可以查看官網,上面有詳細的列表,例如country_name,time_zone等。
CORS(跨資源共享)
CORS是跨資源共享,cross site resourse sharing,它和ajax其實是大體相同的,對於ie實例化的是xdr對象,XDomainRequest,我們能訪問的也只有responseText,觸發的事件有load和error,寫法和xhr大致相同,也需要open和send。
對於ff,chrome等其他瀏覽器實例化的是xhr,在這裡myvin只拿xhr來示範下,如果要實作跨瀏覽器,可以配合xdr實作相容。
xhr如下:
var xhr=new XMLHttpRequest(); var url="http://www.jb51.net"; xhr.open('GET', url); xhr.send(null);
這裡使用的url是http://www.jb51.net,和ajax唯一的區別就是url使用的是跨域的絕對地址,在ajax中使用的本頁內的相對地址或絕對地址。
看一下控制台,這裡用的是ff40.0.3,顯示資訊如下:
已阻止跨來源請求:同源策略禁止讀取位於 http://www.jb51.net 的遠端資源。 (原因:CORS 頭缺少 'Access-Control-Allow-Origin')。
所以用CORS實作跨域還有一步要做,就是在伺服器端設定Access-Control-Allow-Origin。