資訊專欄INFORMATION COLUMN
摘要：的接口代碼一般如果是的站內(nèi)請(qǐng)求就直接返回了，但如果要用屬性實(shí)現(xiàn)跨域，這里我們需要將該值賦給一個(gè)變量，保證在標(biāo)簽加載后的頁(yè)面里能獲取到這個(gè)數(shù)據(jù)并使用。
場(chǎng)景
在解決js的跨域問題的時(shí)候， 有多種方式， 其中有一種是利用script標(biāo)簽的src屬性，因?yàn)檫@個(gè)屬性是不受域名限制的，我們可以直接讓src的這個(gè)鏈接指向跨域網(wǎng)站的一個(gè)接口， 這個(gè)接口返回的是js代碼或者json格式數(shù)據(jù)， 從而實(shí)現(xiàn)跨域獲取數(shù)據(jù)。
假如有兩個(gè)域名不同的服務(wù)器， a.com和b.com, 在b.com/b_return_js.php這個(gè)接口里， 可以獲取一些數(shù)據(jù)。 當(dāng)然，假如是b.com的頁(yè)面里， 可以使用ajax, 直接請(qǐng)求這個(gè)接口， 但如果在a.com的頁(yè)面里如果請(qǐng)求呢。
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的站內(nèi)請(qǐng)求就直接返回json_encode($a)了， 但如果要用src屬性實(shí)現(xiàn)跨域， 這里我們需要將該值賦給一個(gè)js變量， 保證在script標(biāo)簽加載后的頁(yè)面里能獲取到這個(gè)數(shù)據(jù)并使用。
簡(jiǎn)單實(shí)現(xiàn)
有一種簡(jiǎn)單的方法就是在a.com下的頁(yè)面里， 直接
這樣在a.com的頁(yè)面里就能直接獲取到這個(gè)接口里返回的數(shù)據(jù)了。
但這里有一個(gè)缺陷，這個(gè)數(shù)據(jù)只能在頁(yè)面加載的時(shí)候獲取到， 假如我們想要使用ajax那種可以隨時(shí)獲取新的接口數(shù)據(jù)的方式就不太適用了， 例如點(diǎn)擊一個(gè)按鈕， 從這個(gè)接口獲取數(shù)據(jù)局部刷新， 這種方式就有一些不合適了。
其實(shí)實(shí)現(xiàn)上面說的類ajax的思路就是在ajax條件觸發(fā)的時(shí)候， 重新生成一遍上面的那個(gè)標(biāo)簽， 從而再次從接口獲取數(shù)據(jù)， 但實(shí)際上實(shí)現(xiàn)起來還是略有難度(至少對(duì)我來說費(fèi)了不少功夫)。
上代碼：
假如a.com/scriptSrc.php頁(yè)面下有一個(gè)按鈕
每次點(diǎn)擊都會(huì)從b.com/b_return_js.php接口獲取數(shù)據(jù)， 類似ajax的實(shí)現(xiàn)代碼：
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(){
//每次都需要重新加載這個(gè)script標(biāo)簽， 因此每次都要重新生成一個(gè)新的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"); //這是一個(gè)新的ele
createScript();
document.getElementsByTagName("head")[0].appendChild(ele);
ele.onload = function(){getData()}; //script元素加載后方可獲取userdata， 每次獲取的都是隨機(jī)順序的用戶信息
});
這樣你每次點(diǎn)擊按鈕， 都會(huì)重新從接口獲取一遍數(shù)據(jù)， 效果就類似于ajax， 但這是一種js跨域的方法實(shí)現(xiàn)， 雖然有些吃力不討好， 但不失為一種思路。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/85375.html
摘要：可以說是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)。只能設(shè)置為主域名，不可以在中將設(shè)置為。問題安全性，當(dāng)一個(gè)站點(diǎn)被攻擊后，另一個(gè)站點(diǎn)會(huì)引起安全漏洞。在此處執(zhí)行利用和這個(gè)辦法比較繞，但是可以解決完全跨域情況下的腳步置換問題。 ajax之面試必問跨域問題，如果你知道jsonp就弱爆了，往深處稍微問那么一丟丟，你就會(huì)被虐的萬(wàn)劫不復(fù)...個(gè)人總結(jié)ajax： 1、什么是跨域2、d...
摘要：可以說是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)。只能設(shè)置為主域名，不可以在中將設(shè)置為。問題安全性，當(dāng)一個(gè)站點(diǎn)被攻擊后，另一個(gè)站點(diǎn)會(huì)引起安全漏洞。在此處執(zhí)行利用和這個(gè)辦法比較繞，但是可以解決完全跨域情況下的腳步置換問題。 ajax之面試必問跨域問題，如果你知道jsonp就弱爆了，往深處稍微問那么一丟丟，你就會(huì)被虐的萬(wàn)劫不復(fù)...個(gè)人總結(jié)ajax： 1、什么是跨域2、d...
摘要：可以說是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)。只能設(shè)置為主域名，不可以在中將設(shè)置為。問題安全性，當(dāng)一個(gè)站點(diǎn)被攻擊后，另一個(gè)站點(diǎn)會(huì)引起安全漏洞。在此處執(zhí)行利用和這個(gè)辦法比較繞，但是可以解決完全跨域情況下的腳步置換問題。 ajax之面試必問跨域問題，如果你知道jsonp就弱爆了，往深處稍微問那么一丟丟，你就會(huì)被虐的萬(wàn)劫不復(fù)...個(gè)人總結(jié)ajax： 1、什么是跨域2、d...
摘要：通常我們可以在后配置各種指定資源路徑，有如果你未指定的話，則是使用規(guī)定的加載策略默認(rèn)配置就是同域這里和有一點(diǎn)瓜葛的就是和就是用來指定的有效加載路徑。 某大咖說: iframe是能耗最高的一個(gè)元素，請(qǐng)盡量減少使用某大牛說: iframe安全性太差，請(qǐng)盡量減少使用...wtf, 你們知不知道你們這樣澆滅了多少孩紙學(xué)習(xí)iframe的熱情和決心。 雖然，你們這樣說的我竟無(wú)法反駁，但是ifram...
閱讀 535·2019-08-30 15:55
閱讀 944·2019-08-29 15:35
閱讀 1198·2019-08-29 13:48
閱讀 1910·2019-08-26 13:29
閱讀 2933·2019-08-23 18:26
閱讀 1237·2019-08-23 18:20
閱讀 2834·2019-08-23 16:43
閱讀 2709·2019-08-23 15:58
