情境
假如有兩個網域名稱不同的伺服器, a.com和b.com, 在b.com/b_return_js.php這個介面裡, 可以擷取一些資料。 當然,假如是b.com的頁面裡, 可以使用ajax, 直接請求這個介面, 但如果在a.com的頁面裡如果請求呢。
b_return_js.php的介面代碼:
複製代碼 代碼如下:
$a = array(
array('username'=>'tony', 'age'=>25),
array('username'=>'yimeng', 'age'=>23),
array('username'=>'ermeng', 'age'=>22),
array('username'=>'sanmeng', 'age'=>21),
);
shuffle($a);
echo 'var userdata = '.json_encode($a).';'; //一般如果是b.com的站內請求就直接返回json_encode($a)了, 但如果要用src屬性實現跨域, 這裡我們需要將該值賦給一個js變數, 保證在script標籤載入後的頁面裡能擷取到這個資料並使用。
簡單實現
有一種簡單的方法就是在a.com下的頁面裡, 直接
複製代碼 代碼如下:
<script src="http://b.com/b_return_js.php"></script>
這樣在a.com的頁面裡就能直接擷取到這個介面裡返回的資料了。
但這裡有一個缺陷,這個資料只能在頁面載入的時候擷取到, 假如我們想要使用ajax那種可以隨時擷取新的介面資料的方式就不太適用了, 例如點擊一個按鈕, 從這個介面擷取資料局部重新整理, 這種方式就有一些不合適了。
類ajax實現
其實實現上面說的類ajax的思路就是在ajax條件觸發的時候, 重建一遍上面的那個標籤, 從而再次從介面擷取資料, 但實際上實現起來還是略有難度(至少對我來說費了不少功夫)。
上代碼:
假如a.com/scriptSrc.php頁面下有一個按鈕
<input type="button" id="ajax_request_from_b" value="來自B.com的請求"/>
每次點擊都會從b.com/b_return_js.php介面擷取資料, 類似ajax的實現代碼:
複製代碼 代碼如下:
function createScript()
{
//console.log(ele);
ele.src = 'http://b.com/b_return_js.php';
ele.type = 'text/javascript';
ele.language = 'javascript';
}
function getData()
{
console.log(userdata);
}
$('#ajax_request_from_b').click(function(){
//每次都需要重新載入這個script標籤, 因此每次都要重建一個新的script標 簽保證能從跨網域服務器擷取資料
if(ele && ele.parentNode)
{
//ele.parentNode.removeChild(ele); //這種刪除不能將ele徹底從記憶體刪除,只是移除了在dom中的位置
for (var property in ele) {
delete ele[property]; //徹底刪除
}
}
ele = document.createElement('script'); //這是一個新的ele
createScript();
document.getElementsByTagName("head")[0].appendChild(ele);
ele.onload = function(){getData()}; //script元素載入後方可擷取userdata, 每次擷取的都是隨機順序的使用者資訊
});
這樣你每次點擊按鈕, 都會重新從介面擷取一遍資料, 效果就類似於ajax, 但這是一種js跨域的方法實現, 雖然有些吃力不討好, 但不失為一種思路。