平時用慣了jQuery.ajax之類的方法，卻時常忽略了它背后的實現，本文是學習了AJAX基礎及幾種跨域解決方案之后的一些收獲。

跨域

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

圖片ping

圖片可以從任何URL中加載，所以將img的src設置成其他域的URL，即可以實現簡單的跨域，可以使用onload和onerror事件來確定是否接受到了響應。

1. var img=new Image(); 
2. img.src='http://www.survivalescaperooms.com'; 
3. img.onerror=function(){ 
4. alert('error'); 
5. } 
6. img.onload=function(){ 
7. alert('success'); 
8. } 

這里新建了一個img對象，給出的url是博客地址，這里是個error事件，所以彈出error;如果將URL改為一張圖片http://images.vevb.com//710118/o_MacBook%20Air.png，就會彈出onload加載信息success，從而實現了簡單的跨域。

使用圖片ping跨域只能發送get請求，并且不能訪問響應的文本，只能監聽是否響應而已，可以用來追蹤廣告點擊。

jsonp

jsonp是帶有回調函數callback的json，原名json with padding，翻譯是填充式json，參數式json。

因為script的src可以跨域，所以在發送的URL后添加一個callback參數傳遞給服務器，然后服務器返回的數據會作為callback的參數，因為這個callback是我們自己來實現的，所以可以對接受到的json數據進行處理。

簡單代碼如下：

1. <script type="text/javascript"> 
2. function call(data){ 
3. alert(data.city); 
4. } 
5. </script> 
6. <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如下：

1. var xhr=new XMLHttpRequest();  
2. var url="http://www.survivalescaperooms.com"; 
3. xhr.open('GET', url);  
4. xhr.send(null); 

這里使用的url是http://www.survivalescaperooms.com，和ajax唯一的區別就是url使用的是跨域的絕對地址，在ajax中使用的本頁面內的相對地址或絕對地址。

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

已阻止跨源請求：同源策略禁止讀取位于http://www.survivalescaperooms.com的遠程資源。(原因：CORS 頭缺少 'Access-Control-Allow-Origin')。

所以用CORS實現跨域還有一步要做，就是在服務器端設置Access-Control-Allow-Origin。