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

場景

假如有兩個網域不同的伺服器， 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跨域的方法實現， 雖然有些吃力不討好， 但不失為一種思路。