場景
假如有兩個域名不同的服務(wù)器, a.com和b.com, 在b.com/b_return_js.php這個接口里, 可以獲取一些數(shù)據(jù)。 當(dāng)然,假如是b.com的頁面里, 可以使用ajax, 直接請求這個接口, 但如果在a.com的頁面里如果請求呢。
b_return_js.php的接口代碼:
echo 'var userdata = '.json_encode($a).';'; //一般如果是b.com的站內(nèi)請求就直接返回json_encode($a)了, 但如果要用src屬性實現(xiàn)跨域, 這里我們需要將該值賦給一個js變量, 保證在script標(biāo)簽加載后的頁面里能獲取到這個數(shù)據(jù)并使用。
簡單實現(xiàn)
有一種簡單的方法就是在a.com下的頁面里, 直接
這樣在a.com的頁面里就能直接獲取到這個接口里返回的數(shù)據(jù)了。
但這里有一個缺陷,這個數(shù)據(jù)只能在頁面加載的時候獲取到, 假如我們想要使用ajax那種可以隨時獲取新的接口數(shù)據(jù)的方式就不太適用了, 例如點擊一個按鈕, 從這個接口獲取數(shù)據(jù)局部刷新, 這種方式就有一些不合適了。
類ajax實現(xiàn)
其實實現(xiàn)上面說的類ajax的思路就是在ajax條件觸發(fā)的時候, 重新生成一遍上面的那個標(biāo)簽, 從而再次從接口獲取數(shù)據(jù), 但實際上實現(xiàn)起來還是略有難度(至少對我來說費了不少功夫)。
上代碼:
假如a.com/scriptSrc.php頁面下有一個按鈕
<input type="button" id="ajax_request_from_b" value="來自B.com的請求"/>
每次點擊都會從b.com/b_return_js.php接口獲取數(shù)據(jù), 類似ajax的實現(xiàn)代碼:
function getData()
{
console.log(userdata);
}
$('#ajax_request_from_b').click(function(){
//每次都需要重新加載這個script標(biāo)簽, 因此每次都要重新生成一個新的script標(biāo) 簽保證能從跨域服務(wù)器獲取數(shù)據(jù)
if(ele && ele.parentNode)
{
//ele.parentNode.removeChild(ele); //這種刪除不能將ele徹底從內(nèi)存刪除,只是移除了在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, 每次獲取的都是隨機(jī)順序的用戶信息
});
這樣你每次點擊按鈕, 都會重新從接口獲取一遍數(shù)據(jù), 效果就類似于ajax, 但這是一種js跨域的方法實現(xiàn), 雖然有些吃力不討好, 但不失為一種思路。
新聞熱點
疑難解答
圖片精選