使用script的src實現跨域和類似ajax效果

Batkid 發布于2019-08-21 10:21 / 683人閱讀

摘要：的接口代碼一般如果是的站內請求就直接返回了，但如果要用屬性實現跨域，這里我們需要將該值賦給一個變量，保證在標簽加載后的頁面里能獲取到這個數據并使用。

場景

在解決js的跨域問題的時候，有多種方式，其中有一種是利用script標簽的src屬性，因為這個屬性是不受域名限制的，我們可以直接讓src的這個鏈接指向跨域網站的一個接口，這個接口返回的是js代碼或者json格式數據，從而實現跨域獲取數據。

假如有兩個域名不同的服務器， 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下的頁面里，直接

這樣在a.com的頁面里就能直接獲取到這個接口里返回的數據了。
但這里有一個缺陷，這個數據只能在頁面加載的時候獲取到，假如我們想要使用ajax那種可以隨時獲取新的接口數據的方式就不太適用了，例如點擊一個按鈕，從這個接口獲取數據局部刷新，這種方式就有一些不合適了。

類ajax實現

其實實現上面說的類ajax的思路就是在ajax條件觸發的時候，重新生成一遍上面的那個標簽，從而再次從接口獲取數據，但實際上實現起來還是略有難度(至少對我來說費了不少功夫)。

上代碼：

假如a.com/scriptSrc.php頁面下有一個按鈕

每次點擊都會從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跨域的方法實現，雖然有些吃力不討好，但不失為一種思路。

GPU云服務器云服務器 ajax跨域 js實現f11的效果使用效果的數據分析 jquery ajax 跨域

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85375.html

ajax之面試必問跨域問題

摘要：可以說是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。只能設置為主域名，不可以在中將設置為。問題安全性，當一個站點被攻擊后，另一個站點會引起安全漏洞。在此處執行利用和這個辦法比較繞，但是可以解決完全跨域情況下的腳步置換問題。 ajax之面試必問跨域問題，如果你知道jsonp就弱爆了，往深處稍微問那么一丟丟，你就會被虐的萬劫不復...個人總結ajax： 1、什么是跨域2、d...

wind3110991 2019-08-19 17:53 評論0 收藏0
ajax之面試必問跨域問題

摘要：可以說是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。只能設置為主域名，不可以在中將設置為。問題安全性，當一個站點被攻擊后，另一個站點會引起安全漏洞。在此處執行利用和這個辦法比較繞，但是可以解決完全跨域情況下的腳步置換問題。 ajax之面試必問跨域問題，如果你知道jsonp就弱爆了，往深處稍微問那么一丟丟，你就會被虐的萬劫不復...個人總結ajax： 1、什么是跨域2、d...

alaege 2019-08-30 12:51 評論0 收藏0
ajax之面試必問跨域問題

摘要：可以說是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。只能設置為主域名，不可以在中將設置為。問題安全性，當一個站點被攻擊后，另一個站點會引起安全漏洞。在此處執行利用和這個辦法比較繞，但是可以解決完全跨域情況下的腳步置換問題。 ajax之面試必問跨域問題，如果你知道jsonp就弱爆了，往深處稍微問那么一丟丟，你就會被虐的萬劫不復...個人總結ajax： 1、什么是跨域2、d...

Lyux 2019-08-01 15:08 評論0 收藏0
iframe,我們來談一談

摘要：通常我們可以在后配置各種指定資源路徑，有如果你未指定的話，則是使用規定的加載策略默認配置就是同域這里和有一點瓜葛的就是和就是用來指定的有效加載路徑。某大咖說: iframe是能耗最高的一個元素，請盡量減少使用某大牛說: iframe安全性太差，請盡量減少使用...wtf, 你們知不知道你們這樣澆滅了多少孩紙學習iframe的熱情和決心。雖然，你們這樣說的我竟無法反駁，但是ifram...

awesome23 2019-08-21 13:29 評論0 收藏0