跨域

雖然有同源策略的存在，但是在js中跨域也依然很常見(jiàn)，有document.domain、window.name、圖片ping、jsonp、CORS，在這里簡(jiǎn)單總結(jié)下圖片ping、jsonp和CORS備忘。

圖片ping

圖片可以從任何URL中加載，所以將img的src設(shè)置成其他域的URL，即可以實(shí)現(xiàn)簡(jiǎn)單的跨域，可以使用onload和onerror事件來(lái)確定是否接受到了響應(yīng)。

var img=new Image();
img.src='http://www.fzitv.net';
img.onerror=function(){
 alert('error');
}
img.onload=function(){
 alert('success');
}

這里新建了一個(gè)img對(duì)象，給出的url是博客地址，這里是個(gè)error事件，所以彈出error；如果將URL改為一張圖片http://images.jb51.net//710118/o_MacBook%20Air.png，就會(huì)彈出onload加載信息success，從而實(shí)現(xiàn)了簡(jiǎn)單的跨域。

使用圖片ping跨域只能發(fā)送get請(qǐng)求，并且不能訪問(wèn)響應(yīng)的文本，只能監(jiān)聽(tīng)是否響應(yīng)而已，可以用來(lái)追蹤廣告點(diǎn)擊。

jsonp

jsonp是帶有回調(diào)函數(shù)callback的json，原名json with padding，翻譯是填充式j(luò)son，參數(shù)式j(luò)son。

因?yàn)閟cript的src可以跨域，所以在發(fā)送的URL后添加一個(gè)callback參數(shù)傳遞給服務(wù)器，然后服務(wù)器返回的數(shù)據(jù)會(huì)作為callback的參數(shù)，因?yàn)檫@個(gè)callback是我們自己來(lái)實(shí)現(xiàn)的，所以可以對(duì)接受到的json數(shù)據(jù)進(jìn)行處理。

簡(jiǎn)單代碼如下：

<script type="text/javascript">
function call(data){
 alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/?callback=call'></script>

這里，我們把腳本的src設(shè)置為http://freegeoip.net/json/?callback=call，這是一個(gè)獲取用戶ip地址的api（有興趣的可以點(diǎn)擊這里查看），然后將callback作為一個(gè)參數(shù)拼接在URL后，返回的json數(shù)據(jù)就會(huì)作為callback的參數(shù)，在這里callback我們定義為call函數(shù)，即返回的json數(shù)據(jù)就會(huì)作為call的參數(shù)傳進(jìn)去，這個(gè)call函數(shù)僅僅彈出用戶的城市city。筆者這里的輸出結(jié)果是河北。其他ip信息可以查看官網(wǎng)，上面有詳細(xì)的列表，比如country_name，time_zone等。

CORS（跨資源共享）

CORS是跨資源共享，cross site resourse sharing，它和ajax其實(shí)是大體相同的，對(duì)于ie實(shí)例化的是xdr對(duì)象，XDomainRequest，我們能訪問(wèn)的也只有responseText，觸發(fā)的事件有l(wèi)oad和error，寫(xiě)法和xhr大體相同，也需要open和send。

對(duì)于ff，chrome等其他瀏覽器實(shí)例化的是xhr，在這里myvin僅僅拿xhr來(lái)演示下，如果要實(shí)現(xiàn)跨瀏覽器，可以配合x(chóng)dr實(shí)現(xiàn)兼容。

xhr如下：

var xhr=new XMLHttpRequest();   
var url="http://www.fzitv.net";
xhr.open('GET', url); 
xhr.send(null);

這里使用的url是http://www.fzitv.net，和ajax唯一的區(qū)別就是url使用的是跨域的絕對(duì)地址，在ajax中使用的本頁(yè)面內(nèi)的相對(duì)地址或絕對(duì)地址。

看一下控制臺(tái)，這里用的是ff40.0.3，顯示信息如下：

已阻止跨源請(qǐng)求：同源策略禁止讀取位于 http://www.fzitv.net 的遠(yuǎn)程資源。（原因：CORS 頭缺少 'Access-Control-Allow-Origin'）。

所以用CORS實(shí)現(xiàn)跨域還有一步要做，就是在服務(wù)器端設(shè)置Access-Control-Allow-Origin。

最新評(píng)論